React Native Bottom Sheet With 60 FPS Animations

Author:nomi9995
Views Total:14 views
Official Page:Go to website
Publish Date:July 21, 2020
License:MIT

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

You Might Be Interested In:

Leave a Reply