Transition breaks with quick navigation between the screens

[mitaxe]

trafficstars

Something goes wrong when navigate and goBack fast.

https://www.dropbox.com/s/z7pdllexqkrq71n/Screen%20Recording%202020-04-20%20at%2014.29.05.mov?dl=0

Source: https://github.com/mitaxe/rn-animations-ui-thread/commit/d4d63bbaaa5cf4f02f9f655a6c06e7432b4c5fda

Env: ``` "@react-native-community/masked-view": "0.1.6", "@react-navigation/native": "^5.1.6", "@react-navigation/stack": "^5.2.11", "react-native-shared-element": "^0.7.0", "react-navigation-shared-element": "^5.0.0-alpha1",

[mitaxe]

It works fine with this config... This one adds debounce on press event and it looks good. But still, I don't understand why it's happening.

const interpolator = ({ current: { progress }}) => {
  return { cardStyle: { opacity: progress }}
}

<Screen
          name="HotelPage"
          component={HotelPage}
          options={{ cardStyleInterpolator: interpolator}}.     <---- fix
          sharedElementsConfig={(route, otherRoute, showing) => {
            const { item } = route.params;
            return [{
              id: `item.${item.id}.photo`,
              animation: 'move',
            }];
          }}
        />

[IjzerenHein]

This seems to be related to #24 Please try the proposed solution in https://github.com/IjzerenHein/react-navigation-shared-element/issues/24#issuecomment-599215880

This one adds debounce on press event and it looks good. But still, I don't understand why it's happening.

What do you mean by adds debounce on press? How does the interpolator do that?

[p-syche]

@mitaxe have you been able to implement the solution suggested by @IjzerenHein ? I marked this issue as stale and I will be closing it if there is no activity.