Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/1mehdifaraji/react-native-cool-modal
React native cool modal library
https://github.com/1mehdifaraji/react-native-cool-modal
alert android ios modal react-native react-native-alert react-native-modal
Last synced: about 1 month ago
JSON representation
React native cool modal library
- Host: GitHub
- URL: https://github.com/1mehdifaraji/react-native-cool-modal
- Owner: 1mehdifaraji
- License: mit
- Created: 2023-03-30T06:19:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-30T11:26:56.000Z (almost 2 years ago)
- Last Synced: 2024-11-13T09:51:34.449Z (about 2 months ago)
- Topics: alert, android, ios, modal, react-native, react-native-alert, react-native-modal
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-cool-modal
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install --save react-native-cool-modal
```
or
```bash
yarn add react-native-cool-modal
```
or
```bash
pnpm add react-native-cool-modal
```
## Usage
First import the modal component from `react-native-cool-modal` .
```javascript
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 .
```javascript
const [show, setShow] = React.useState(false);
setShow(e)}>
Modal content
;
```
You can trigger the modal pop up by setting the state to `true` .
```javascript
setShow(true)} />
```
## Complete example
```javascript
import React, { useState } from "react";
import { Modal } from "react-native-cool-modal";
const App = () => {
const [show, setShow] = useState(false);
return (
setShow(e)}
type="fullscreen"
rtl={false}
closeIcon={
}
closeModalOverlayOnPress={true}
title="Title"
titleStyles={{ fontSize: 18, fontWeight: "bold" }}
bgColor="white"
overlayColor="rgba(0,0,0,0.4)"
divider={
}
>
Modal content
setShow(true)} />
);
};
```
## 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](https://github.com/1mehdifaraji)