Bottom Tabs Navigator breaking Transition

[mrousavy]

Description

In v3 and v5 a Bottom Tabs Navigator still breaks the Shared Element Transition.

This is a known issue (see #42 (comment)), I just wanted to create a dedicated issue to this (maybe for future PRs).

Workaround

A common workaround for this issue is to wrap the Tabs inside an extra SharedElement Stack Navigator:

const SharedElementStack = createSharedElementStackNavigator();
function HomeScreenStack(): JSX.Element {
  return (
    <SharedElementStack.Navigator
      screenOptions={{
        gestureEnabled: false,
      }}
      headerMode="none">
        <SharedElementStack.Screen component={HomeScreen} name="HomeScreenSharedElementStack" />
    </SharedElementStack.Navigator>
  );
}

But even with this workaround the issue is not solved. See demo

Demo

Demo Video on streamable

In this demo I'm using the following Setup:

• Shared Element Stack Navigator (with sharedElements)
  • Bottom Tabs Navigator
    • Shared Element Stack Navigator (no configuration)
      • HomeScreen (containing <SharedElement>)
    • Shared Element Stack Navigator (no configuration)
      • HeartScreen
    • Other Screen
    • Other Screen
  • Post Details Screen (containing <SharedElement>)

[tharun-slarn]

creating a separate stack for source file inside tab worked for me

Eg:

const HomeStack = createSharedElementStackNavigator();
function HomeStackScreen() {
    return (
        <HomeStack.Navigator>
            <HomeStack.Screen name="Source" component={Sourcescreen} />
         </HomeStack.Navigator>
    );
}
>


 <Tab.Screen name="Home" component={HomeStackScreen}/>

[vagnerlandio]

@tharun-slarn thanks, this worked for me but lag on back/out transition. This happens in your project?

[darias08]

const HomeStack = createSharedElementStackNavigator();

I am confused as to how you used this? I have a function that is for my tabs navigator and the other is my stack navigator. I want to know how can I fix the issue where my sharedElement doesn't have any issues with the bottom tab navigator.

Here's what I have for my code:

MyTabs Navigator

function MyTabs() {

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        animated={true}
        backgroundColor="black"/>  
        <Tab.Navigator
        activeColor='#fff'
        inactiveColor= '#666666'
        barStyle={{backgroundColor: COlORS.dark_gray}} 
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size, fontSize}) => {
            let iconName;
            let routeName = route.name;

            if (routeName === homeName) {
              iconName = focused ? 'home' : 'home-outline' 
            }
            else if (routeName === searchName) {
                iconName = focused ? 'search' : 'search-outline'
            }
            
            else if (routeName === notificationName) {
                iconName = focused ? 'notifications' : 'notifications-outline'
            }

            else if (routeName === libraryName) {
                iconName = focused ? 'library' : 'library-outline'
            }

            return <Ionicons name ={iconName} size={20} color= {color}/>
            
          },
        })}
        >
    
        {/*Bottom Tab navigation*/}
        <Tab.Screen name={homeName} component = {HomeScreen} />
        <Tab.Screen name={searchName} component = {SearchScreen}/>
        <Tab.Screen name={notificationName} component = {NotificationScreen}/>
        <Tab.Screen name={libraryName} component = {LibraryScreen}/>

      </Tab.Navigator>
    </SafeAreaView>
  );
}

Stack Navigator

const Stack = createSharedElementStackNavigator();

export default function UserIsSignedIn() {
  
  const navigation = useNavigation();
  //const Stack = createNativeStackNavigator();

  return (
    
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
        headerShown: false
        }}
      >
      
    <Stack.Screen name="Tabs"  component= {MyTabs} options={{headerShown: false}}/>

     <Stack.Screen name = 'HomeScreen' component={HomeScreen} />

      <Stack.Screen 
      name="GamePreview" 
      component={GamePreviewScreen}
      options
      sharedElements={(route, otherRoute, showing) => {
          const { item } = route.params;
          return [
            {
            id: `item.${item.id}.game`,
            animation: 'move',
            resize: 'clip',
        // align: ''left-top'
        },
      ];
      }}
      />

    </Stack.Navigator>
  
  )
}