react-native-rana-bottomsheet

Cross platform scrollable bottom sheet for both Android and iOS. That integrates with all core scrollable components from React Native.

• Light weight component
• Customize whatever you like
• Smooth animation
• Support drag down gesture

Installation

Open a Terminal in the project root and run:

yarn add react-native-rana-bottomsheet

or if you use npm:

npm install react-native-rana-bottomsheet

Install and link react-native-gesture-handler and react-native-reanimated.

Usage

import { Dimensions, Platform } from 'react-native'
import BottomSheet from 'react-native-rana-bottomsheet';
const refBottom = React.useRef();
const HEIGHT = Dimensions.get('screen').height;
const snapPoints = [50, HEIGHT / 2, '70%', '100%'];

class Example extends React.Component {
  render() {
    return (
      <View style={{flex: 1}}>
      <BottomSheet
       ref={refBottom}
          borderRadius={10}
          bottomSheerColor="#FFFFFF"
          ref="BottomSheet"
          snapPoints={snapPoints}
          enabledGestureInteraction={true}
          enabledContentGestureInteraction={true}
          enabledContentTapInteraction={true}
          enabledInnerScrolling={true}
          renderHeader={
            <View>
              <Text style={styles.text}>Header View</Text>
            </View>
          }
          renderContent={
            <View style={styles.body}>
              <Text style={styles.text}>Body View</Text>
            </View>
          }
        />
      </View>
    );
  }
}

Props

name	required	default	description
snapPoints	yes		E.g. [100, 300, 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.
renderContent	no		Method for rendering scrollable content of bottom sheet.
renderHeader	no		Method for rendering scrollable header of bottom sheet.
headerPosition	no	number	Reanimated node which holds position of bottom sheet's header (in dp)
contentPosition	no	number	Reanimated node which holds position of bottom sheet;s content (in dp).
onOpenStart	no	() => null	Function to execute when the panel is opened
onCloseStart	no	() => null	Function to execute when the panel is closed
enabledGestureInteraction	no	false	Defines if bottom sheet could be scrollable by gesture. Defaults to true.

Contributors ✨

Thanks goes to these wonderful people:

Numan 🚇 💻