2

I've been trying to implement a half-modal using React Navigation's native stack.

This is a modal whose contents are aligned to the bottom and has a translucent background.

However, when presented from the bottom in iOS, the background animates together with the contents:

Transparent modal animation

Is there a way to have the translucent modal background fade in and out in place instead of animating from the bottom with the contents?

I would like to stick with the native stack navigator, if possible.

Currently, the code is (roughly):

const AppStack = createNativeStackNavigator<AppStackParamList>();

const App = () => (
  <NavigationContainer linking={linking} fallback={<LoadingScreen />}>
    <AppStack.Navigator screenOptions={{ headerShown: false }}>
      <AppStack.Screen name="AppTabs" component={AppTabsScreen} />
      <AppStack.Group
        screenOptions={{
          presentation: 'transparentModal',
          contentStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
        }}
      >
        <AppStack.Screen name="Dialog" component={DialogScreen} />
      </AppStack.Group>
    </AppStack.Navigator>
  </NavigationContainer>
);

const DialogScreen = ({ navigation }: DialogScreenProps) => (
  <View style={{ flex: 1 }}>
    <StatusBar barStyle="light-content" />
    <View
      style={{
        marginTop: 'auto',
        paddingBottom: 20,
        backgroundColor: '#B8E1FF',
        justifyContent: 'space-between',
      }}
    >
      <Text style={{ backgroundColor: 'yellow', textAlign: 'center' }}>
        This is a dialog
      </Text>
      <Button title='Cancel' onPress={() => { navigation.goBack(); }} />
      <Button title='Cancel' onPress={() => { console.log('Pressed OK') }} />
    </View>
  </View>
);
philtre
  • 213
  • 1
  • 7

0 Answers0