react-native-simple-sheet

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

Preview

Features

• Gesture
• 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

Usage

• Make sure to wrap with GestureHandlerRootView
• Make sure pass the ref to controll

import { SimpleSheet, useSimpleSheet } from 'react-native-simple-sheet';

export default function App() {
    return (
        <GestureHandlerRootView style={styles.root}>
            <MyScreen />
        </GestureHandlerRootView>
    );
}

...

export default function MyScreen() {
    const [ref, show, hide] = useSimpleSheet();
    // or name what you want.
    // const [mySheetRef, showMySheet, hideMySheet] = useSimpleSheet();

    return (
        <SimpleSheet ref={ref}>
            <View style={styles.sheet}>
                <Text style={styles.title}>I am Simple Sheet</Text>
                <Text style={styles.message}>Set components you want.</Text>
                <Button
                    title='Close sheet'
                    onPress={hide}
                />
            </View>
        </SimpleSheet>
    );
}

Parameters

name	type	required	description	default
ref	React.Ref	O	sheet controller	-
sheetColor	string	X	color of bottom sheet.	#FFFFFF
scrimColor	string	X	color of scrim (backdrop)	#11111188
borderTopLeftRadius	number	X	-	12
borderTopRightRadius	number	X	-	12
maxHeight	number	X	max height of sheet	screen height * 0.8
dismissible	boolean	X	dismiss when scrim tapped	true
avoidKeyboard	boolean	X	determines whether the bottom sheet will also move up when the keyboard is shown.	false
gestureEnable	boolean	X	determines whether the sheet will be animate when swipe gesture.	true
onShow	function	X	will be called once the modal has been shown.	-
onDismiss	function	X	will be called once the modal has been dismissed.	-

Known Issue

The Keyboard Avoiding feature does not work as smoothly as expected on Android.

• This issue is related to an issue with reanimated. For more details, please refer this PR.
• When setting the avoidKeyboard property to true on Android, the top status bar will visible.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library