Highly Customizable Modal/Bottom Sheet Component – Modalize

Modalize is a highly customizable modal, bottom sheet, or top sheet that loves scrolling content. This component has been built with react-native-gesture-handler to address the common issues of scrolling, swiping, and handling the keyboard behaviors. Modalize can save you from having to build your own modal from scratch and solve the common problems you’d face when doing so.

This component comes with a ScrollView, which is the default renderer. The other two built-in options are FlatList and 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.

How to use it:

1. Install.

# Yarn
$ yarn add react-native-modalize react-native-gesture-handler

# NPM
$ npm i react-native-modalize react-native-gesture-handler

2. Import the Modalize.

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

3. Basic usage.

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>
    </>
  );
};

Preview:

Download Details:

Author: jeremybarbet

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/jeremybarbet/react-native-modalize

License: MIT