staticdeng / react-native-modal-prompt

A cross-platform prompt component for React Native.

react-native-modal-prompt

A cross-platform prompt component for React Native.

Installation

$ npm install react-native-modal-prompt --save

Examples

Basic	Prompt showCount

Basic Usage

import Prompt from 'react-native-modal-prompt';

<Prompt
  visible={this.state.promptVisible}
  title="title"
  placeholder="please write something"
  defaultValue="prompt"
  showCount={true}
  operation={[
    { 
      text: 'Cancel',
      color: '#000',
      onPress: () => { 
      ToastAndroid.showWithGravity('if return false, the modal will not close', 1000, ToastAndroid.CENTER);
      return false; 
    }},
    {
      text: 'Ok',
      onPress: (value) =>
        new Promise((resolve) => {
          console.log(`the prompt value is ${value}`);
          // ajax....
          ToastAndroid.showWithGravity('ajax request sucess', 1000, ToastAndroid.CENTER);
          setTimeout(resolve, 2000);
        }),
    },
  ]}
/>

full examples here.

API

Props:

• visible (boolean) -- Control display or hiding
• title (string, required) -- The title text of the prompt
• placeholder (string) -- The placeholder text of the prompt
• defaultValue (string) -- The default value of the prompt
• operation (array, required) -- Multiple control buttons can be customized, and the 'onPress' function is callback of the button after click that can await something like ajax, if the return value is false, the prompt will not close
• maxLength (string) -- The maxLength can be input of the prompt
• showCount (boolean) -- If this is true, the prompt will display word length of input

react-native-modal-prompt's Issues

Add Modal Transparency and Fade Animation

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-modal-prompt/src/Prompt.js b/node_modules/react-native-modal-prompt/src/Prompt.js
index 82b82cb..6ee4815 100644
--- a/node_modules/react-native-modal-prompt/src/Prompt.js
+++ b/node_modules/react-native-modal-prompt/src/Prompt.js
@@ -92,7 +92,9 @@ class Prompt extends Component {
     render() {
         return (
             <Modal
+                animationType="fade"
                 visible={this.state.visible}
+                transparent
                 onRequestClose={this.requestClose}
             >
                 {this.renderPromet()}

This issue body was partially generated by patch-package.