react-native-scrollable-bottom-sheet v0.2.1

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