When I navigate to a new screen in the stack, it sets an opacity color on this screen until it gets focus for example with an input

[davidgvf]

Description

When I navigate to a new screen in the stack, it sets an opacity color on this screen until it gets focus for example with an input

Steps to reproduce

1. Navigate to profile
2. Look screen whit opacity
3. Go to other route
4. go back to profile and show screen correctly

Snack or a link to a repository

s

Screens version

3.21.0

React Native version

0.71.11

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

Android emulator

Device model

pixel 3

Acknowledgements

Yes

[kkafar]

Hi @davidgvf, would you mind posting a reproduction? The link you provided points to not existing resource (404) - my guess is that the repo is private. Also my guess is that you posted version of react-navigation in Screens version section, as version 6.21.0 of react-native-screens does not exist yet. Please update the issue template with adequate version.

[davidgvf]

I detect, that problem ocurring when install @stripe/stripe-react-native @kkafar

Version updated

[kkafar]

Does that mean that the problem is resolved?

[davidgvf]

The problem continues XD, but I have only realized that it conflicts with this library @kkafar and only in android

[kkafar]

Ok, I'm awaiting for requested reproduction.

[davidgvf]

Is it okay if I upload a video here? @kkafar

[kkafar]

It would not help much. Please see this article.

[intergalacticspacehighway]

@kkafar @davidgvf we had seen similar opacity issue and without stripe. I tried reproducing but was unsuccessful. I'll try again. It gets resolved when i changed the default fade animation type for android. https://github.com/showtime-xyz/showtime-frontend/pull/2213

[hirbod]

This is not stale

[hirbod]

Just ran into this multiple times today. Sometimes, it even keeps the opacity at 0, even after the screen transition was finished. Only way to prevent this for us is to set animationDuration to undefined for android.

[davidgvf]

In which section have you set the animation duration to 0?

El El vie, 14 jul 2023 a las 12:02, Hirbod @.***> escribió:

Just ran into this multiple times today. Sometimes, it even keeps the opacity on 0, even after the screen transition was finished. Only way to prevent this for us is to set animationDuration to undefined for android.

— Reply to this email directly, view it on GitHub https://github.com/software-mansion/react-native-screens/issues/1796#issuecomment-1635620992, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO4IC7CQEK2FLB7P6JT375LXQEKMTANCNFSM6AAAAAAZLYTUUI . You are receiving this because you were mentioned.Message ID: @.***>

[hirbod]

Not 0, just undefined.

The only way we could workaround was like so:

        <Stack.Screen
          name="comments"
          options={{
            headerTitle: "Comments",
            animation: Platform.OS === "android" ? "fade_from_bottom" : "simple_push",
            animationDuration: Platform.OS === "android" ? undefined : 200,
          }}
          component={CommentsScreen}
        />

[davidgvf]

Hi, i detect the problem in my case, if you have lib @react-native-community/blur, If you use the excessive style for the blurview, and you do not remove that component, that is, it is always rendered, in my case I used it for the toast notifications, the navigation behaves strange, putting screens in white or in x color

[simonbothen-radinn]

@davidgvf Could you please elaborate your statement? We also use @react-native-community/blur and has animation/color problem, but couldn't figure out explicitly what you're solution is?

[davidgvf]

@simonbothen-radinn If you use blurview on android on any screen, this will cause those animation failures or making the screen blank, unless you remove it when you go to browse, it is if it remains active while browsing

[robvan2]

Not 0, just undefined.

The only way we could workaround was like so:

        <Stack.Screen
          name="comments"
          options={{
            headerTitle: "Comments",
            animation: Platform.OS === "android" ? "fade_from_bottom" : "simple_push",
            animationDuration: Platform.OS === "android" ? undefined : 200,
          }}
          component={CommentsScreen}
        />

This workaround did it in my case + i had to add style={{flex: 1}} to GestureHandlerRootView & SafeAreaProvider that were above NavigationContainer (i had multiple nested navigators ( inner stack <- root stack -> drawer -> tabs )) when i went from the tabs to a screen in the inner stack the problem occurred ... also i have stripe installed.

@hirbod Thanks dude

My case (sometimes it works sometimes it doesn't) (S21Fe Android 13)

https://github.com/software-mansion/react-native-screens/assets/46126356/02626a86-eef4-4c92-8108-50daa74b9eaf