Skip to content

Blur intensity changes unexpectedly on navigation (iOS) #101

@iqraKhaliq

Description

@iqraKhaliq

Description
On iOS, the blur effect appears inconsistent when navigating between screens. The blur amount visibly changes (either increases or decreases) after navigation, even though the same blur configuration is used.

To Reproduce
Steps to reproduce the behavior:

  1. Render a screen with a blurred component (e.g., card/header background).
  2. Navigate to another screen.
  3. Navigate back to the original screen.
  4. Observe the blur intensity.

Expected behavior
The blur intensity should remain consistent across renders and navigation transitions.

Actual Behavior
The blur intensity changes after navigation. It looks stronger/weaker compared to the initial render.

Screenshots
Original Card
Image

After Navigation
Image

Usage
<BlurView blurAmount={5} blurType={'regular'} style={StyleSheet.absoluteFill} />

Desktop

  • OS: 26.2

Smartphone

  • Device: Simulator iPhone 17 Pro
  • OS: 26.2

Package Versions

  • react-native: 0.83.1,
  • @sbaiahmed1/react-native-blur: 4.5.5,

Additional context
Issue occurs only on iOS.
Happens during or after navigation transitions.
Appears like the blur is being reapplied or compounded.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingiosiOS only

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions