Component

BottomSheet

Local modal bottom sheet with overlay, gestures, and configurable heights.

React Native

Bottom sheet

Open a focused panel from the bottom of the screen for contextual tasks.

Payment method

Change card, wallet, or bank account.

import { useState } from 'react';
import { View } from 'react-native';
import { BottomSheet, Button, Text, useTheme } from '@sohantalukder/rn-kit';

export function FilterSheetExample() {
  const [visible, setVisible] = useState(false);
  const { gutters } = useTheme();

  return (
    <>
      <Button text="Open filters" onPress={() => setVisible(true)} />
      <BottomSheet
        visible={visible}
        onRequestClose={() => setVisible(false)}
        maxHeight={420}
        enableSwipeToClose
      >
        <View style={[gutters.gap_12, gutters.padding_16]}>
          <Text variant="heading3" weight="semibold">Filters</Text>
          <Text color="secondary">Choose the options for this list.</Text>
          <Button text="Apply" onPress={() => setVisible(false)} />
        </View>
      </BottomSheet>
    </>
  );
}

Live component

defaultcustom contentno swipe close

Use for contextual tasks, not full navigation.
Keep destructive actions visually separated.

Usage

import { BottomSheet } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { View } from 'react-native';
import { BottomSheet, Button, Text, useTheme } from '@sohantalukder/rn-kit';

export function FilterSheetExample() {
  const [visible, setVisible] = useState(false);
  const { gutters } = useTheme();

  return (
    <>
      <Button text="Open filters" onPress={() => setVisible(true)} />
      <BottomSheet
        visible={visible}
        onRequestClose={() => setVisible(false)}
        maxHeight={420}
        enableSwipeToClose
      >
        <View style={[gutters.gap_12, gutters.padding_16]}>
          <Text variant="heading3" weight="semibold">Filters</Text>
          <Text color="secondary">Choose the options for this list.</Text>
          <Button text="Apply" onPress={() => setVisible(false)} />
        </View>
      </BottomSheet>
    </>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

visiblebooleanfalseControls whether the overlay or modal is mounted and shown.

onRequestClose() => void-Required close handler for modal and overlay dismissal.

childrenReactNode-Content rendered inside the component surface.

maxHeightnumber | string-Maximum height the sheet can occupy before scrolling.

enableSwipeToClosebooleantrueAllows the sheet to dismiss through a swipe gesture.

Theme

BottomSheet reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
custom content
no swipe close

Best Practices

Use for contextual tasks, not full navigation.
Keep destructive actions visually separated.