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: Full accessibility support for picker interactions
  • TypeScript Support: Complete type safety with comprehensive type definitions
  • Performance Optimized: Efficient rendering with FlatList and optimized animations

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​