Modalize

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.

Installation

yarn add react-native-modalize

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

Usage

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<Modalize>(null);

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

    if (modal) {
      modal.open();
    }
  };

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

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

Documentation

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