Shared element does not work for in nested navigators.

ahmtshn commented 1 year ago

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

github-actions[bot] commented 1 year ago

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?

arasrezaei commented 1 year ago

experiencing same problem!

booker-dragon commented 1 year ago

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

bglgwyng commented 1 year ago

@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.

booker-dragon commented 1 year ago

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

bglgwyng commented 1 year ago

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.

piaskowyk commented 1 year ago

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

rohitjindal018 commented 1 year ago

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.

alireza-shakewell commented 10 months ago

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

PierreCapo commented 7 months ago

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)