Nordic Panda Moor

    react-native-bottom-modal-scrollable

    0.7.2 • Public • Published

    Bottom Scrollable Modal

    A Bottom Modal component for React Native that can be dragged to the maximum height and without releasing the finger off the screen scroll its content to provide a smooth user experience. Fully customizable and compatible with Android & iOS. Built using react-native-reanimated 2.

    Pull requests and feedbacks are welcome!

    Overview

    Installation

    This package requires react-native-reanimated 2 and react-native-gesture-handler to work.

    Then :

    yarn add react-native-bottom-scrollable-modal
    

    or using npm

    npm install react-native-bottom-scrollable-modal
    

    Quick start

    import { BottomModalScrollable, BottomModalScrollableRef } from  'react-native-bottom-modal';
    
    ...
    
    const modalRef = useRef<BottomModalScrollableRef>(null);
    
    ...
    
    useEffect(()  => {
      modalRef.current?.open();
    }, [])
    
    return (
      <BottomModalScrollable
        ref={ref}
        children={
          <View>
            <Text>Hello</Text>
          </View>
        }
      />
    );

    Props

    Prop Default Type Description
    children ReactNode Content to render inside the modal
    footer AbsoluteFooter
    Element to render in absolute position over the modal at the bottom of the screen
    backgroundColor #fff string Background color of the modal
    defaultModalHeight 50% of the window height number Default height of the modal when opened
    maxModalHeight 90% of the window height number Maximum height the modal can reach
    contentStaticHeight number Only use this prop to set a static height for the content of the modal, if not provided the height will be calculated according to the children height (dynamically)
    onClose () => void Callback called when the modal has been closed
    containerStyle ViewStyle Style of the container
    dragIndicator true boolean Show or not the dragging indicator at the top of the modal content
    screenHeight Dimension window height number Use this props to overide the size in which the modal should work, useful if the modal should start after some elements which are at the bottom of the screen
    disableBackgroundOpacity false boolean Disable the opacity applied on the background
    disableCloseOnBackgroundPress false boolean If true then it will not close the modal when background is pressed
    disableSnapToBottom false boolean If true the modal will not close when the user drag it down, instead it will snap to the defaultModalHeight
    backgroundClickable false boolean If true the background will be pressable, usually this prop should be used with disableCloseOnBackgroundPress & disableBackgroundOpacity
    onEndReached () => void Function called when the end of the content is reached
    onEndReachedThreshold 100 number How far from the end in pixel the bottom edge of the content must be from the end of the content to trigger the onEndReached callback

    Example

    Running the example app:

    cd example && yarn
    

    Starting the server:

    yarn start
    

    Running the app on iOS:

    yarn ios
    

    Running the app on Android:

    yarn android
    

    Known issues

    As the content is displayed inside a custom scroll view it is not possible to use flex, which shouldn't be necessary as demonstrate in the example app.

    License

    MIT

    Install

    npm i react-native-bottom-modal-scrollable

    DownloadsWeekly Downloads

    8

    Version

    0.7.2

    License

    MIT

    Unpacked Size

    288 MB

    Total Files

    1063

    Last publish

    Collaborators

    • romancirier