Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollview with createSharedElement #257

Open
darias08 opened this issue Dec 7, 2022 · 1 comment
Open

Scrollview with createSharedElement #257

darias08 opened this issue Dec 7, 2022 · 1 comment
Labels
enhancement New feature or request

Comments

@darias08
Copy link

darias08 commented Dec 7, 2022

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:

video.mp4
@p-syche
Copy link
Collaborator

p-syche commented Jan 26, 2023

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?

@p-syche p-syche added the enhancement New feature or request label Jan 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants