Image transition to single image screen issue

[ghorbani-m]

There is a situation where the image transition from the list to the single image view does not work as expected.

Reproduce the issue

1. Tap on the library tab
2. Tap a library to navigate to the library's images list
3. Now back to the photos tab and tap on an image (the transition does not work correctly and it is something like fade)

While it worked before selecting the library tab or any other tabs!

[ghorbani-m]

I've found a solution here, and it works, but I would like to find a better solution.

The changes would be something like this:

const PhotosStack = createSharedElementStackNavigator();
function PhotosStackScreen() {
  return (
    <PhotosStack.Navigator
      screenOptions={{
        headerShown: false,
        headerTransparent: true,
      }}>
      <PhotosStack.Screen name="Photos.Screen" component={HomeScreen} />
    </PhotosStack.Navigator>
  );
}

. . . 

<HomeTabs.Screen
      options={{
        tabBarLabel: "Photos",
        tabBarIcon: function tabIcon(props) {
          return (
            <FontAwesome5
              name={"images"}
              size={25}
              color={props?.focused ? colors.text : "gray"}
            />
          )
        },
      }}
      name={HomeNavigationTypes.PhotosTab}
      component={PhotosStackScreen}
    />