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:
- 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}
/>
- Send the app to background.
- Bring the app back to foreground.
- 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
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:
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