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:
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>
);