software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.98k stars 1.3k forks source link

Shared element does not work for in nested navigators. #4530

Open ahmtshn opened 1 year ago

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

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)

himzz1234 commented 6 months ago

@PierreCapo did you find any other way?

PierreCapo commented 6 months ago

No, not at all :(

genomanetwork commented 6 months ago

Same issue

lemo-gizem commented 5 months ago

same issue

luckykellan commented 3 months ago

same issue

mapledan commented 2 months ago

https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview/#plans-for-future

The current implementation supports only the old React Native architecture (Paper). The Fabirc is not support now.