Experiencing white flashes when transitioning between screens.

[darias08]

Hello,

I am not sure what's causing my screen to have white flashes when I am transitioning. Here's a gif example of what I am talking about.

https://drive.google.com/file/d/1JWLd2jgfxQk8ay2-RutTUe0ApfwT4lP7/view?usp=sharing

This is how I have it setup for the transition in my stack.navigator:

export default function UserIsSignedIn() {

  const navigation = useNavigation();

  return (

      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
        headerTintColor: "white",
        headerTransparent: true,
        title: '',
        headerStyle: {backgroundColor: 'transparent'},
        }}
      >

      <Stack.Screen 
      name="GamePreview" 
      component={GamePreviewScreen} 
      sharedElements={(route, otherRoute, showing) => {
          const { item } = route.params;
          return [
            {
        id: `item.${item.id}.game`,
        animation: 'move',
        // resize: 'clip'
        // align: ''left-top'
        },
      ];
      }}
      options={{
      headerLeft: () => (
      <TouchableOpacity
        style={styles.headerBtnContainer}
        onPress={() => navigation.goBack()}>
        <Ionicons name="chevron-back" size={25} color="white" style={{paddingRight:30, paddingLeft: 30}}/>
      </TouchableOpacity>  
      ),
      }}/>

</Stack.Navigator>

 )
}

[darias08]

Nevermind, I fixed the problem.

However, I am wondering if it's possible I can add both the createNativeStackNavigator(); and createSharedElementStackNavigator(); into one function?

The reason why I want to use these two is because one gives me the opportunity to animate a component and have a slide-from-right feature createNativeStackNavigator();

And the other gives me another particular animation, but I just want to know how can I use these two that have separate components that do different animations.