Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/numandev1/react-native-bottomsheet-reanimated
React Native bottom sheet with fully native 60 FPS animations and awesome user experience
https://github.com/numandev1/react-native-bottomsheet-reanimated
bottom-sheet bottomsheet expo mobile modal react-native reanimated sheet
Last synced: 5 days ago
JSON representation
React Native bottom sheet with fully native 60 FPS animations and awesome user experience
- Host: GitHub
- URL: https://github.com/numandev1/react-native-bottomsheet-reanimated
- Owner: numandev1
- License: mit
- Created: 2020-07-11T11:21:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-02T19:46:24.000Z (over 2 years ago)
- Last Synced: 2024-10-24T21:38:35.008Z (3 months ago)
- Topics: bottom-sheet, bottomsheet, expo, mobile, modal, react-native, reanimated, sheet
- Language: TypeScript
- Homepage:
- Size: 5.16 MB
- Stars: 276
- Watchers: 7
- Forks: 28
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
### Would you like to support me?
---
| :warning: IMPORTANT: This Library has been deprecated in favor of [react-native-bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) because this Library is using Reanimated V1 |
| --- |
# react-native-bottomsheet-reanimated
Highly configurable component imitating [native bottom sheet behavior](https://material.io/design/components/sheets-bottom.html#standard-bottom-sheet), with fully native 60 FPS animations!
Built from scratch with [react-native-interactable-reanimated](https://www.npmjs.com/package/react-native-interactable-reanimated) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).
Usable with Expo with no extra native dependencies!
|  |  |  |
| :--------------------: | :--------------------: | :--------------------: |
## Installation
Open a Terminal in the project root and run:
```sh
yarn add react-native-bottomsheet-reanimated react-native-interactable-reanimated
```
or if you use `npm`:
```sh
npm install react-native-bottomsheet-reanimated
```
If you are using Expo, you are done.
If you don't use Expo, install and link [react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).
## Usage
```javascript
import BottomSheet from 'react-native-bottomsheet-reanimated';
class Example extends React.Component {
render() {
return (
Header
}
body={
Body
}
/>
);
}
}
```
## Props
| name | required | default | description |
| ---------------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| keyboardAware | no | `false` | `true` will avoid current snap when keyboard will open. |
| overDrag | no | `true` | `false` will disable overdrag of last snap, `false` will also disable `bounce' and `isModal`. |
| keyboardAwareExtraSnapHeight | no | 0 | when `keyboardAware=true` and this is for adding extra space in snap when keyboard open |
| keyboardAwareDrag | no | `false` | when `keyboardAware=true` and this is used for enable or disable drag when keyboard open |
| onChangeKeyboardAwareSnap | no | | when `keyboardAware=true` then it give keyboard awareview snap. ` onChangeKeyboardAwareSnap: (previousSnap: number,nextSnap: number,keyboardHeight: number) => void;` |
| snapPoints | yes | | E.g. `[300, 200, 0]`. Points for snapping of bottom sheet coomponent. They define distance from bottom of the screen. Might be number or percent (as string e.g. `'20%'`) for points or percents of screen height from bottom. Note: Array values must be in descending order. |
| initialPosition | no | 0 | Determines initial position point of bottom sheet. The value outside of snap points. |
| body | no | | Method for rendering scrollable content of bottom sheet. |
| header | no | | Method for rendering non-scrollable header of bottom sheet. |
| isBackDrop | no | `false` | for show backdrop behind the bottom sheet. |
| isBackDropDismissByPress | no | `false` | enable to move bottomsheet to first snappoint by pressing backdrop. |
| isRoundBorderWithTipHeader | no | `false` | give round with tip header style to bottomsheet. |
| isModal | no | `false` | to make bottom sheet like modal. |
| bounce | no | 0.5 | for increase or decrease bounce effect |
| isAnimatedYFromParent | no | | If `true` then give animated value to `animatedValueY` props. |
| animatedValueY | no | | If isAnimatedYFromParent will be `true` then it will give animtedY value to `animatedValueY` props. |
| bottomSheerColor | no | `#ffffff` | for background color of bottom sheet. |
| tipStyle | no | | for change style of tip. it is dependted on `isRoundBorderWithTipHeader`. |
| headerStyle | no | | for change style of header. |
| bodyStyle | no | | for change style of body. |
| dragEnabled | no | true | for enable/disable drag |
| tipHeaderRadius | no | 12 | for tip header border radius |
| onClose | no | | Method call when bottomsheet close |
| containerStyle | no | | for change style of container |
| bodyContainerStyle | no | | for change style of body container |
| onChangeSnap | no | | Method call when change any snap |
## Methods
### `snapTo(index)`
Imperative method on for snapping to snap point in given index. E.g.
```javascript
// Snap to the snap point at index 0 (e.g. 450 in [450, 300, 0])
this.refs.BottomSheet.current.snapTo(0);
```
Here `this.refs.BottomSheet` refers [to the `ref`](https://reactjs.org/docs/react-api.html#reactcreateref) passed to the `BottomSheet` component.
## Example
More complex examples can be found in the `Example` folder. To view the examples in the [Expo app](https://expo.io/), open a Terminal and run:
```sh
yarn
cd Example
yarn
expo start
```
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
