Skip to main content

PickerSheet

The PickerSheet module provides a comprehensive solution for creating bottom sheet-based picker interfaces with smooth wheel picker components. Built on top of @gorhom/bottom-sheet and react-native-reanimated for optimal performance and fluid animations.

Overview​

The PickerSheet system combines the convenience of bottom sheet modals with the smooth, iOS-style wheel picker interactions. Perfect for date selection, option picking, and any scenario requiring user selection from a list of items.

Key Features​

  • Bottom Sheet Integration: Built on @gorhom/bottom-sheet for native-like modal experiences
  • Smooth Wheel Picker: iOS-style wheel picker with smooth scrolling and visual feedback
  • Animated Interactions: Uses react-native-reanimated for 60fps animations
  • Safe Area Support: Automatic safe area handling with react-native-safe-area-context
  • Theme Integration: Built-in support for theme colors and spacing
  • Accessibility: The primitives forward the props they expose, but do not add a complete accessibility model. Add labels, roles, and announcements in the host app.
  • TypeScript Support: Complete type safety with comprehensive type definitions
  • Performance Optimized: Efficient rendering with FlatList and optimized animations

PickerSheet accepts its content through children; it does not expose a general accessibility or container-props bag. WheelPicker exposes containerProps for its outer View, while labels, roles, and announcements for the sheet remain host-owned.

Architecture​

The PickerSheet system consists of:

Core Components​

  • PickerSheet - Main bottom sheet container with backdrop and safe area handling
  • WheelPicker - Animated wheel picker with smooth scrolling and visual feedback

External Dependencies​

Provider requirement​

Mount BottomSheetModalProvider directly from @gorhom/bottom-sheet inside GestureHandlerRootView before rendering PickerSheet. Without that provider, the modal cannot present correctly.