Navigation issue with blurView

[nirali-chavda]

When i use Below Blurview component with position absolute then my StackNavigation slide animation is not working properly but when i remove position absolute then slide animation works fine but Blurview is not working.

              <BlurView
                style={{ position: "absolute",
                top: 0,
                left: 0,
                bottom: 0,
                right: 0}}
                blurType="light"
                blurAmount={10}
                overlayColor="transparent"
                reducedTransparencyFallbackColor="black"
              />

[ChoiHyeongu]

SAME HERE

[ghshgd]

same here, when I use blur with position absolute and navigate to other screen, that screen(after navigating) is covered white foreground with some opacity

[meetwithtaha]

This is hepping with me too in Android any luck?

[DevJoseAle]

Same here

[steadev]

Same here.. RN 0.74.2

iOS works fine.

Android has this issue

[janisievins]

Facing the same issue. react-native version 0.74.2, @react-native-community/blur version 4.3.2.

[martinsinghk]

In my case, I use the BlurView with absolute position in a navigation bottom bar. When I navigate to the target view, the whole screen would disappear and just leave my APP on plain SplashScreen. I encounter this problem on Android 13 so far, and iOS is just fine.

"react-native": "0.74.2",
"@react-native-community/blur": "^4.4.0",
"@react-navigation/bottom-tabs": "^6.5.20"

So to save my day, I set a boolean state by a 1s timeout in useEffect. Now it seems alright. There's a bit of blur transition in the beginning, though that's fine for me.

  const [blur, setBlur] = React.useState(false);
  useEffect(() => {
    setTimeout(() => {
      setBlur(true);
    }, 1000);
  }, []);
return (
  ...
  <BlurView style={Platform.OS === 'ios' || blur ? { position: 'absolute' } : null} ... />
);

It's a shame but I don't have time to investigate this problem on Android side. Hope that someone else find out the root cause and share here.

[mkhotib20]

Same here..

@react-native-community/blur version : 4.4.0
react-native version : 0.74.3

Android has this issue
iOS works fine.

[vmendesneto]

Has anyone managed to solve it somehow on Android?

[Weissheiten]

There is a discussion here: software-mansion/react-native-screens#1661 and what seems to solve the problem (but introduce a slight flicker) is using the setting: animation: 'slide_from_bottom',

So far no "clean" solution that I know of.

[cihanbas]

if you are using stack navigation, you can also using these codes

  useEffect(() => {
    const transitionEnd = navigation.addListener('transitionEnd', (e) => {
      console.log('transitionEnd', e)
      setStatus(true)
    })
    return transitionEnd
  }, [navigation])