hieucoi96 / react-native-simple-bottom-sheet

A simple react native bottom sheet component

react-native-simple-bottom-sheet

A simple react native bottom sheet component

Example 1	Example 2	Example 3

Table of Contents

• Installation
• Usage
• Props
• Methods

Installation

npm i --save react-native-simple-bottom-sheet

Usage

import BottomSheet from 'react-native-simple-bottom-sheet';

function App() {
  return (
    <View style={{flex: 1}}>
      <View>Your content</View>
      <BottomSheet isOpen>
        // The component to render inside the panel
        <View />
      </BottomSheet>
    </View>
  );
}

By default the height of the panel tries to adapt to the content height till the sliderMaxHeight value is reached.
If you want the content to scroll inside the panel use ScrollView/FlatList like this:

function App() {
  return (
    <View style={{flex: 1}}>
      <View>Your content</View>
      <BottomSheet isOpen>
        {(onScrollEndDrag) => (
          <ScrollView onScrollEndDrag={onScrollEndDrag}>
            {[...Array(10)].map((_, index) => (
              <View key={`${index}`} style={styles.listItem}>
                <Text>{`List Item ${index + 1}`}</Text>
              </View>
            ))}
          </ScrollView>
        )}
      </BottomSheet>
    </View>
  );
}

This allows the panel to close when the user reaches the top of the scrollable content and drags the panel down again. Example:

By default when the panel is closed you can drag it up again thanks to the part of the panel that remains on the bottom side of the screen. If you want to completely hide it you can set the sliderMinHeight prop to 0 and use the togglePanel method to bring it up.

function App() {
  const panelRef = useRef(null);

  return (
    <View style={{flex: 1}}>
      <View>Your content</View>
      <TouchableOpacity onPress={() => panelRef.current.togglePanel()}>
        <Text>Toggle</Text>
      </TouchableOpacity>
      <BottomSheet ref={ref => panelRef.current = ref}>
        <Text style={{paddingVertical: 20}}>
          Some random content
        </Text>
      </BottomSheet>
    </View>
  );
}

Props

Prop Name	Type	Default	Description
children	func or node	<View />	A component or a render function. Use toggleSlider function instead
isOpen	boolean	true	Initial state of the panel; true to render it opened, false otherwise. Important: Do not try to open/close the panel througth this prop, see togglePanel method instead
sliderMinHeight	number	50	Min height of the panel
sliderMaxHeight	number	Dimensions.get('window').height * 0.5	Max height of the panel
animation	func	Easing.quad	The close/open animation of the panel
animationDuration	number	200	How long the panel takes to open/close
onOpen	function	() => null	Function to execute when the panel is opened
onClose	function	() => null	Function to execute when the panel is closed
wrapperStyle	object	{}	Custom style for the panel wrapper
outerContentStyle	object	{}	Custom style for the outer content
innerContentStyle	object	{}	Custom style for the inner content
lineContainerStyle	object	{}	Custom style for the line container
lineStyle	object	{}	Custom style for the line

Methods

Name	Description
togglePanel	Function to close/open the panel

License

MIT

Support

If you enjoyed this project — or just feeling generous, consider buying me a beer. Cheers!

Author

Made by Stefano Martella