Namespace Pollution Mechanism

    @carrybible/react-native-modalize
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.13 • Public • Published

    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

    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.

    Install

    npm i @carrybible/react-native-modalize

    DownloadsWeekly Downloads

    1

    Version

    1.2.13

    License

    MIT

    Unpacked Size

    78.4 kB

    Total Files

    20

    Last publish

    Collaborators

    • carrybibledev
    • arjaycarrydev
    • mattcarry
    • datvudang