react-navigation-shared-element
react-navigation-shared-element copied to clipboard
Scrollview with createSharedElement
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
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?