# react-native-bottomsheet-reanimated
> react-native-bottomsheet-reanimated made with reanimted and interactable
Latest version **0.3.1** (published 2022-09-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-bottomsheet-reanimated
pnpm add react-native-bottomsheet-reanimated
yarn add react-native-bottomsheet-reanimated
bun add react-native-bottomsheet-reanimated
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.1 |
| Published | 2022-09-29 |
| First published | 2020-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 116.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 274 |
| Author | Muhammad Numan |
| Maintainers | nomi9995 |
| Keywords | react-native, bottom-sheet, reanimated, gesture, handler, react-native-bottomsheet-reanimated |
## Links
- npm: https://www.npmjs.com/package/react-native-bottomsheet-reanimated
- Repository: https://github.com/numandev1/react-native-bottomsheet-reanimated
- Homepage: https://github.com/numandev1/react-native-bottomsheet-reanimated#readme
- Issues: https://github.com/numandev1/react-native-bottomsheet-reanimated/issues
- npm.io page: https://npm.io/package/react-native-bottomsheet-reanimated
## Alternatives
- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
## Recent versions
- 0.3.1 (latest) — 2022-09-29
- 0.2.0 — 2021-12-21
- 0.1.1 — 2021-11-22
- 0.1.0 — 2021-11-18
- 0.0.44 — 2021-08-27
- 0.0.43 — 2021-08-23
- 0.0.42 — 2021-08-23
- 0.0.41 — 2021-08-04
- 0.0.40 — 2021-08-04
- 0.0.39 — 2021-04-22
- 0.0.38 — 2021-04-22
- 0.0.37 — 2021-04-22
- 0.0.36 — 2021-04-21
- 0.0.35 — 2021-04-20
- 0.0.34 — 2021-04-01
- … 33 more at https://npm.io/package/react-native-bottomsheet-reanimated/versions
## 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)):
---
_Source: https://npm.io/package/react-native-bottomsheet-reanimated · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
