Skip to content

ProgressiveBlurView briefly loses progressive mask after app returns from background #111

@saseungmin

Description

@saseungmin

Describe the bug

ProgressiveBlurView with direction="blurredBottomClearTop" does not preserve the progressive blur mask correctly when the app returns from background/foreground lifecycle transitions.
When the app is resumed, the blur area briefly appears as a full/uniform blur instead of the expected bottom-to-top progressive blur. After a short moment, it returns to the correct blurredBottomClearTop appearance.
This suggests that the native blur/backdrop state is restored before the progressive mask/filter is reapplied.

To Reproduce
Steps to reproduce the behavior:

  1. Render ProgressiveBlurView over an image/card.
<ProgressiveBlurView
  blurAmount={20}
  blurType="regular"
  direction="blurredBottomClearTop"
  overlayColor="rgba(255, 255, 255, 0.01)"
  reducedTransparencyFallbackColor="rgba(0, 0, 0, 0.4)"
  style={StyleSheet.absoluteFill}
/>
  1. Send the app to background.
  2. Bring the app back to foreground.
  3. Observe the blur area during the first moments after resume.

Expected behavior
The progressive blur mask should remain visually stable after app resume.
For direction="blurredBottomClearTop", the blur should continue to appear strongest at the bottom and gradually clear toward the top, without briefly showing a full/uniform blur state.

Actual behavior
On app resume, the blur region briefly appears as if the full area is blurred uniformly. After the app fully resumes, the progressive bottom-to-top mask is restored.

Screenshots
If applicable, add screenshots to help explain your problem.

OS: iOS / Android
React Native: 0.85.3
Library version: @sbaiahmed1/react-native-blur@4.6.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions