BottomSheet

The BottomSheet component that provides an animated modal-like interface sliding up from the bottom of the screen, with gesture support and theming integration.

Usage

import { Text, Button } from 'react-native';
import React, { useState } from 'react';
import { BottomSheet } from 'react-native-video-toolkit';

export const BottomSheetExample = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onPress={() => setVisible(!visible)} title="Open Bottom Sheet" />
      <BottomSheet visible={visible} onClose={() => setVisible(false)}>
        <Text onPress={() => setVisible(false)} style={{ color: 'white' }}>
          Close Bottom Sheet
        </Text>
      </BottomSheet>
    </>
  );
};

export default BottomSheetExample;

Props

Prop	Type	Required	Default	Description
`visible`	`boolean`	Yes	–	Controls the visibility of the bottom sheet.
`onClose`	`() => void`	No	–	Callback fired when sheet is dismissed (swipe or tap).
`children`	`ReactNode`	Yes	–	Content to render inside the sheet.
`showHandle`	`boolean`	No	`true`	Shows a drag handle for better UX with scrollable content.

Examples

Simple Bottom Sheet

import { BottomSheet } from 'react-native-video-toolkit';
import { Text } from 'react-native';
import { useState } from 'react';

function SimpleBottomSheet() {
  const [open, setOpen] = useState(false);
  return (
    <BottomSheet visible={open} onClose={() => setOpen(false)}>
      <Text style={{ color: 'white' }}>Hello from the sheet!</Text>
    </BottomSheet>
  );
}

With Custom Handle

import { BottomSheet } from 'react-native-video-toolkit';
import { View, Text } from 'react-native';
import { useState } from 'react';

function CustomHandleBottomSheet() {
  const [open, setOpen] = useState(false);
  return (
    <BottomSheet visible={open} onClose={() => setOpen(false)} showHandle={true}>
      <View style={{ padding: 20 }}>
        <Text>Settings</Text>
      </View>
    </BottomSheet>
  );
}

If you pass scrollable content (e.g. FlatList, ScrollView), keep showHandle={true} for a better gesture experience.

Uses withTiming for smooth open/close animations.
Dismissal threshold is based on drag distance (>⅓ of sheet) or velocity (>600).