An iOS-esque bottom sheet navigation component
Needs to be paired with react-navigation.
npm install @react-navigation/native
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();
...
return (
<Stack.Group
screenOptions={{
presentation: "modal",
cardStyle: {
backgroundColor: "transparent",
},
}}
>
<Stack.Screen name="HomeTabs" component={HomeTabs} />
<Stack.Screen name="ModalScreen" component={ModalScreen} />
</Stack.Group>
)
Use like:
<BottomSheet style={styles.bottomSheet} onPress={() => props.navigation.pop(1)}>
<Text>Hello world</Text>
</BottomSheet>