https://github.com/intergalacticspacehighway/react-native-android-bottomsheet
Native android BottomSheet view for React Native
https://github.com/intergalacticspacehighway/react-native-android-bottomsheet
bottomsheet react-native
Last synced: 2 months ago
JSON representation
Native android BottomSheet view for React Native
- Host: GitHub
- URL: https://github.com/intergalacticspacehighway/react-native-android-bottomsheet
- Owner: intergalacticspacehighway
- License: mit
- Created: 2022-09-30T19:16:47.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-03T12:55:09.000Z (about 3 years ago)
- Last Synced: 2025-06-24T00:43:22.159Z (3 months ago)
- Topics: bottomsheet, react-native
- Language: Java
- Homepage:
- Size: 464 KB
- Stars: 28
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Android Bottomsheet
## Why?
This library uses native [BottomsheetDialog](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetDialog). Biggest wins are on [accessibility](https://twitter.com/nishanbende/status/1576071962186899456) without writing any custom code. Styling can also be customised.
## Installation
```
// with npm
npm i react-native-android-bottomsheet
// or with yarn
yarn add react-native-android-bottomsheet
```
## API
### Simple usage
```jsx
import { BottomSheet } from 'react-native-android-bottomsheet';
{
setVisible(false);
}}
>
Hello from bottomsheet
;
```
- BottomSheet has no background by default. So, setting `backgroundColor` on View is important.
### BottomSheet with ScrollView
```jsx
import { ScrollView } from 'react-native';
import { BottomSheet } from 'react-native-android-bottomsheet';
{
setVisible(false);
}}
>
;
```
- For drag-to-close/expand gesture to work, make sure to add `nestedScrollEnabled` to the ScrollView
### BottomSheet with ScrollView and pull to refresh
```jsx
import { ScrollView, RefreshControl } from 'react-native';
import { BottomSheet } from 'react-native-android-bottomsheet';
{
setVisible(false);
}}
>
{
setRefreshing(true);
setTimeout(() => {
setRefreshing(false);
}, 2000);
}}
refreshing={refreshing}
/>
}
>
;
```
## Props
```ts
type AndroidBottomsheetProps = {
// To show/hide bottomsheet
'visible': boolean;
// gets called when bottomsheet is dismissed. Use this to reset visible state
'onDismiss'?: () => void;
// Collapsed bottomsheet height
'peekHeight'?: number;
// Expanded bottomsheet height. Defaults to window height.
'maxHeight'?: number;
// Gets announced when bottomsheet is opened with TalkBack enabled
'aria-label'?: string;
// To set backdrop dim ammount. Accepts value 0 to 1. 0 would make the backdrop transparent.
'backdropDimAmount'?: number;
// Determines whether bottomsheet can be cancelled by swiping or back button
'cancelable'?: boolean;
};
```
## To run examples
- Clone the repo
- Go to example/
- yarn && yarn android
## Todo
- Fabric support
- Customisable entry/exit transition
- Backdrop color
- Ability to remove Backdrop