ovr Fork Version

Original https://github.com/jeremybarbet/react-native-modalize

Support for modalTopOffset default for iPhone 14 series devices

Modalize

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.

Installation

1yarn add react-native-patch-modalize react-native-gesture-handler

1npx pod-install ios

Usage

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

1import React, { useRef } from 'react';
2import { View, Text, TouchableOpacity } from 'react-native';
3import { Modalize } from 'react-native-patch-modalize';
4
5export const App = () => {
6  const modalizeRef = useRef<Modalize>(null);
7
8  const onOpen = () => {
9    modalizeRef.current?.open();
10  };
11
12  return (
13    <>
14      <TouchableOpacity onPress={onOpen}>
15        <Text>Open the modal</Text>
16      </TouchableOpacity>
17
18      <Modalize ref={modalizeRef}>...your content</Modalize>
19    </>
20  );
21};

Documentation

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