IjzerenHein / react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫
https://github.com/IjzerenHein/react-native-shared-element
MIT License
1.27k stars 123 forks source link

Scrollview with createSharedElement #257

Open darias08 opened 1 year ago

darias08 commented 1 year ago

Hello,

So I am using a scroll view on my home screen and the issue I am having is when the user scrolls down about a couple of swipes and clicks an item. They will be brought to a new screen, but now let's say within that screen there is another item and takes them to a different screen. Now, if the user were to return back and back once more to main screen. It will take the user back to the very top of the home screen and not back to the initial point they have left off.

The issue that is causing this is the createSharedElement(); because when I switch that with the createNativeStackNavigator(); I am able to return back to the initial point I left off from the scroll view.

Here's what I have set up for my stack navigator:

const UserIsSignedIn = () => {

  const navigation = useNavigation();
  const Stack = createSharedElementStackNavigator();

  return (
      <Stack.Navigator
        screenOptions={{
        headerShown: false
        }}
      >

      {/* Bottom Tabs */}
      <Stack.Screen name={name}  component= {MyTabs} options={{headerShown: false}}/>

       //Popular now section (Screen 1)
      <Stack.Screen name= 'PopularNow' component={PopularNow}/>      

      //Game Preview Screen (Screen 2)
      <Stack.Screen 
      name="GamePreview" 
      component={GamePreviewScreen}

      sharedElements={(route, otherRoute, showing) => {
        if (otherRoute.name === 'GameDetails') {
          return [
           {

           }
          ]
        }
        const { item } = route.params;
          return [
            {
            id: `item.${item.id}.game`,
            animation: 'move',
            resize: 'clip',
        // align: ''left-top'
        },
      ];
      }}
      />

      //Game Details (Screen 3)
      <Stack.Screen name='GameDetails' component={GameDetails}/>

      </Stack.Navigator>

  )
}

export default UserIsSignedIn;

video clip example:

https://user-images.githubusercontent.com/58616895/206288500-b54902dc-1181-477a-b2f0-8719c25a5df0.mp4

p-syche commented 1 year ago

Hello @darias08 ,

Thank you for the detailed description and video. The behaviour you would like to see sounds like a feature request. I think it should be achievable through the usage of refs. Would you like to take a crack at making this work?