A modal that loves scrollable content.

Usage no npm install needed!

<script type="module">
  import adriansoReactNativeModalize from 'https://cdn.skypack.dev/@adrianso/react-native-modalize';



npm version

A modal that loves scrollable content.

This component has been built with react-native-gesture-handler to address the common issue of scrolling, swipping and handling the keyboard behaviors, you can face with react-native's modal. This component comes with a ScrollView, the default content renderer, a FlatList and a SectionList. They are all three built-in and make your life easier, just pass your content and Modalize will handle the rest for you.


yarn add react-native-modalize

If you are not using expo, you will have to install react-native-gesture-handler

yarn add react-native-gesture-handler

Check out react-native-gesture-handler's documentation to set it up.


Here is the quick how-to example:

import React, { useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Modalize } from 'react-native-modalize';

export const MyApp = () => {
  const modalRef = useRef(null);

  const onOpen = () => {
    const modal = modalRef.current;

    if (modal) {

  return (
      <TouchableOpacity onPress={onOpen}>
        <Text>Open the modal</Text>

      <Modalize ref={modalRef}>...your content</Modalize>


The full documentation is available here. There is multiple examples runing through differents navigators, with more informations here.