A bottom sheet helps people perform a scoped task that's closely related to their current context.
import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import { View, Text, ScrollView, Pressable, Button, Platform } from 'react-native';
import { Sheet, useSheetRef } from '~/components/nativewindui/Sheet';
import { useColorScheme } from '~/lib/useColorScheme';
export default function SheetScreen() {
const { colors, isDarkColorScheme } = useColorScheme();
const bottomSheetModalRef = useSheetRef();
return (
<>
<Stack.Screen
options={{
title: 'NativeWindUI',
headerSearchBarOptions: {
hideWhenScrolling: false,
},
headerLargeTitle: true,
headerRight() {
return (
<Pressable className="opacity-80 active:opacity-40">
<View className="opacity-90">
<Icon name="cog-outline" color={colors.foreground} />
</View>
</Pressable>
);
},
}}
/>
<ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
<View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
<Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
Bottom Sheet
</Text>
<Button
color={isDarkColorScheme && Platform.OS === 'ios' ? 'white' : 'black'}
title="Open Bottom Sheet"
onPress={() => bottomSheetModalRef.current?.present()}
/>
</View>
</ScrollView>
<Sheet ref={bottomSheetModalRef} snapPoints={[200]}>
<View className="flex-1 items-center justify-center pb-8">
<Text className="text-foreground">@gorhom/bottom-sheet 🎉</Text>
</View>
</Sheet>
</>
);
}
npx nwui-cli@latest add bottom-sheet
Next, wrap your root component with a GestureHandlerRootView (with a style of flex: 1) and a BottomSheetModalProvider.
npx expo install @gorhom/bottom-sheet react-native-gesture-handler
Next, wrap your root component with a GestureHandlerRootView (with a style of flex: 1) and a BottomSheetModalProvider.
import { Sheet, useSheetRef } from '~/components/nativewindui/Sheet';
const bottomSheetModalRef = useSheetRef();
React.useEffect(() => {
bottomSheetModalRef.current?.present();
}, []);
return (
<Sheet ref={bottomSheetModalRef} snapPoints={[200]}>
{/* content */}
</Sheet>
);
See the @gorhom/bottom-sheet documentation for all of the props.