React Native Bottom Sheet With 60 FPS Animations

A highly configurable bottom action sheet component with fully native 60 FPS animations and awesome user experience.

Install & Import:

# NPM
$ npm i react-native-bottomsheet-reanimated --save
import BottomSheet from "react-native-bottomsheet-reanimated";

Basic Usage:

class Example extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <BottomSheet
          bottomSheerColor="#fafafa"
          ref="BottomSheet"
          initialPosition={"50%"}  //200, 300
          snapPoints={["50%","100%"]}
          isBackDrop={true}
          isBackDropDismisByPress={true}
          isRoundBorderWithTipHeader={true}
          header={
            <View>
              <Text style={styles.text}>Title</Text>
            </View>
          }
          body={
            <View style={styles.body}>
              <Text style={styles.text}>Body</Text>
            </View>
          }
        />
    </View>)
  }
}

Preview:

React Native Bottom Sheet With 60 FPS Animations

Download Details:

Author: nomi9995

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/nomi9995/react-native-bottomsheet-reanimated

License: MIT

You Might Be Interested In:

Add Comment