@vuduc0801/react-native-bottom-sheet

Imperative BottomSheetProvider / useBottomSheet() wrapper around @gorhom/bottom-sheet v5.

Installation

@gorhom/bottom-sheet, react-native-reanimated and react-native-gesture-handler are peer dependencies (so your app controls their versions):

npm install @vuduc0801/react-native-bottom-sheet @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler

Wrap your app (inside GestureHandlerRootView):

import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { BottomSheetProvider } from '@vuduc0801/react-native-bottom-sheet'

<GestureHandlerRootView style={{ flex: 1 }}>
  <BottomSheetProvider>{children}</BottomSheetProvider>
</GestureHandlerRootView>

API

useBottomSheet() returns:

| Method | Description | | --- | --- | | expand(options) | Presents the sheet. options = { children } & BottomSheetProps from @gorhom (e.g. snapPoints, enableDynamicSizing, onDismiss, backgroundStyle…). enableDynamicSizing defaults to true. | | collapse() | Dismisses the sheet. | | context.open({ name, inputProps, options? }) | Presents a component registered via <BottomSheetProvider components={{ name: <Comp /> }}>, cloned with inputProps. |

Changelog

• 3.0.0 – @gorhom/bottom-sheet (>=5), react-native-reanimated (>=3.16) and react-native-gesture-handler (>=2.16.1) moved to peer dependencies; removed unused react-native-safe-area-context dependency; all BottomSheetProps passed to expand() are forwarded to the sheet; context value is memoized; build runs automatically on npm pack/publish.
• 2.0.0 – @gorhom/bottom-sheet v5, React 19.

Bottom Sheet Usage Documentation

This document explains how the bottom sheet is integrated and utilized within the Select component in the project. It covers configuration, expansion, and item selection logic.

Table of Contents

• Introduction
• Component Overview
• Bottom Sheet Integration
• Item Selection Flow
• Conclusion

Introduction

The bottom sheet is a UI element that slides up from the bottom of the screen to display additional content. In the Select component, it is used to show a list of selectable items when the user interacts with the component.

Component Overview

The Select component is responsible for:

• Displaying a label and current selection (or placeholder text).
• Launching the bottom sheet when the user taps on the component.
• Rendering a list of items in the bottom sheet.
• Handling item selection and collapsing the bottom sheet once an option is chosen.

Bottom Sheet Integration

Inside the Select component, the useBottomSheet hook is imported from @vuduc0801/react-native-bottom-sheet and used for controlling the bottom sheet behavior.

Expanding the Bottom Sheet

When the TouchableOpacity is pressed, the handleOpen function is invoked. This function expands the bottom sheet with dynamic sizing enabled and renders the bottom sheet content:

bottomSheet.expand({
  enableDynamicSizing: true,
  children: (
    <YStack style={[a.gap_3, { paddingBottom: insets.bottom }]}>
      <View style={[a.px_4]}>
        <Text style={[a.text_lg, a.font_semibold]}>{label}</Text>
      </View>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <SelectItem
            key={item.value}
            item={item}
            selected={item.value === selectedValue?.value}
            onSelect={handleSelectItem}
          />
        )}
        showsVerticalScrollIndicator={false}
      />
    </YStack>
  ),
});