Highly configurable component imitating native bottom sheet behavior, with fully native 60 FPS animations!
Built from scratch with react-native-gesture-handler and react-native-reanimated.
Usable with Expo with no extra native dependencies!
 |
 |
 |
 |
|---|
Installation
Open a Terminal in the project root and run:
yarn add reanimated-bottom-sheet
Or if you use npm:
npm install reanimated-bottom-sheet
Now we need to install react-native-gesture-handler and react-native-reanimated.
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
expo install react-native-gesture-handler react-native-reanimated
If you are not using Expo, run the following:
yarn add react-native-reanimated react-native-gesture-handler
Or if you use npm:
npm install react-native-reanimated react-native-gesture-handler
We're done! Now you can build and run the app on your device/simulator.
Usage
"import * as React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
export default function App() {
const renderContent = () => (
Swipe down to close
);
const sheetRef = React.useRef(null);
return (
<>