website·Indexed 33 days ago
https://gorhom.dev/react-native-bottom-sheet/A library for creating bottom sheets in React Native, featuring integrated components like BottomSheetFlatList, BottomSheetScrollView, and BottomSheetTextInput. Supports multiple versions including v2 (Reanimated v1), v4 (Reanimated v2), and v5, with specialized functionality for Bottom Sheet Modals and keyboard handling.
The @gorhom/bottom-sheet library provides a performant interactive bottom sheet for React Native with the following capabilities:
FlatList, SectionList, ScrollView, View, and FlashList scrolling interactions, including pull-to-refresh.React Navigation.The @gorhom/bottom-sheet library provides a performant interactive bottom sheet for React Native. Key features include:
FlatList, SectionList, ScrollView, and View scrolling.React Navigation.VirtualizedListProps from react-native.import { BottomSheetVirtualizedList } from "@gorhom/bottom-sheet";
<BottomSheetVirtualizedList
data={data}
keyExtractor={(i) => i}
getItemCount={(data) => data.length}
getItem={(data, index) => data[index]}
renderItem={renderItem}
/>The @gorhom/bottom-sheet v2 library provides a performant interactive bottom sheet with the following features:
FlatList, SectionList, ScrollView, and View.React Navigation.Expo and Reanimated v1.BottomSheetSectionList component is a pre-integrated version of the React Native SectionList designed to work with BottomSheet gestures. It inherits all standard SectionListProps from react-native.import BottomSheet, { BottomSheetSectionList } from "@gorhom/bottom-sheet";
// ... inside component
<BottomSheet snapPoints={['25%', '50%', '90%']}>
<BottomSheetSectionList
sections={sections}
keyExtractor={(i) => i}
renderSectionHeader={renderSectionHeader}
renderItem={renderItem}
/>
</BottomSheet>BottomSheetScrollView is a pre-integrated React Native ScrollView designed to work with BottomSheet gestures. It inherits all standard ScrollViewProps from react-native.import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
const MyComponent = () => (
<BottomSheet snapPoints={['25%', '50%', '90%']}>
<BottomSheetScrollView contentContainerStyle={{ backgroundColor: 'white' }}>
{/* Your scrollable content here */}
</BottomSheetScrollView>
</BottomSheet>
);BottomSheetScrollView is a pre-integrated React Native ScrollView designed to work with BottomSheet gestures. It inherits all standard ScrollViewProps from react-native.import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
const App = () => {
return (
<BottomSheet snapPoints={["25%", "50%", "90%"]}>
<BottomSheetScrollView contentContainerStyle={{ backgroundColor: 'white' }}>
{/* Your scrollable content here */}
</BottomSheetScrollView>
</BottomSheet>
);
};The BottomSheetFlashList is a pre-integrated version of Shopify's FlashList designed to work with BottomSheet gestures. It inherits all FlashListProps from the standard FlashList library.
Deprecation Notice: As of v5, BottomSheetFlashList is deprecated. It is recommended to use the useBottomSheetScrollableCreator hook for a simpler approach to integrating scrollable components.
import BottomSheet, { BottomSheetFlashList } from "@gorhom/bottom-sheet";
// ... inside component
<BottomSheet ref={sheetRef} snapPoints={snapPoints}>
<BottomSheetFlashList
data={data}
keyExtractor={(item) => item}
renderItem={renderItem}
estimatedItemSize={43.3}
/>
</BottomSheet>BottomSheetTextInput component is a pre-integrated TextInput designed to communicate with the internal functionalities of the bottom sheet. This ensures that keyboard handling (such as shifting the sheet up when the keyboard appears) works correctly. It inherits all standard TextInputProps from react-native.import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetView, BottomSheetTextInput } from '@gorhom/bottom-sheet';
const App = () => {
const bottomSheetRef = useRef<BottomSheet>(null);
const snapPoints = useMemo(() => ['25%', '50%'], []);
const handleSheetChanges = useCallback((index: number) => {
console.log('handleSheetChanges', index);
}, []);
return (
<GestureHandlerRootView style={styles.container}>
<BottomSheet
ref={bottomSheetRef}
index={1}
snapPoints={snapPoints}
keyboardBehavior="fillParent"
enableDynamicSizing={false}
onChange={handleSheetChanges}
>
<BottomSheetTextInput style={styles.input} />
<BottomSheetView style={styles.contentContainer}>
<Text>Awesome 🎉</Text>
</BottomSheetView>
</BottomSheet>
</GestureHandlerRootView>
);
};
const styles = StyleSheet.create({
container: { flex: 1, padding: 24, backgroundColor: 'grey' },
contentContainer: { flex: 1, alignItems: 'center' },
input: {
marginTop: 8,
marginBottom: 10,
borderRadius: 10,
fontSize: 16,
lineHeight: 20,
padding: 8,
backgroundColor: 'rgba(151, 151, 151, 0.25)',
},
});
export default App;