Shared element stuck in list when navigateíng back

[kledk]

Anybody ever had an issue like this?
My shared element is somehow getting stuck when I navigate back to the list.

[IjzerenHein]

This means that the shared-element transition is still in progress. While it is in progress, it keeps the original item hidden and draws the overlay.
I think this is because the onTransitionEnd event from the stack lib is received too late. It's possible that the transition-spec is using a spring and it takes a while for it to settle. Are you also seeing this on Android?

[kledk]

Okay. Yes I also see it on Android.

[IjzerenHein]

Alright. How does the rest of your navigation/stack look like?

[davidrenji]

I'm facing a similar issue. Is there a way to know when the transitions back has finished in the origin screen?

[MoeMamdouh]

Any updates in this issue?

[IjzerenHein]

Here's some log output that illustrates the problem. From the time the default transition starts and up until it ends, it takes almost 1 second, which is too much.

09:40:08.912 SharedElementRendererData.js:1 startTransition[StackNavigator1], closing: true, nestingDepth: 2
09:40:08.913 SharedElementRendererData.js:1 willFocusScene[StackNavigator1], name: "MainScreen", depth: 2
09:40:08.913 SharedElementRendererData.js:1 willBlurScene[StackNavigator1], name: "DetailScreen", depth: 2
09:40:08.914 SharedElementRendererData.js:1 willBlurScene[StackNavigator1] using Animated.Value from "DetailScreen", animValue: [object Object]
09:40:08.914 SharedElementRendererData.js:1 Transitioning from "DetailScreen" to "MainScreen", elements: [{"id":"image","otherId":"image","animation":"move"},{"id":"text","otherId":"text","animation":"fade"}]
09:40:09.838 SharedElementRendererData.js:1 endTransition[StackNavigator1], closing: true, nestingDepth: 2
09:40:09.838 SharedElementRendererData.js:1 Transitioning from "undefined" to "MainScreen", elements: null
09:40:09.853 SharedElementRendererData.js:1 didFocusScene[StackNavigator1], name: "MainScreen", depth: 2

The default react-navigation-stack transitionSpec config on iOS looks like this:

export const TransitionIOSSpec: TransitionSpec = {
  animation: 'spring',
  config: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
  },
};

It seems that the values are optimized for smoothness, but this also causes the spring-particle to "settle" very late, causing the problem that you witnessed.

For instance, when I change the transitionSpec to a timing based function the problem is gone:

const StackNavigator1 = createSharedElementStackNavigator(
  {
    Main: MainScreen,
    Detail: DetailScreen,
  },
  {
    defaultNavigationOptions: {
      transitionSpec: {
        open: {
          animation: 'timing',
          config: {
            duration: 350,
          },
        },
        close: {
          animation: 'timing',
          config: {
            duration: 350,
          },
        },
      },
    },
  },
  {
    name: 'StackNavigator1',
  },
);

09:51:02.836 SharedElementRendererData.js:1 startTransition[StackNavigator1], closing: false, nestingDepth: 2
09:51:02.837 SharedElementRendererData.js:1 willBlurScene[StackNavigator1], name: "MainScreen", depth: 2
09:51:02.838 SharedElementRendererData.js:1 willFocusScene[StackNavigator1], name: "DetailScreen", depth: 2
09:51:02.838 SharedElementRendererData.js:1 willFocusScene[StackNavigator1] using Animated.Value from "DetailScreen", animValue: [object Object]
09:51:02.838 SharedElementRendererData.js:1 Transitioning from "MainScreen" to "DetailScreen", elements: [{"id":"image","otherId":"image","animation":"move"},{"id":"text","otherId":"text","animation":"fade"}]
09:51:03.038 RCTLog.js:47 [PERF ASSETS] Loading image at size {2296, 1450}, which is larger than the screen size {828, 1792}
09:51:03.218 SharedElementRendererData.js:1 endTransition[StackNavigator1], closing: false, nestingDepth: 2
09:51:03.218 SharedElementRendererData.js:1 Transitioning from "undefined" to "DetailScreen", elements: null
09:51:03.236 SharedElementRendererData.js:1 didFocusScene[StackNavigator1], name: "DetailScreen", depth: 2

[IjzerenHein]

export const TransitionIOSSpec: TransitionSpec = {
  animation: 'spring',
  config: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
  },
};

If would be nice if someone could "fine-tune" the iOS spring config so that it settles way faster and perhaps even push a PR to react-navigation-stack for this?

[IjzerenHein]

I've done some testing and found the following settings quite effective in making the spring on iOS come to a rest much faster, while not compromising smoothness. The spring settles in about 500ms, instead of 1000ms.

export const iosTransitionSpec = {
  animation: 'spring',
  config: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 10,
    restSpeedThreshold: 10,
  },
};

// Example usage
const StackNavigator1 = createSharedElementStackNavigator(
  {
    Main: MainScreen,
    Detail: DetailScreen,
  },
  {
    defaultNavigationOptions: {
      onTransitionStart: () => console.log('onTransitionStart'),
      onTransitionEnd: () => console.log('onTransitionEnd'),
      transitionSpec: {
        open: iosTransitionSpec,
        close: iosTransitionSpec,
      },
    },
  },
  {
    name: 'StackNavigator1',
  },
);

Let me know whether this solves your problem @kledk ?

[kledk]

@IjzerenHein Cool, I will try that out as soon as possible!

[sergchernata]

Transition spec posted above seems to solve all of my issues.

The one remaining problems is opacity. An element wrapped in TouchableOpacity stays faded until the animation has completely settled.

[IjzerenHein]

Transition spec posted above seems to solve all of my issues.

The one remaining problems is opacity. An element wrapped in TouchableOpacity stays faded until the animation has completely settled.

Hi, please create a separate issue for this and post a (slow-motion) video of the problem.

[IjzerenHein]

I've issued a PR to update the transitionSpec in react-navigation rest times to more meaningful values:
react-navigation/react-navigation#8028

[wzahedi]

I've done some testing and found the following settings quite effective in making the spring on iOS come to a rest much faster, while not compromising smoothness. The spring settles in about 500ms, instead of 1000ms.

export const iosTransitionSpec = {
  animation: 'spring',
  config: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 10,
    restSpeedThreshold: 10,
  },
};

// Example usage
const StackNavigator1 = createSharedElementStackNavigator(
  {
    Main: MainScreen,
    Detail: DetailScreen,
  },
  {
    defaultNavigationOptions: {
      onTransitionStart: () => console.log('onTransitionStart'),
      onTransitionEnd: () => console.log('onTransitionEnd'),
      transitionSpec: {
        open: iosTransitionSpec,
        close: iosTransitionSpec,
      },
    },
  },
  {
    name: 'StackNavigator1',
  },
);

Let me know whether this solves your problem @kledk ?

I tried this on iOS, however it still does not work. I've attached some code, and a video example below. Any advice appreciated! Seems to also be related to this: #72
https://streamable.com/tyslsd

//Transition:
const Transition = {
  gestureDirection: 'vertical',
  transitionSpec: {
    open: iosTransitionSpec,
    close: iosTransitionSpec,
  },
  cardStyleInterpolator: ({ current }) => {
    return {
      cardStyle: {
        opacity: current.progress,
      },
      overlayStyle: {
        opacity: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 0.5],
        }),
      },
    };
  },
};

//Screen:
<Stack.Screen
   name="PhotoView"
   component={PhotoView}
   options={{
      ...Transition,
   }}
   sharedElementsConfig={(route) => {
      const { uri } = route.params;
      return [
         { id: uri, animation: 'fade', align: 'center-center' },
      ];
    }}
 />

[dochonglo]

I tried the same exact solution above regarding altering the transitionSpec on iOS. However, I'm still running into the same problem with the SharedElement staying stuck in place while scrolling through a FlatList. I've even tried altering the values of the durations unfortunately, there's still no difference.

const DiscoverTabStack = createSharedElementStackNavigator( createStackNavigator, { Discover: { screen: DiscoverScreen, path: "discover" }, DetailedActivity: DetailedActivityScreen, }, { animationEnabled: true, gestureVelocityImpact: 0.5, cardOverlayEnabled: true, gestureResponseDistance: { vertical: 100, }, defaultNavigationOptions: { transitionSpec: { open: { animation: "timing", config: { duration: 100, }, }, close: { animation: "timing", config: { duration: 50, }, }, }, }, } );

Currently, I'm using the following versions:

• "react-native-shared-element": "^0.7.0"
• "react-navigation-shared-element": "1"
• "react-navigation-stack": "^1.10.3"
• "react-navigation-tabs": "^2.6.2"
• "react-navigation": "^4.0.10"
• "react-native-screens": "~2.15.0"

Anyone know what the problem may be?