transparentModal presentation is not transparent during navigation animation

[1awaleed]

Current behavior

When using createStackNavigator to create a stack with 3 simple screens: Home, Profile & ModalScreen (which uses presentation: 'transparentModal'.

The Home screen has one button that navigates to the ModalScreen and it overlays on top of the Home screen well,

The ModalScreen has only one button that navigates to Profile screen. When pressing this button, the Home screen becomes blank then the navigation animation starts until the Profile screen mounts, This behaviour happens again when navigating back to the ModalScreen where the Home screen stays blank until the going back animation is done.

I think what is happening is that the Home screens is being detached from the view hierarchy before the animation start and I believe it should be after the animation finishes.

const HomeScreen = () => {
  const {navigate} = useNavigation();
  return (
    <View style={{flex: 1}}>
      <Pressable onPress={() => navigate('ModalScreen')}>
        <Text>press here to open modal</Text>
      </Pressable>
      <Text>Notice that this screen will be blank when navigating from the ModalScreen to the Profile Screen</Text>
    </View>
  );
};

const ModalScreen = () => {
  const {navigate, goBack} = useNavigation();
  const nextScreen = () => navigate('Profile');
  return (
    <View style={styles.box}>
      <Pressable onPress={nextScreen}>
        <Text>open next screen</Text>
      </Pressable>
      <Pressable onPress={goBack}>
        <Text>close modal</Text>
      </Pressable>
    </View>
  );
};

const ProfileScreen = () => {
  const {goBack} = useNavigation();
  return (
    <View style={{flex: 1}}>
      <Pressable onPress={goBack}>
        <Text>Click here to go back to modal and notice blank HomeScreen in the background during animation again</Text>
      </Pressable>
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen
          name="ModalScreen"
          component={ModalScreen}
          options={{
            presentation: 'transparentModal',
            cardOverlayEnabled: true,
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Screen.Recording.2022-01-27.at.04.05.32.mov

Expected behavior

Home screen stays visible underneath the Modal screen during any navigation events

Reproduction

https://github.com/1awaleed/transparentModalNavAnimation

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	"^6.0.6"
@react-navigation/stack	"^6.0.11"
react-native-safe-area-context	"^3.3.2"
react-native-screens	"^3.10.2"
react-native-gesture-handler	"^2.2.0"
react-native-reanimated	"^2.3.1"
react-native	"0.67.1"
node	"14.18.1"
npm or yarn	yarn

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native
• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/stack (found: 6.0.6, latest: 6.0.11)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[1awaleed]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

I am not using those libraries