Transition happens only once with React Navigation V6 with Bottom Tabs

[tradebulls]

Hi @IjzerenHein ,

We are using following versions of the library: "@react-navigation/native": "6.0.6", "@react-navigation/stack": "6.0.11", "react-native-shared-element": "0.8.3", "react-navigation-shared-element": "3.1.3", "rn-wave-bottom-bar": "2.0.0"

The navigators are arranged in following manner:

// Tab Navigator includes an individual screen and no stack navigators <MainStack.Screen name="TabNav1" component={TabNavigator} /> // This below common screens include screens for which shared element transition is required. {commonScreens(MainStack)} </MainStack.Navigator> </NavigationContainer>

The issue with the above implementation is that on the first tab where I have those options for which I need transitions, works perfectly fine, it stops working when I change the tab and come back to the previous tab and try to open same screens, it just doesn't work.

Any help?

[MorganTrudeau]

Experiencing the same issue. In the code below I have a user list in Tabs. There is a shared transition when navigating to the Profile screen. This works if I don't change tabs. Once I change tabs and come back the sharedElements prop stops being called on navigation.

<Stack.Navigator
      initialRouteName="Tabs"
      screenOptions={defaultNavigationOptions}>
      <Stack.Screen
        name="Tabs"
        component={Tabs}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Profile"
        component={Profile}
       sharedElements={(route) => {
          const {user} = route.params;
            return [
              {
                id: `user.${user.id}`,
              },
            ];
        }}
      />
<Stack.Navigator />

[tradebulls]

@IjzerenHein Can you please help?

[hoanghai9650]

Me too, any fixed ?

[haibert]

I'd highly recommend creating a expo snack recreating the issue guys

[hoanghai9650]

Found the solution! You have to wrap the screen which use shareElement in it before you add it to Tab.Navigator Like this: const StackElement2 = createSharedElementStackNavigator(); const HomeScreen1 =()=>( <StackElement2.Navigator screenOptions={{headerShown: false}}> <StackElement2.Screen name="HomeScreen" component={HomeScreen}/> </StackElement2.Navigator> ) then add HomeScreen1 to Tab.Screen and done!

[praisedavid787]

Found the solution! You have to wrap the screen which use shareElement in it before you add it to Tab.Navigator Like this: const StackElement2 = createSharedElementStackNavigator(); const HomeScreen1 =()=>( <StackElement2.Navigator screenOptions={{headerShown: false}}> <StackElement2.Screen name="HomeScreen" component={HomeScreen}/> </StackElement2.Navigator> ) then add HomeScreen1 to Tab.Screen and done!

This seems to be a good work around but hope there's a solid fix in the works.

[praisedavid787]

Found the solution! You have to wrap the screen which use shareElement in it before you add it to Tab.Navigator Like this: const StackElement2 = createSharedElementStackNavigator(); const HomeScreen1 =()=>( <StackElement2.Navigator screenOptions={{headerShown: false}}> <StackElement2.Screen name="HomeScreen" component={HomeScreen}/> </StackElement2.Navigator> ) then add HomeScreen1 to Tab.Screen and done!

This seems to be a good work around but hope there's a solid fix in the works.

[MorganTrudeau]

Tried the workaround mentioned above. It seems to help keep the animation when pushing a new screen but not going back to previous screen. There is a weird bounce when navigating back. I will try and make a minimal repro. I would like to build a simple app with v6 and v5 navigation and see if its in v5. I really don't want to rollback, but shared navigation is so cool that I would.

My attempt at the workaround...

const wrapInSharedElementStack = (
  Screen: SharedElementSceneComponent<any>,
  name: string,
): ComponentType<any> => {
  const SharedStack = createSharedElementStackNavigator();
  return () => (
    <SharedStack.Navigator
      screenOptions={{headerShown: false}}
      initialRouteName={name}>
      <SharedStack.Screen name={name} component={Screen} />
    </SharedStack.Navigator>
  );
};

const FriendsTab = wrapInSharedElementStack(FriendsScreen, 'FriendsScreen');
const EventsTab = wrapInSharedElementStack(EventsScreen, 'EventsScreen');
const ChatTab = wrapInSharedElementStack(ChatListScreen, 'ChatListScreen');

const Tabs = () => {
  return (
    <Tab.Navigator
      initialRouteName="Events"
      screenOptions={{headerShown: false}}
      tabBar={(props: BottomTabBarProps) => {
        return <TabBar {...{...props, tabs}} />;
      }}>
      <Tab.Screen name="Friends" component={FriendsTab} />
      <Tab.Screen name="Events" component={EventsTab} />
      <Tab.Screen name="Chat" component={ChatTab} />
    </Tab.Navigator>
  );
};

[MorganTrudeau]

Here is a minimal reproduction with react-navigation v6. https://snack.expo.dev/@morgantrudeau/v6-share-trans-tab-bug

Dependencies for snack code

    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^5.11.15",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-gesture-handler": "^2.2.0",
    "react-native-reanimated": "^2.4.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.2",
    "react-native-shared-element": "^0.8.4",
    "react-navigation-shared-element": "^3.1.3"

[MorganTrudeau]

I can confirm the snack above does not work with the following v5 dependencies either.

"@react-navigation/bottom-tabs": "^5.11.15",
"@react-navigation/native": "^5.9.8",
"@react-navigation/stack": "^5.14.9",

[MacroBet]

Tried the workaround mentioned above. It seems to help keep the animation when pushing a new screen but not going back to previous screen. There is a weird bounce when navigating back. I will try and make a minimal repro. I would like to build a simple app with v6 and v5 navigation and see if its in v5. I really don't want to rollback, but shared navigation is so cool that I would.

My attempt at the workaround...

const wrapInSharedElementStack = (
  Screen: SharedElementSceneComponent<any>,
  name: string,
): ComponentType<any> => {
  const SharedStack = createSharedElementStackNavigator();
  return () => (
    <SharedStack.Navigator
      screenOptions={{headerShown: false}}
      initialRouteName={name}>
      <SharedStack.Screen name={name} component={Screen} />
    </SharedStack.Navigator>
  );
};

const FriendsTab = wrapInSharedElementStack(FriendsScreen, 'FriendsScreen');
const EventsTab = wrapInSharedElementStack(EventsScreen, 'EventsScreen');
const ChatTab = wrapInSharedElementStack(ChatListScreen, 'ChatListScreen');

const Tabs = () => {
  return (
    <Tab.Navigator
      initialRouteName="Events"
      screenOptions={{headerShown: false}}
      tabBar={(props: BottomTabBarProps) => {
        return <TabBar {...{...props, tabs}} />;
      }}>
      <Tab.Screen name="Friends" component={FriendsTab} />
      <Tab.Screen name="Events" component={EventsTab} />
      <Tab.Screen name="Chat" component={ChatTab} />
    </Tab.Navigator>
  );
};

worked for me!! Thank you so much

[darias08]

Here is a minimal reproduction with react-navigation v6. https://snack.expo.dev/@morgantrudeau/v6-share-trans-tab-bug

I have tried this out on expo and I am seeing on android that it still has a bug where it's not transitioning smoothly once you have returned back to the main page to press again. Anyway this has been resolved? None of the above comments worked for me so far.

[hungnd6282]

It fixed for me <3