react-navigation-shared-element icon indicating copy to clipboard operation
react-navigation-shared-element copied to clipboard

not working with @react-navigation/bottom-tabs|| if stack.navigator is a tab.sceen. shareelement won't work

Open jameszhan02 opened this issue 3 years ago • 5 comments

i am useing expo dev-client. app was working fine with @react-navigation/stack, after change to react-navigation-shared-element, problem appear.

jameszhan02 avatar Jan 15 '22 00:01 jameszhan02

and i try to log out the route.params, but nothing on console. seems like some how params wasnt pass to second screen

    <Stack.Navigator
      screenOptions={{
        useNativeDriver: true,
        headerShown: false,
    >
      <Stack.Screen name="List" component={ViewPosts} />
      <Stack.Screen
        name="Detail"
        component={postDetail}
        sharedElements={(route) => {
          console.log("call back: ", route.params.item.id);
          return [route.params.item.id];
        }}
      />
    </Stack.Navigator>

jameszhan02 avatar Jan 15 '22 00:01 jameszhan02

 const postOnClick = () => {
    console.log("card: ", item);
    navigation.navigate("Detail", { item });
  };

here i pass the post as params in to second screen

jameszhan02 avatar Jan 15 '22 00:01 jameszhan02

function postDetail({ route }) {
  const { item } = route.params;
  console.log("in detail info: ", item);

and over here, in my postDetail component. nothing log out.

jameszhan02 avatar Jan 15 '22 00:01 jameszhan02

This issue has already been closed see the work flow of this answer #77

hamzaahzam avatar Feb 01 '22 11:02 hamzaahzam

I am still having issue getting the bottom-tab navigator to work with sharedElement. It's exactly like this person video that mentioned it.

https://streamable.com/nigj5q

Whenever I transition to a different screen from the bottom tab navigator and navigate back to the screen that has the sharedElement. It wouldn't do the animations. How can I fix this problem?

darias08 avatar Dec 04 '22 10:12 darias08