Shared element with placement shifting with 'modal'

[ejkkan]

trafficstars

Hey, I'm using shared elements between multiple different screens. But If I try to use shared elements pushing in to a modal type screen('presentation: 'modal'), the transition between screens the animation is a bit off and then skips into the correct position. Please see video.

https://user-images.githubusercontent.com/32518962/218247061-673023a0-d21a-4cab-8331-ed5f5a92f88d.mov

//Stack

<Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: true,
      }}
    >

      <Stack.Screen
        name="Charity"
        sharedElements={(route, otherRoute, showing) => {
          return [
            {
              id: `sharedbutton`,
              animation: 'fade',
            },
          ];
        }}
        component={Charity}
      />
      <Stack.Screen
        sharedElements={() => {
          return [
            {
              id: `sharedbutton`,
              animation: 'fade',
              resize: 'auto',
            },
          ];
        }}
        options={{
          headerShown: false,
          animationEnabled: true,
          presentation:'modal'
        }}
        name="Checkout"
        component={Checkout}
      />
    </Stack.Navigator>

//Component 1

export const Checkout = ({}: Props) => {
  return (
    <SafeAreaView className="flex-1 p-4 bg-[#313642]">
    ... more code
      <View className="absolute right-8 bottom-8">
        <SharedElement id="sharedbutton">
          <GuideButton type="pay" onPress={submit} />
        </SharedElement>
      </View>
    </SafeAreaView>
  );
};

//Component 2

export const Checkout = ({}: Props) => {
  return (
    <SafeAreaView className="flex-1 p-4 bg-[#313642]">
    ... more code
      <View className="flex">
        <SharedElement id="sharedbutton">
          <GuideButton type="pay" onPress={submit} />
        </SharedElement>
      </View>
    </SafeAreaView>
  );
};

[ejkkan]

Solved by applying this: https://github.com/IjzerenHein/react-navigation-shared-element/issues/261#issuecomment-1426135462

But maybe it should be included in the lib?

[ejkkan]

Reopening since the found solution is for a fade transition and not the regular modal transition.

[joaquinperezlopez]

@ejkkan I have the same problem, did you find any workaround or alternative?

[p-syche]

Hello @ejkkan, hello @joaquinperezlopez ,

I'm sorry you're facing this UI issue. I see you saw the comment about adding ModalFadeTransition and you said you don't need a fade but a regular one.

Going ove the @react-navigation source I found there are other modal-related transitions: https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/TransitionConfigs/TransitionPresets.tsx#L135

Can you try the following solution:

options={{ presentation: 'transparentModal', ...DefaultTransition }}

(import or clone ModalFadeTransition from @react-navigation/stack package)