Skip to content
This repository has been archived by the owner on Jul 17, 2023. It is now read-only.

AIdeaLab/react-native-modalize

This branch is 33 commits behind jeremybarbet/react-native-modalize:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e9c31a7 · Dec 4, 2020
Apr 13, 2020
Dec 3, 2020
Dec 4, 2020
Dec 4, 2020
Jun 11, 2020
Nov 8, 2018
Apr 24, 2020
Apr 24, 2020
Dec 4, 2020
Apr 24, 2020
Aug 27, 2020
Dec 4, 2020
Dec 19, 2019
Dec 19, 2019
Apr 20, 2020
Dec 3, 2020

Repository files navigation

Modalize

npm version

A highly customizable modal/bottom sheet that loves scrolling content.

This component has been built with react-native-gesture-handler to address the common issue of scrolling, swiping and handling the keyboard behaviors, you can face with react-native's modal.

This component comes with a ScrollView, the default renderer, a FlatList or 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. You can also have the possibility to pass your own custom renderer.

Simple Fixed Snapping Absolute FlatList Open Apple Facebook Slack

Installation

yarn add react-native-modalize react-native-gesture-handler
iOS
npx pod-install ios
Android

React Native <= 0.59

Follow this guide to complete the Android installation.

React Native > 0.60

You don't need to follow the guide mentioned above because autolinking from React already did the steps.

Usage

Here is a quick example, using the default ScrollView renderer.

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

export const App = () => {
  const modalizeRef = useRef<Modalize>(null);

  const onOpen = () => {
    modalizeRef.current?.open();
  };

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

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

Documentation

Please check out the full documentation available here to find all about the props, methods and examples of Modalize's usage.

About

A highly customizable modal/bottom sheet that loves scrolling content.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 95.7%
  • JavaScript 2.7%
  • Shell 1.6%