Shared Element animation using showModal and dismiss gesture [react-native-navigation/wix]

Question

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 },
                },
              ],
            },
            dismissModal: {
              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:

https://user-images.githubusercontent.com/64473929/161373445-4b4a7f4e-fad0-4468-8a0e-d992f5e57c9f.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.

UPDATE

I'm using screens wrapped inside a Wrapper because of I need Redux and SafeAreaContext, here' the wrapper I'm using for each screen:

    const ScreenWrapper = (Component) => {
  return function inject(props) {
    return (
      <Provider store={store}>
        <PersistGate loading={<></>} persistor={persistor}>
          <NavigationProvider value={{ componentId: props.componentId }}>
            <SafeAreaProvider>
              <Component {...props} />
            </SafeAreaProvider>
          </NavigationProvider>
        </PersistGate>
      </Provider>
    );
  };
};

Answer 1

It seems that SafeAreaContext cause the error, so I've uninstalled it and instead of wrapping all screens inside it, I've replaced the useSafeAreaContext hook with react-native-static-safe-area-insets.