Transition going back lag - not working

[marcibk]

Hi there :) my Shared Element isn´t working as it should when going back:

https://user-images.githubusercontent.com/24316787/124273549-6e4f1b00-db40-11eb-9e42-9e16aac95b1a.mov

function StoryDetailScreen(props) {
        const { translations } = useContext(LocalizationContext);
        const [navigation] = useState(props.navigation);
        const [item] = useState(props.route.params.item);

        return (
          <View style={styles.viewContainer}>

            <SharedElement id={`item.${item.id}.photo`}>
              <Image
                style={{ width: '100%', height: 300 }}
                source={item.image}
              />
            </SharedElement>

FlatList

     <FlatList
                      showsHorizontalScrollIndicator={false}
                      data={data}
                      renderItem={renderItemLarge}
                      keyExtractor={(item, index) => index.toString()}
                      horizontal
                      ItemSeparatorComponent={() => <View style={{ margin: 15 }} />}
                      ListFooterComponent={() => <View style={{ margin: 15 }} />}
                      snapToInterval={230}
                      decelerationRate={'fast'}
                      pagingEnabled
                    />

with render Item part

            <TouchableOpacity
              onPress={() => {
                navigation
                .navigate('StoryDetailScreen', { item });
              }}
              style={{ transform: [{ translateX }] }}
            >
              <View
                style={{
                  height: 285,
                  width: 200,
                  shadowColor: '#000',
                  shadowOffset: {
                    width: 0,
                    height: 1,
                  },
                  shadowOpacity: 0.3,
                  shadowRadius: 2,
                }}
              >
              <SharedElement id={`item.${item.id}.photo`}>
                <Image
                  source={item.image}
                  style={{ borderRadius: 10, width: '100%', height: '95%' }}
                />
               </SharedElement>

Can you help me? I don´t know why this is happening.. Thanks :)

    "react-navigation-shared-element": "^5.0.0-alpha1",
    "react-native-shared-element": "^0.7.0",
    "@react-navigation/bottom-tabs": "^5.11.7",
    "@react-navigation/native": "^5.9.2",
    "@react-navigation/stack": "^5.14.2",

[Shik1997]

I have this problem too,if you solved it ,can you tell me how ? @traingethermarc

[Shik1997]

For me adding mode="modal" to the SharedElementStack.Navigator worked. @traingethermarc

[PrasathRavichandran]

Yes, by adding mode="modal" to the sharedElementStack.Navigator resolves the issue. @traingethermarc. Thanks @Shik1997

[bajcmartinez]

But this is still a bug, why do we have to change the navigation to make it work? Anyone found if its related to a bug or implementation issue?

[IjzerenHein]

Which versions are you using? As far as I'm aware the latest official version of react-navigation-shared-element should work. Also make sure to use the latest react-native-shared-element which contains some important native fixes.

[tslater]

I just installed for the first time today and am on "^0.8.2". I am still seeing this exact issue. It also happens sometimes on the forward transition to a lesser degree, and usually only the first time...but deterministically going backwards. It looks like a race condition of sorts. I should add that mode="modal" did not change or improve the behavior.

[hamzaahzam]

I faced the same issue what worked for me is detachInactiveScreens={false} applying this in Navigator stack