Fade Screen Transition Breaks iOS Liquid Glass / Blur Effect on Navigation

[kaushaldarji29]

Bug Description

The issue occurs only when using the fade transition animation in React Navigation.

When navigating to the screen with:

animation: "fade"

the iOS liquid glass / blur effect disappears or stops rendering correctly.
With the default transition animation, the blur effect works properly.

Environment
{
"@react-navigation/stack": "7.8.11",
"@react-navigation/native": "7.2.2",
"@sbaiahmed1/react-native-blur": "^4.6.1"
}
Expected Behavior

The liquid glass / blur effect should remain visible and render correctly while using the fade transition animation.

Actual Behavior

Using animation: "fade" causes the blur/liquid glass effect to disappear during or after navigation transition.

[DanielAraldi]

Hi @kaushaldarji29, thank you for your report! 💙

Could you create a repo that reproduces this issue? This would help us a lot in analyzing

[kaushaldarji29]

@DanielAraldi okay i will do separate demo for it.

[kaushaldarji29]

@DanielAraldi
I created a minimal reproducible example based on the example provided in the library.
https://github.com/kaushaldarji29/ios-liquid-glass.git

Observed Issues

• The liquid glass effect renders correctly when the screen is opened for the first time using the fade transition.
• After navigating away from the screen and returning to it, the liquid glass effect becomes inconsistent and may disappear completely.
• In some cases, only parts of the liquid glass UI are rendered, while other elements lose their blur/glass appearance.
• Occasionally, the effect reappears, but the selected segment/tab highlight is rendered incorrectly or is not visually clear.
• The rendering behavior changes between navigations without any code changes, suggesting that the blur/liquid glass view is not being restored correctly after the fade transition.
• The issue is reproducible in a minimal example based on the library's sample project, without any application-specific code.

{
"@react-navigation/native": "^7.2.5",
"@react-navigation/native-stack": "^7.16.0",
"@sbaiahmed1/react-native-blur": "^4.6.2",
"expo-blur": "~55.0.14",
}

Untitled.mp4

[sbaiahmed1]

@DanielAraldi I think it is the animator again, hope the #110 fixes it

[DanielAraldi]

Hey @kaushaldarji29, did version 4.6.3 resolve it?

[kaushaldarji29]

Hey @DanielAraldi i will check and let you know.

[MaximZybo]

For some reasons native stack and native tabs break blur after native animation happens. I have to use @react-navigation/stack instead of @react-navigation/native-stack. This solved the problem, but not the best solution