@lunacap/bottom-sheet-modal

React Native Bottom Sheet Modal Library

A simple, easy to use and performant bottom sheet library for react-native.

Installation

Install by running

npm install @lunacap/bottom-sheet-modal

yarn add @lunacap/bottom-sheet-modal

In the libraries dependencies, react-native-reanimated and react-native-safe-area-context packages are utilized so if they are not installed in your project you need to install these packages and add their native components as well.

Usage

The modal utilizes states for displaying. It can be connected to redux or you can use local states.

The BottomSheetProps type is the definition for the visible modal and the BottomSheetModalProps type is the definiton for the container component.

This library allows you to stack two bottom sheets on top of each other.

const App = () => {
  const [isFirstBottomSheetVisible, setIsFirstBottomSheetVisible] =
    useState<boolean>(false);
  const [firstBottomSheetProps, setFirstBottomSheetProps] =
    useState<BottomSheetProps>({});

  const [isSecondBottomSheetVisible, setIsSecondBottomSheetVisible] =
    useState<boolean>(false);
  const [secondBottomSheetProps, setSecondBottomSheetProps] =
    useState<BottomSheetProps>({});

  const expandFirstBottomSheet = () => {
    const bottomSheetProps: BottomSheetProps = {
      children: (
        <View style={{paddingHorizontal: 16, paddingTop: 16, height: 200}}>
          <Text>Title for First</Text>
          <Button title="Show Second Modal" onPress={expandSecondBottomSheet} />
          <Text>Write Some Text</Text>
          <TextInput
            style={{
              width: '100%',
              height: 50,
              borderColor: 'black',
              borderWidth: 1,
            }}
          />
        </View>
      ),
    };
    setFirstBottomSheetProps(bottomSheetProps);
    setIsFirstBottomSheetVisible(true);
  };

  const secondBottomSheetView = () => {
    return (
      <View
        style={{
          paddingHorizontal: 16,
          paddingTop: 16,
          height: 250,
        }}>
        <Text>Title for Second</Text>
        <Text>Write Some Text</Text>
        <TextInput
          style={{
            width: '100%',
            height: 50,
            borderColor: 'black',
            borderWidth: 1,
          }}
        />
      </View>
    );
  };

  const expandSecondBottomSheet = () => {
    const bottomSheetProps: BottomSheetProps = {
      children: <>{secondBottomSheetView()}</>,
    };
    setSecondBottomSheetProps(bottomSheetProps);
    setIsSecondBottomSheetVisible(true);
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{width: '100%', height: '100%'}}>
        <Button title="Show Modal" onPress={expandFirstBottomSheet} />
        <BottomSheetModal
          isBottomSheetVisible={isFirstBottomSheetVisible}
          setIsBottomSheetVisible={setIsFirstBottomSheetVisible}
          isSecondBottomSheetVisible={isSecondBottomSheetVisible}
          setIsSecondBottomSheetVisible={setIsSecondBottomSheetVisible}
          firstBottomSheetProps={firstBottomSheetProps}
          secondBottomSheetProps={secondBottomSheetProps}
        />
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

Available Props

Modal

PropName	type	required	Description
isBottomSheetVisible	boolean	yes	Prop for the initial visibility of the bottom sheet
setIsBottomSheetVisible	action setter function	yes	Prop for updating the outer state
isSecondBottomSheetVisible	boolean	no	Prop for the stacked visibility of the bottom sheet
setIsSecondBottomSheetVisible	action setter function	no	Prop for updating the outer state
firstBottomSheetProps	Card	yes	Initial sheet properties
secondBottomSheetProps	Card	no	Second sheet properties
firstBottomSheetFadeOutValue	number	no	Fading value for the initial bottom sheet after the first one, 0-1
isOverlayDisabled	boolean	no	Whether or not the overlay is pressable
overlayOpacity	number	no	Overlay opacity, 0-1

Card

PropName	type	required	Description
snapPosition	number	no	Prop for determining the position of the card
indicatorStyle	view style object	no	Prop for overriding the indicator style
modalStyle	view style object	no	Prop for overriding the modal style