react-native-cool-modal

An enhanced, animated, customizable and foremost a cool React Native modal.

Expanding the original React Native  component by adding animations, style customization options, while still providing a simple and easy to use API.

Preview

Features

• Smooth enter/exit animations
• Plain simple and easy to use APIs
• Fullscreen , bottom and centered display types
• Customizable backdrop color

Setup

npm install --save react-native-cool-modal

or

yarn add react-native-cool-modal

or

pnpm add react-native-cool-modal

Usage

First import the modal component from react-native-cool-modal .

import { Modal } from "react-native-cool-modal";

Then setup a boolean state inside your component and pass it as a prop to the Modal component .

const [show, setShow] = React.useState(false);

<Modal modalVisible={show} setModalVisible={(e: boolean) => setShow(e)}>
  <Text>Modal content</Text>
</Modal>;

You can trigger the modal pop up by setting the state to true .

<Button title="Show modal" onPress={() => setShow(true)} />

Complete example

import React, { useState } from "react";
import { Modal } from "react-native-cool-modal";

const App = () => {
  const [show, setShow] = useState(false);

  return (
    <SafeAreaView style={{ alignItems: "center", flex: 1, paddingTop: 40 }}>
      <Modal
        modalVisible={show}
        setModalVisible={(e) => setShow(e)}
        type="fullscreen"
        rtl={false}
        closeIcon={
          <Image
            style={{ width: 30, height: 30 }}
            resizeMode="contain"
            source={require("./close.png")}
          />
        }
        closeModalOverlayOnPress={true}
        title="Title"
        titleStyles={{ fontSize: 18, fontWeight: "bold" }}
        bgColor="white"
        overlayColor="rgba(0,0,0,0.4)"
        divider={
          <View
            style={{
              marginTop: 10,
              backgroundColor: "#c8c8c8",
              height: 0.5,
              width: "100%",
            }}
          />
        }
      >
        <Text>Modal content</Text>
      </Modal>
      <Button title="Show modal" onPress={() => setShow(true)} />
    </SafeAreaView>
  );
};

Available props

Name	Type	Default	Description
children	ReactNode	REQUIRED	Sets modal content
modalVisible	boolean	REQUIRED	Sets modal visibility state
setModalVisible	(modalState: boolean) => void	REQUIRED	Handle modal on close event
type	center or bottom or fullscreen	center	Sets the modal display type
rtl	boolean	false	Sets the modal header direction
closeModalOverlayOnPress	boolean	true	Should close modal when the overlay is pressed in center and bottom type modals
title	string	null	Modal title
titleStyles	TextStyle	null	Style applied to modal title
closeIcon	ReactNode	null	Sets the modal header close icon
overlayColor	string	rgba(0,0,0,0.5)	Sets the modal overlay color
bgColor	string	#ffffff	Sets the modal header and content background color
divider	ReactNode	null	Sets the divider element between modal header and content

Developer

@1mehdifaraji