React Native Scrollable Bottom Sheet

A simple bottom sheet popup modal that supports scrollable content for React Native. Fully supports Expo. Uses react-native-reanimated and react-native-gesture-handler.

Features

• Supports scrollable content!
• Lightweight
• Fully customizable
• Fluid and native scrolling
• Smooth swipe to dismiss and swipe to scroll
• Tap background to dismiss
• Auto adjusts size based on content within sheet
• Immediate interactivity with background elements when dismissed

Installation

npm install react-native-scrollable-bottom-sheet

Example

import * as React from 'react';

import { StyleSheet, View, Text, Button, type TextStyle } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet from 'react-native-scrollable-bottom-sheet';

// Do not forget to wrap your app in GestureHandlerRootView
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1, backgroundColor: 'white' }}>
      <ExampleBottomSheet />
    </GestureHandlerRootView>
  );
}

const ExampleBottomSheet = () => {
  const [visible, setVisible] = React.useState<boolean>(false);

  const onVisibilityChange = (visible: boolean) => {
    setVisible(visible);
  };
  return (
    <View style={styles.container}>
      <Button
        title="Open Bottom Sheet"
        onPress={() => {
          setVisible(true);
        }}
      />
      <BottomSheet onVisibilityChange={onVisibilityChange} visible={visible}>
        <Text style={headerTextStyle}>Bottom Sheet</Text>
        <Text style={headerTextStyle}>
          Your content here! It will automatically scroll when it overflows!
        </Text>
        <View style={{ height: 20 }} />
        <Button
          title="Close Sheet"
          onPress={() => {
            setVisible(false);
          }}
        />
        <View style={{ height: 20 }} />
      </BottomSheet>
    </View>
  );
};

const headerTextStyle: TextStyle = {
  textAlign: 'center',
  fontSize: 24,
  fontWeight: 'bold',
  padding: 20,
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Full Example

There is a full example located in ./example/src/App.tsx, also showing off more customization and props.

To run it, clone this repository. Run npm install in the root folder. Within the example folder, run npm install and npx expo start and connect with Expo.

Documentation

The prop interface is documented in src/index.tsx for the interface BottomSheetProps. Also below.

Props

| Prop | Type | Default | Description | | ------------------------------ | ------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------- | | visible | boolean (required) | | Indicates whether the bottom sheet is currently visible or not. | | onVisibilityChange | function (required) | | A callback function invoked when the visibility of the bottom sheet changes. | | fullScreenPaddingTop | any | 0 | Additional padding from the top of the total height when in fully expanded. Defaults to 0. | | children | any | | The content to be displayed inside the bottom sheet. | | swipeDownThreshold | number | 50 | The threshold (in pixels) that triggers the swipe down gesture to close the bottom sheet. Defaults to 50. | | showScrollbar | boolean | false | Show the scrollbar or not. Defaults to false. | | animateBackdropOpacityWithDrag | boolean | false | Animate the opacity of the backdrop while dragging down the sheet. Defaults to false. | | interactiveMaxHeight | number | Dimensions.get('window').height | The interactive height area of the sheet. Recommended to keep this undefined. | | hideHandle | boolean | false | Hide the handle for the bottom sheet container. | | handleStyles | any | | Styles for the handle element. | | hideSheetBackgroundContainer | boolean | false | Hide the background and container for the entire bottom sheet. This also hides the handle. | | sheetBackgroundContainerStyles | any | | Styles for the container of the bottom sheet. | | customSheetMass | number | 0.4 | The mass used for the closing/opening animation of the sheet | | customSheetDamping | number | 100 | The damping used for the closing/opening animation of the sheet | | useEnteringAndExitingAnimations | boolean | false | Use reanimated entering and exiting animations instead of legacy animated values. This can introduce errors with Tab.Navigator and unmounting if enabled, but disables lazy loading