Nordic Panda Moor


    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!



    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(()  => {
    }, [])
    return (


    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


    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.




    npm i react-native-bottom-modal-scrollable

    DownloadsWeekly Downloads






    Unpacked Size

    288 MB

    Total Files


    Last publish


    • romancirier