React Native Navigation Bottom Sheet Extension

A performant customizable bottom sheet component made on top of Wix react-native-navigation library. The component is built using react-native-gesture-handler and react-native-reanimated.

This solution uses showModal under the hood to display the bottom sheet. Default animations and hardware back button press are overridden and properly adjusted for seamless integration with react-native-navigation library.

Features:

  • Smooth interactions & snapping animations
  • Customizable
  • Supports multiple snapping points
  • Seamless integration with react-native-navigation
  • Scrollable content

How to use it:

1. Installation.

# Yarn
$ yarn add react-native-navigation-bottom-sheet react-native-gesture-handler [email protected]

# NPM
$ npm i react-native-navigation-bottom-sheet react-native-gesture-handler [email protected]

2. Import and initialize the component.

import React, { Component } from 'react'
import { Text, View, Button } from 'react-native';
import { RNNBottomSheet } from 'react-native-navigation-bottom-sheet';
RNNBottomSheet.init();

3. Toggle the bottom sheet using the openBottomSheet() method.

export default class App extends Component {
renderContent = () => (
    <View
      style={{
        backgroundColor: 'white',
        height: 350,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 16,
      }}
    >
      <Text>
        In order to close the modal, you can swipe it down, touch the area outside
        it or press the back button.
      </Text>
    </View>
  );
  render() {
    return (
        <View style={{
            flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'whitesmoke',
        }}>
          <Button
            onPress={() =>
              RNNBottomSheet.openBottomSheet({
                renderContent: this.renderContent,
                snapPoints: [0, '20%', '40%', '70%'],
                borderRadius: 16,
                onChange: (index: number) => console.log("Snapped to " + index),
              })
            }
            title="Show modal"
          />
        </View>
    );
  }
}

4. Available component props.

/**
 * Points for snapping of bottom sheet component. 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.
 */
snapPoints: (number | string)[];
/**
 * Initial snap index. Defaults to 0.
 */
initialSnapIndex?: number;
/**
 * Method for rendering scrollable content of bottom sheet.
 */
renderContent?: () => React.ReactNode;
/**
 * Method for rendering non-scrollable header of bottom sheet.
 */
renderHeader?: () => React.ReactNode;
/**
 * Whether the drawer be dismissed when a click is registered outside. Defaults to true.
 */
dismissWhenTouchOutside?: boolean;
/**
 * Defines if bottom sheet content could be scrollable by gesture. Defaults to true.
 */
enabledContentGestureInteraction?: boolean;
/**
 * Opacity of the screen outside the bottm sheet. Defaults to 0.7.
 */
fadeOpacity?: number;
style?: Animated.AnimateStyle<
  Omit<
    ViewStyle,
    | 'flexDirection'
    | 'position'
    | 'top'
    | 'left'
    | 'bottom'
    | 'right'
    | 'opacity'
    | 'transform'
  >
>;
/**
 * Background color of the bottom sheet. Defaults to '#fff'.
 */
backgroundColor?: string;
/**
 * Border radius of the bottom sheet.
 */
borderRadius?: number;
/** 
  * Object consisting of several options defining behavior of animation.
  */
animationConfig?: AnimationConfig;
/**
 * Callback when the sheet position changed.
 * @type (index: number) => void;
 */
onChange?: (index: number) => void;

5. Possible options for AnimationConfig

damping?: number;
mass?: number;
stiffness?: number;
restSpeedThreshold?: number;
restDisplacementThreshold?: number;
toss?: number;
deceleration?: number;
velocityFactor?: number;

6. API methods.

// initialize
RNNBottomSheet.init()

// open
RNNBottomSheet.openBottomSheet(props)

// close
RNNBottomSheet.closeBottomSheet()

// get component name
RNNBottomSheet.getComponentName()

// check if is opended
RNNBottomSheet.isOpened()

Preview:

React Native Navigation Bottom Sheet Extension

Download Details:

Author: CursedWizard

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/CursedWizard/react-native-navigation-bottom-sheet

License: MIT

You Might Be Interested In:

Add Comment