Trouble with 'react-navigation'

aubri61 commented 1 year ago

Description

I'm using nested Native Stack Navigator.

And in the inner stack navigators, when i do 'navigation.navigate' the animation works fine. but when i do 'navigation.goBack()', the screen just flashes and pop the current screen and replace the screen very suddenly. it seems very unsmooth, and while flashing i can see the white background behind. I really want to fix it since my app's background is dark color..

I found that when i add 'entering' prop to the animated.view from 'react-native-reanimated', this issue happens. not only entering, when i add animation using useanimatedstyle , the same problem arises.

useEffect(() => {
    const afterNavigate = navigation.addListener('transitionEnd', () => {
        setTranisitionEnd(true);
    });
    return afterNavigate;
}, [navigation]);

const animLogo = useAnimatedStyle(() => {
    const visible = tranisitionEnd ? 1 : 0;

    return {
        opacity: withDelay(
            0,
            withTiming(interpolate(visible, [0, 1], [0, 1]), {
                duration: 1000,
            }),
        ),
    };
});

but strangely, when i enable header and press the back button at the header, it works fine(the animation) look at the video i attached, first one is my current situation. you can see the screen flashing. but in the second trial, when i press the back button at the header the transition is very smooth.

https://user-images.githubusercontent.com/49435892/227789442-fb32668f-7a31-4ffe-84b5-ecef96348957.mov

i changed component rendering part simply. and it's not just only problem of this stack. the other stacks also have same problem.

in the snack, it works fine but with the same code, in my app, it does not work... :(

Expected behavior

when 'navigation.goBack()' the animation for transition performs smoothly.

Environment

[] I've removed the packages that I don't use

package	version
@react-navigation/native	"^6.1.2"
@react-navigation/bottom-tabs	"^6.5.4",
@react-navigation/stack	"^6.3.14",
@react-navigation/native-stack	"^6.9.9",
react-native-safe-area-context	"^4.5.0",
react-native-screens	"^3.19.0",
react-native-gesture-handler	"^2.9.0",
react-native-reanimated	"^2.14.4",

Steps to reproduce

i attached snack url

just adding animation to the animated view to the child screen causes this problem.

Snack or a link to a repository

https://snack.expo.dev/@aubri61/rn-goback-error

Reanimated version

2.14.4

React Native version

0.70.0

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

DevWhkang commented 1 year ago

+1

This bug also happens on android. But I'm on the contrary, it doesn't happen on ios.

dauby88 commented 1 year ago

I'm also having the same issue.

ajesamann commented 1 year ago

Also having this issue!

software-mansion / react-native-reanimated