White screen when navigate screen with blurview - @react-native-community/blur

[davidgvf]

Description

When navigate to screen use blurview, all screen is white

Steps to reproduce

Uploading screen-capture.webm…

Navigate to screen
These screen have this code:
return (
<BlurView style={{ borderRadius: 16 }} blurAmount={18} overlayColor={'transparent'}>
{props.children}

);

In android

Snack or a link to a repository

a

Screens version

3.24.0

React Native version

0.72.4

Platforms

Android

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

None

Build type

None

Device

Android emulator

Device model

Pixel 7

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[kkafar]

Hey @davidgvf, our github bot makes some valid points ☝🏻 . Marking it as stale and will close it shortly, unless proper reproduction is provided.

[davidgvf]

Hi @kkafar i updated with a video that reproduce de error

[kkafar]

Hey,

1. The link does point to this exact issue not to any video resource
2. It would be much simpler if you provided us with snack / github repo with code on which I can reproduce the issue.

[segun-flexible]

if you check this link, you will see where they said it might misbehave when working with navigation
https://docs.expo.dev/versions/latest/sdk/blur-view/#known-issues

so my advice is not to use this package until they fix the issue of it not allowing us to navigate to other screen

[alduzy]

Related issue: #1661

[vivek154]

Its because of transition animation while navigating.
You can use
screenOptions={{ animation:'none'}}
this config on stack navigator like below.

<RootStack.Navigator screenOptions={{ headerShown: false ,animation:'none'}}>
<RootStack.Screen name={HOME_SCREEN} options={{ headerShown: false }} component={TabScreen} />
<RootStack.Screen name={MY_PROFILE} options={{ headerShown: false }} component={ProfileScreen} />
</RootStack.Navigator >