react-native-reanimated Shared element does not work for in nested navigators.

Description

When navigating from a bottom navigator to a page within another navigator, shared element transition does not work.

StackNavigator |_page1 |_page2 |_BottomNavigator --|_page3

If the application is opened with page1, it works when navigating to page2.
If the application is opened with page3, it does not work when navigating to page1 or page2. In this case, it does not work when navigate from page2 to page1.

const MainStack = createNativeStackNavigator<INavigation>();

const MainStackNavigator = () => {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="bottomTab" component={BottomTabNavigator} />
      {mainNavigationScreens.map(screen => ( 
        <MainStack.Screen key={screen.name} {...screen} />
      ))}
    </MainStack.Navigator>
  );
};

Steps to reproduce

Try shared element in nested navigators

Snack or a link to a repository

Snack

Reanimated version

3.2.0

React Native version

0.71.8

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

Jun 02 '23 17:06 ahmtshn

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

Jun 02 '23 17:06 github-actions[bot]

experiencing same problem!

Jun 02 '23 20:06 arasrezaei

According to the documentation, shared transition is only available to Native Stack Navigator The transition does not support bottom tab navigator

Jun 20 '23 18:06 booker-dragon

@booker-dragon When I read the assertion in the document, I thought it suggests that we have the ability to utilize nested navigators, but only when the top-level navigator is a native stack navigator, not a stack navigator. I'm uncertain whether the current behavior is intentional or a bug. However, it seems quite limiting if we are unable to utilize any nested navigators within a native stack navigator.

Jun 26 '23 04:06 bglgwyng

@bglgwyng I was having same issue, I think the nested navigator only mean the native stack navigator

Jun 26 '23 09:06 booker-dragon

I couldn't understand why non-native stack navigators have an impact on the functionality of shared element transitions. Unlike NativeStackNavigators, non-native stack navigators only incorporate React Native elements like View into the rendering structure. To my understanding, shared element transitions are integrated with 'react-native-screens' and remain independent of React Navigation packages. Therefore, from the perspective of the shared element transition's view, nested non-native stack navigators cannot be distinguished from ordinary elements in the rendering structure.

Jul 04 '23 07:07 bglgwyng

Currently we supports native stack, in the future we want to supports JS stack also

Jul 04 '23 12:07 piaskowyk

It is working fine in Android when I have a Tab navigator created using @react-navigation/bottom-tabs and have 2 screens apart from Tab Navigator in the global native stack navigator, but it is not working in IOS.

Oct 27 '23 07:10 rohitjindal018

@piaskowyk are there any discussion or PR to follow up? I'm quite interested in tracking the progress of supporting JS stack.

Dec 21 '23 17:12 alireza-shakewell

Until shared element transitions are supported for bottom tabs/js stack, does someone know if there is a way to do those share element transitions "by hand" for now ? (instead of using the sharedTransitionTag)