IjzerenHein / IjzerenHein/react-navigation-shared-element

Scrollview with createSharedElement

Open
#257 1 comment 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
1.3k
Forks
125
PR merge metrics
No merged PRs in 30d

Description

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 (

{/* Bottom Tabs */}



//Popular now section (Screen 1)


//Game Preview Screen (Screen 2)
{
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)



)
}

export default UserIsSignedIn;
```

video clip example:

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

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the nested navigation flow described, starting at createSharedElementStackNavigator and comparing it with createNativeStackNavigator. Check how the shared-element stack handles returning through GameDetails, GamePreview, and the home screen. Done means returning to the home screen restores the scroll position instead of jumping to the top.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.