# react-native-display-modal

> simple modal in react-native

Latest version **0.0.4** (published 2021-08-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-display-modal
pnpm add react-native-display-modal
yarn add react-native-display-modal
bun add react-native-display-modal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2021-08-02 |
| First published | 2021-08-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | markssiw |
| Maintainers | markssiw |

## Links

- npm: https://www.npmjs.com/package/react-native-display-modal
- Repository: https://github.com/markssiw11/react-native-display-modal
- Issues: https://github.com/markssiw11/react-native-display-modal/issues
- npm.io page: https://npm.io/package/react-native-display-modal

## Recent versions

- 0.0.4 (latest) — 2021-08-02
- 0.0.3 — 2021-08-02
- 0.0.2 — 2021-08-01
- 0.0.1 — 2021-08-01

## README

# react-native-display-modal
# Demo
<img src="https://i.ibb.co/VBHmfT9/A-nh-chu-p-Ma-n-hi-nh-2021-08-01-lu-c-21-06-12.png" width="250"><img src="https://i.ibb.co/fXb8Gkq/A-nh-chu-p-Ma-n-hi-nh-2021-08-02-lu-c-08-26-14.png" width="250"><img src="https://i.ibb.co/Qf5c31m/A-nh-chu-p-Ma-n-hi-nh-2021-08-02-lu-c-08-35-41.png" width="250">

# 1. install
 - npm i react-native-display-modal
# 2. Usage
   ```js
  import React, {useState} from 'react';
  import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  StyleSheet,
  Pressable,
  Dimensions,
  Image,
} from 'react-native';
  import {DisplayModal} from 'react-native-display-modal';
  function DisplayModalExample() {
   const [isOpen, setOpen] = useState(false);
   const onCloseModal = () => {
     setOpen(false);
   };
  return (
    <View style={{flex: 1, justifyContent: 'center'}}>
      <DisplayModal
        title="React Native Alert"
        context="Welcome to react-native-display-modal !!!"
        isOpen={isOpen}
        onCloseModal={onCloseModal}
        // iconView={iconView}
        headerCloseButton={false}
        // closeButtonMode="upper"
        closeButtonShow={true}
        // subContext="sub context you want display"
        titleStyle={{color: 'red'}}
        button={[
          {
            title: 'CANCEL',
            onPress: onCloseModal,
          },
        ]}
        // closeIcon={closeIcon}
      />
      <TouchableOpacity onPress={() => setOpen(true)}>
        <Text selectable>OpenModal</Text>
      </TouchableOpacity>
    </View>
   );
}
```

# Props
  - isOpen: boolean,
  - onCloseModal: () => void,
  - title?: string,
  - context?: string,
  - subContext?: string,
  - titleStyle?: StyleProp<TextStyle>,
  - contextStyle?: StyleProp<TextStyle>,
  - subContextStyle?: StyleProp<TextStyle>,
  - iconView?: ReactNode,
  - headerCloseButton? :boolean,
  - closeButtonMode: 'upper' |  'right' | 'left',
  - closeButtonShow: boolean,
  - button: ButtonProps[],
  - closeIcon: ReactNode,
  - hiddenIconView?: boolean,
  - closeIconTintColor?: string,
  - iconViewTintColor?: string

---
_Source: https://npm.io/package/react-native-display-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._