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 124 forks source link

[v5] route.params are not upgraded after calling navigation.setParams() #134

Closed neiker closed 3 years ago

neiker commented 3 years ago

I have this 2 screens:

<Stack.Screen
  name="Album"
  component={AlbumScreen}
  options={({ route }) => ({
    title: route.params.album.title,
  })}
/>
<Stack.Screen
  name="Photo"
  component={PhotoScreen}
  options={({ route }) => ({
    title: `photoId: ${route.params.photoId}`,
  })}
  sharedElementsConfig={(route) => {
    return [`item.${route.params.photoId}.photo`];
  }}
/>

When a photo is pressed on Album:

navigation.navigate("Photo", {
  album,
  photoId: photo.id,
});

On the Photo screen I have an ScrollView with all photos with snapToInterval:

...
React.useEffect(() => {
  if (scrollViewRef.current) {
    const photo = album.photos.find((p) => p.id === photoId);

    if (photo) {
      scrollViewRef.current.scrollTo({
        x: album.photos.indexOf(photo) * windowWidth,
        y: 0,
        animated: false,
      });
    }
  }
}, [album.photos, photoId, windowWidth]);
...
<ScrollView
onMomentumScrollEnd={({ nativeEvent }) => {
  const index = nativeEvent.contentOffset.x / windowWidth;
  const photo = album.photos[index];

  navigation.setParams({ photoId: photo.id });
}}
>

But inside sharedElementsConfig the route params are never updated and it always get the old photoId. As can be seen on this video, the animation after swap to a different image and pressing back is wrong:

https://user-images.githubusercontent.com/688444/104109885-8dc46400-52d2-11eb-8347-136a0df4170c.mov

IjzerenHein commented 3 years ago

This might have been an issue with the 5.0.0-alpha1 version that you were using. Please upgrade to the latest version which officially supports React Navigation 5 and 6. https://github.com/IjzerenHein/react-navigation-shared-element/releases/tag/v3.1.2

IjzerenHein commented 3 years ago

I was furthermore unable to reproduce this problem in the example app. Please add a test-case to the example app and I can have a closer look. Closing this for now, but feel free to reopen with additional info/repro case when this is still a problem.