react-native-modalize

A modal that loves scrollable content.

Github stars Tracking Chart

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.

Installation

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.

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(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.

Overview

Name With Ownerjeremybarbet/react-native-modalize
Primary LanguageTypeScript
Program languageTypeScript (Language Count: 3)
Platform
License:MIT License
Release Count84
Last Release Name2.1.1 (Posted on )
First Release Name1.0.0-alpha.0 (Posted on )
Created At2018-10-22 08:47:38
Pushed At2023-12-19 15:11:17
Last Commit At2022-08-10 12:11:37
Stargazers Count2.8k
Watchers Count18
Fork Count293
Commits Count529
Has Issues Enabled
Issues Count326
Issue Open Count98
Pull Requests Count87
Pull Requests Open Count18
Pull Requests Close Count66
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top