Shared Element animation using showModal and dismiss gesture (like instagram story)

[Pietro-Putelli]

Hi, I'm trying to create an instagram story like screen, when you press the story the sharedElement transition is triggered and then in StoryScreen, if you perform the dismiss gesture, the screen will disappear with the sharedElement transition as well.

I'd like to achieve a transparent background, in order to scale the detail screen and see the under screen before releasing the gesture and dismissing it, so the best solution, and the only one that allow transparent background screens, is using showModal with the following options, as show in the library playground folder:

  Navigation.showModal({
      component: {
        name: "StoriesScreen",
        options: {
          animations: {
            showModal: {
              alpha: {
                from: 0,
                to: 1,
                duration: SET_DURATION,
              },
              sharedElementTransitions: [
                {
                  fromId: `image.1.from`,
                  toId: `image.1.to`,
                  duration: SET_DURATION,
                  interpolation: { type: "spring", ...SPRING_CONFIG },
                },
              ],
            },
            pop: {
              alpha: {
                from: 1,
                to: 0,
                duration: SET_DURATION,
              },
              sharedElementTransitions: [
                {
                  fromId: `image.1.to`,
                  toId: `image.1.from`,
                  duration: SET_DURATION,
                  interpolation: { type: "spring", ...SPRING_CONFIG },
                },
              ],
            },
          },
        },
      },
    });

/* From component */

      <TouchableOpacity onPress={onPress} style={SIZE}>
        <Image
          nativeID="image.1.from"
          style={{ flex: 1 }}
          source={{ uri: A }}
        />
      </TouchableOpacity>

/* Destination component */

      <Image
        nativeID="image.1.to"
        style={{ flex: 1 }}
        source={{
          uri: "https://cdn.we-wealth.com/-/media/Images/social/porsche-356-quando-il-fascino-speedster-conquisto-lamerica.png?rev=9c55b0db85954d18bf4b818784682d26&modified=20201126232413",
        }}
      />

(Invoke Navigation.dismissModal(componentId) to dismiss through gesture.

But here's the result:

RPReplay_Final1648886714.MP4

Then if I instead us push, the sharedElement transition works, but I can't achieve the transparent background.
So since this #6647 suggests that the sharedElement is supported by modals too, there's and error in my code.

Thank you really much

[github-actions]

We use the issue tracker exclusively for bug reports and feature requests.
This issue appears to be a general usage or support question.
Instead, please ask a question on Stack Overflow with the wix-react-native-navigation tag or on Discord.