IjzerenHein / IjzerenHein/react-navigation-shared-element
Scrollview with createSharedElement
- 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