React-native-simple-sheet NPM

react-native-simple-sheet

Simple & Customizable Bottom Sheet for React Native. This library is suitable for one-time action.

Preview

simple sheet

Features

Gesture control
Style customizable
Keyboard Avoiding Sheet

Installation

This library needs react-native-reanimated and react-native-gesture-handler.

Yarn

yarn add react-native-reanimated react-native-gesture-handler react-native-simple-sheet

Expo

npx expo install react-native-reanimated react-native-gesture-handler react-native-simple-sheet

Must be

Wrap your App with GestureHandlerRootView
Wrap your App with SimpleSheetProvider

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SimpleSheetProvider>
        <MyScreen />
      </SimpleSheetProvider>
    </GestureHandlerRootView>
  );
}

Usage

Basic

export default function MyScreen() {
  const sheet = useSimpleSheet();

  return (
    <Button
      title="Open Sheet"
      onPress={() =>
        sheet.open((props) => (
          <SimpleSheet {...props}>
            <View>...</View>
          </SimpleSheet>
        ))
      }
    />
  );
}

Async action

type Result = 'CONFIRM' | 'CANCEL' | 'DISMISS';

export default function MyScreen() {
  const sheet = useSimpleSheet();

  const openSelectSheet = (): Promise<Result> => {
    return await Promise<Result>(resolve => {
      sheet.open(props => (
        <MySheet
          {...props}
          onDismiss={() => props.close(() => resolve('DISMISS'))}
          onConfirm={() => props.close(() => resolve('CONFIRM'))}
          onCancel={() => {
            // Same with props.close(() => resolve('CANCEL'))
            props.close();
            resolve('CANCEL');
          }}
        />
      ));
    });
  }

  return (
    <Button
      title="Open Sheet"
      onPress={async () => {
        const result = await openSelectSheet();
        console.log(result); // CONFIRM | CANCEL | DISMISS
      }}
    />
  );
}

Parameters

name	type	required	description	default
visible	boolean	O	determines whether the bottom sheet is visible. The animation operates based on the visible value.	-
close	function	O	triggers the animation to close the bottom sheet.	-
unmount	function	O	unmounts the bottom sheet from the root. It is typically called after the close animation finished.	-
onDismiss	function	X	called when the sheet is dismissed via a gesture or a scrim touch.	-
dismissible	boolean	X	dismiss when scrim tapped	true
gestureEnable	boolean	X	determines whether the sheet will be animate when swipe gesture.	true
avoidKeyboard	boolean	X	determines whether the bottom sheet will also move up when the keyboard is shown.	true
sheetColor	string	X	color of bottom sheet.	#FFFFFF
borderTopLeftRadius	number	X	-	12
borderTopRightRadius	number	X	-	12
maxHeight	number	X	max height of sheet	screen height * 0.8
scrimColor	string	X	color of scrim (backdrop)	#11111188