Skip to main content

PickerSheet

Bottom sheet modal container component built on @gorhom/bottom-sheet with automatic backdrop, safe area handling, and theme integration. Provides a native-like modal experience for picker interfaces.

Quick Example​

import { PickerSheet, WheelPicker } from "@ovok/native";
import { BottomSheetModal } from "@gorhom/bottom-sheet";
import React from "react";
import { StyleSheet, View } from "react-native";
import { Button, Text } from "react-native-paper";

const PickerSheetExample = () => {
  const bottomSheetRef = React.useRef<BottomSheetModal>(null);
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  const options = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];

  const handleOpenPress = () => {
    bottomSheetRef.current?.present();
  };

  return (
    <View style={styles.container}>
      <Button mode="contained" onPress={handleOpenPress}>
        Open Picker
      </Button>

      <PickerSheet ref={bottomSheetRef}>
        <Text variant="titleMedium" style={styles.title}>
          Select an Option
        </Text>
        <WheelPicker
          selectedIndex={selectedIndex}
          options={options}
          onChange={setSelectedIndex}
          itemHeight={50}
        />
      </PickerSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    textAlign: "center",
    marginBottom: 20,
  },
});

export default PickerSheetExample;

Props​

PropTypeRequiredDefaultDescription
childrenReact.ReactNode✓-Content to render inside the bottom sheet view

Component is wrapped with React.forwardRef<BottomSheetModal, PickerSheetProps> and accepts all BottomSheetModal ref methods

Component Behavior​

The PickerSheet component:

  1. Bottom Sheet Integration: Uses BottomSheetModal from @gorhom/bottom-sheet for native-like modal behavior
  2. Dynamic Sizing: Automatically adjusts height based on content with enableDynamicSizing
  3. Backdrop Handling: Includes automatic backdrop with appear/disappear animations
  4. Safe Area Support: Automatically handles safe area insets for proper bottom spacing
  5. Theme Integration: Uses theme colors for background and spacing

Bottom Sheet Configuration​

// Internal configuration
<BottomSheetModal
  ref={ref}
  enableDynamicSizing
  backdropComponent={renderBackdrop}
  backgroundStyle={{
    backgroundColor: theme.colors.surface,
  }}
>
  <BottomSheetView
    style={{
      padding: theme.spacing(3),
      paddingBottom: bottomInset + theme.spacing(4),
    }}
  >
    {children}
  </BottomSheetView>
</BottomSheetModal>

Backdrop Configuration​

// Automatic backdrop with smooth transitions
const renderBackdrop = (backdropProps: BottomSheetBackdropProps) => (
  <BottomSheetBackdrop
    {...backdropProps}
    appearsOnIndex={0}
    disappearsOnIndex={-1}
  />
);

Styling​

Theme Colors Used​

  • theme.colors.surface - Background color for the bottom sheet
  • theme.spacing(3) - Content padding (12px by default)
  • theme.spacing(4) - Additional bottom padding (16px by default)
  • WheelPicker - Main wheel picker component for use inside PickerSheet

External Dependencies​