A cross platform, TypeScript first, pure JS implementation of bottom sheet
MIT License
A cross platform, lightweight, pure JS implementation (no dependencies) of bottom sheets in React Native, written in TypeScript.
height
prop changes, the bottom sheet will change height while open.onOpenStart
and onOpenFinish
.or a beer! πΊ
npm install react-native-sheet
or, if you use Yarn
yarn add react-native-sheet
TypeScript example
Add your ref using a hook and the BottomSheet component with its content. The props reference table is below, and the API of the ref is also below.
import { BottomSheet } from 'react-native-sheet';
// ...
export default function App() {
const bottomSheet = useRef<BottomSheetRef>(null);
return (
<View>
<BottomSheet height={400} ref={bottomSheet}>
<Text>Your bottom sheet content goes here</Text>
</BottomSheet>
<TouchableOpacity onPress={() => bottomSheet.current?.show()}>
<Text>Open bottom sheet</Text>
</TouchableOpacity>
</View>
);
}
JavaScript example
import { BottomSheet } from 'react-native-sheet';
// ...
export default function App() {
const bottomSheet = useRef(null);
return (
<View>
<BottomSheet height={400} ref={bottomSheet}>
<Text>Your bottom sheet content goes here</Text>
</BottomSheet>
<TouchableOpacity onPress={() => bottomSheet.current.show()}>
<Text>Open bottom sheet</Text>
</TouchableOpacity>
</View>
);
}
Prop | Required | Description | Possible Values | Default |
---|---|---|---|---|
children |
Yes | The content to show inside the Bottom Sheet. | React Node | - |
height |
Yes | The height of the bottom sheet once opened. | number | - |
onRequestClose |
No |
Android only, when the user presses the device's back button, this callback will be called. Important: if you do NOT provide this prop, when the user presses the device's back button, the bottom sheet will close. |
undefined OR void function | undefined |
colorScheme |
No | Force the bottom sheet to be a specific colour scheme. 'auto' will use host OS colour scheme (eg light or dark) and automatically change when host OS scheme changes. | 'auto', 'light', 'dark' | 'auto' |
backdropClosesSheet |
No | Whether tapping/clicking on the backdrop behind the bottom sheet will close it. | true/false | true |
backdropBackgroundColor |
No | RGBA or Hex string value for the backdrop color. | RGBA/Hex string | '#25252599' |
sheetBackgroundColor |
No | RGBA or Hex string value for the background color of the bottom sheet. | RGBA/Hex string | Dark: '#222222', Light: '#F3F3F3' |
sheetStyle |
No | Inline JS style override for bottom sheet | Style object | undefined |
draggable |
No | Whether the bottom sheet is draggable. | true/false | true |
showDragIcon |
No | Whether to show the drag icon handle. Only displayed if draggable is set to true as well. |
true/false | true |
dragIconColor |
No | RGBA or Hex string value for the color of the drag icon handle. | RGBA/Hex string | Dark: '#444444', Light: '#A3A3A3' |
dragIconStyle |
No | Inline JS style override for drag icon handle. | Style object | undefined |
contentContainerStyle |
No | Inline JS style override for content container style. | Style object | undefined |
borderRadius |
No | How rounded the corners of the sheet should be. | number | 10 |
openTime |
No | How long the opening animation should take. | number | 300 |
closeTime |
No | How long the closing animation should take. | number | 300 |
onOpenStart |
No | Called when the bottom sheet begins to open. | Void function | undefined |
onOpenFinish |
No | Called when the bottom sheet finishes opening. | Void function | undefined |
onCloseStart |
No | Called when the bottom sheet begins to close. | Void function | undefined |
onCloseFinish |
No | Called when the bottom sheet finishes closing. | Void function | undefined |
Used by calling the functions on the ref, eg bottomSheet.current?.show()
.
Function | Description |
---|---|
.show() |
Opens the bottom sheet. |
.hide() |
Closes the bottom sheet. |
See the example folder for an example app. Simply:
example
folder in a terminal (eg cd example
)yarn install
to install dependenciesyarn start
to open Expo and from there, you can open the example app in iOS, Android and Web.Run yarn test
to run all tests.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
PRs are most welcome, with the requirement that they meet eslint, TypeScript and testing standards.