# react-native-bottom-modal-scrollable
> Animated Modal component for React Native, A modal that can be extended using the finger and once the maximum height is reached the content will then start scrolling itself without having to release the finger. Compatible with Android & iOS.
Latest version **0.7.2** (published 2022-07-13) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-bottom-modal-scrollable
pnpm add react-native-bottom-modal-scrollable
yarn add react-native-bottom-modal-scrollable
bun add react-native-bottom-modal-scrollable
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.7.2 |
| Published | 2022-07-13 |
| First published | 2022-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 274.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Roman Cirier |
| Maintainers | romancirier |
| Keywords | react-native, modal, animated, scrollable, smooth, react, native, flatlist, scrollview, scroll, scrolling, snap, android, ios, snapping, component |
## Links
- npm: https://www.npmjs.com/package/react-native-bottom-modal-scrollable
- Repository: https://github.com/Nazort/react-native-bottom-modal-scrollable
- Homepage: https://github.com/Nazort/react-native-bottom-modal-scrollable#readme
- Issues: https://github.com/Nazort/react-native-bottom-modal-scrollable/issues
- npm.io page: https://npm.io/package/react-native-bottom-modal-scrollable
## Dependencies (4)
- [use-debounce](https://npm.io/package/use-debounce.md) ^8.0.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.0.1
- [react-native-reanimated](https://npm.io/package/react-native-reanimated.md) ^2.4.1
- [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) 2.4.2
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.7.2 (latest) — 2022-07-13
## README
# Bottom Modal Scrollable
A Bottom Modal component for React Native that can be dragged to the maximum height and without releasing the finger off the screen scroll its content to provide a smooth user experience. Fully customizable and compatible with Android & iOS. Built using react-native-reanimated 2.
Pull requests and feedbacks are welcome!
## Overview
## Installation
This package requires react-native-reanimated 2 and react-native-gesture-handler to work.
- [Reanimated Installation](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)
- [Gesture handler Installation](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)
Don't forget to wrap your app with `` as described in the doc
Then :
```
yarn add react-native-bottom-modal-scrollable
```
or using npm
```
npm install react-native-bottom-modal-scrollable
```
## Quick start
```js
import { BottomModalScrollable, BottomModalScrollableRef } from 'react-native-bottom-modal-scrollable';
...
const modalRef = useRef(null);
...
useEffect(() => {
modalRef.current?.open();
}, [])
return (
Hello
}
/>
);
```
## Props
| Prop | Default | Type | Description |
| ----------------------------- | ------------------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | | ReactNode | Content to render inside the modal |
| footer | | [AbsoluteFooter](src/types.ts) | Element to render in absolute position over the modal at the bottom of the screen |
| backgroundColor | #fff | string | Background color of the modal |
| defaultModalHeight | 50% of the window height | number | Default height of the modal when opened |
| maxModalHeight | 90% of the window height | number | Maximum height the modal can reach |
| contentStaticHeight | | number | Only use this prop to set a static height for the content of the modal, if not provided the height will be calculated according to the children height (dynamically) |
| onClose | | () => void | Callback called when the modal has been closed |
| containerStyle | | ViewStyle | Style of the container |
| dragIndicator | true | boolean | Show or not the dragging indicator at the top of the modal content |
| screenHeight | Dimension window height | number | Use this props to overide the size in which the modal should work, useful if the modal should start after some elements which are at the bottom of the screen |
| disableBackgroundOpacity | false | boolean | Disable the opacity applied on the background |
| disableCloseOnBackgroundPress | false | boolean | If true then it will not close the modal when background is pressed |
| disableSnapToBottom | false | boolean | If true the modal will not close when the user drag it down, instead it will snap to the `defaultModalHeight` |
| backgroundClickable | false | boolean | If true the background will be pressable, usually this prop should be used with `disableCloseOnBackgroundPress` & `disableBackgroundOpacity` |
| onEndReached | | () => void | Function called when the end of the content is reached |
| onEndReachedThreshold | 100 | number | How far from the end in pixel the bottom edge of the content must be from the end of the content to trigger the `onEndReached` callback |
## Example
Running the [example](example/App.tsx) app:
```
cd example && yarn
```
Starting the server:
```
yarn start
```
Running the app on iOS:
```
yarn ios
```
Running the app on Android:
```
yarn android
```
## Known issues
As the content is displayed inside a custom scroll view it is not possible to use flex, which shouldn't be necessary as demonstrate in the example app.
## License
MIT
---
_Source: https://npm.io/package/react-native-bottom-modal-scrollable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._