jaysoo / react-native-prompt Goto Github PK

View Code? Open in Web Editor NEW

174.0 10.0 119.0 394 KB

A cross-platform prompt component for React Native.

License: ISC License

JavaScript 55.12% Java 5.89% Objective-C 29.65% Python 9.34%

react-native-prompt's Introduction

react-native-prompt

A cross-platform prompt component for React Native.

Installation

$ npm install react-native-prompt --save

Demo

iOS	Android

Basic Usage

import Prompt from 'react-native-prompt';

// Inside render()
<Prompt
    title="Say something"
    placeholder="Start typing"
    defaultValue="Hello"
    visible={ this.state.promptVisible }
    onCancel={ () => this.setState({
      promptVisible: false,
      message: "You cancelled"
    }) }
    onSubmit={ (value) => this.setState({
      promptVisible: false,
      message: `You said "${value}"`
    }) }/>

Please refer to the full working example here.

API

Props:

visible (boolean) -- When true, the prompt is displayed, closes otherwise
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
onCancel (function, required) -- Function that is called when user cancels prompt
onSubmit (function, required) -- Function that is called with user's value when they submit
submitText (string) -- The string that is displayed on the submit button (defaults to "OK")
cancelText (string) -- The string that is displayed on the cancel button (defaults to "Cancel")
onChangeText (function) -- Function that is called with user input when it changes.
textInputProps (Object) -- Additional props on the input element

Testing

Install dev modules:

npm install

Run tests

npm test

Changelog

1.0.0

Updates value when defaultValue changes. (Thanks https://github.com/vessp)
Removes unnecessary flex: 1 style. (Thanks https://github.com/stevehollaar)

0.18.6

Adds textInputProps to allow additional props to be passed to the input element. Thanks @yueshuaijie!

0.18.5

Fixed compatibility with React Native 0.27.2 (thanks @sibelius and @tonyxiao!)

react-native-prompt's People

Contributors

Stargazers

Watchers

Forkers

lmx99 alinz sibelius pgmemk vessp joonhocho stevehollaar gectorat panago joevo2 reactandnative ogtfaber tomasgarba mswokk kesha-antonov kevinnguy tomodian chatnbook yewenxiang23 ynsgnr cshashwat backbonesk kcjl519 edtechfoundry anderson-cubo nickkotowski jwhscholten dioxide varshabawari lightman73 chachaproper tmaly1980 danielpgauer stefen puresolcom coverdh mjsolidarios acuitybrands nirobon butchmarshall cyaxares bslayerw ldgarcia yeomanye reggie3 somonek imamsutono pohodnya hayait599 factorbench gyetvan-andras kintyre flickerleap kchalermsook jacobchen crim3hound perry-mitchell tradle duytai jdshaoheyi beansoft plastbox hamxabaig khalidhussain gendeld ramiah-viknesh naytun nicolasepiscopo bardez jonss emke sowlutions hzwildcat linecode sahawut dvel-inc ilevye dkfl1995 mahaswamisoftware esatemre maxim-c marlosirapuan die20 onehassan nerdydragon tonlen timeboundhq lucienbl alex-melnyk kalyzee mykolasauliak internationalizationist tristateakshay bencisthegoat founderandlightning wgltony newbiebr mylesshie armin23615 damirja

react-native-prompt's Issues

setState problem!!!!

When I try to modify the state appear this worning:

this.setState({display: aggiungi})

PLEASE HELP!

I cannot get it to work on 0.39.2

I am not able to get the value onSubmit. I am using react 0.39.2

React Native setState Issue and Warning

First:

Is a prompt unmounted when "visible" parameter is set to false?

if for sure NO

Ignore this issue and close it

If so or maybe

when you setState for the "visible" parameter ("promptVisible") it will cause a:
Warning: Can only update a mounted or mounting component
This setState Warning will happen after opened "promptVisible" to true and you have closed "promptVisible" to false

Example Code:

<Prompt
     title="Enter Amount"
     placeholder=""
     /*defaultValue={this.state.amount}*/
     visible={ this.state.promptVisible } //this is where the warning will happen
     onCancel={ () => this.closePrompt() } //this method contains, console.warn() and this.setState
     onSubmit={
            (value) => this.submitAmount(value) //this method contains, console.warn and this.setState
     } />

Note: submitAmount method setState for state.amount and state.promptVisible

It will check this.state.promptVisible

or check for a change in value

when the prompt is unmounted!

causing the warning.

After major testing and checking all of my other components for setState and state for unmounted and mounted component I drew the conclusion to this react-native-prompts as it's the only component not displayed when "visible" is false.

propTypes

It's not working, propType is a issue.

keyboardtype

do you have keyboardtype?
numeric, email, etc

[Feature] Prompt for confirmation

Great component! I just have one suggestion: Would it be possible to add the ability to show just a confirmation prompt (Ok/Cancel or Yes/No) using this component? It'd be handy, because I'd be able to keep the same props and styling by using this component to ask Yes/No questions without text input.

If this is out of scope in your opinion, please close.

Class version?

Is there (or could there be) a class-based version of this that is called OUTSIDE of render()? Such as how Alert works?

To Everyone having the Prop Types issue

This repo is no longer actively maintained.

Thanks to lightman73's fix some few months ago, we now use this untill @jaysoo gets back on this project.

npm package: rn-prompt

Is it possible to set pointer cursor for the prompt buttons

Thank you for a very helpful component. I am using it for a mobile and web implementation of our app. In web it is important to have the correct cursor for clickable components :).

Not working correctly with RN 0.36

Not working with react version above 15.5

Issue is due to PropTypes reamoved from react:
https://reactjs.org/docs/typechecking-with-proptypes.html

Cancel requires 2 presses to work

Using the example mentioned, I need to click cancel twice to cancel

react-native 0.49.3 Compatibility Issue

It looks like a change broke something in Prompt.js

I noticed that if we change the PropTypes import statement to the following, then the error goes away:

import PropTypes from 'prop-types';

Can we add the styling in cancel and OK buttons

RN 0.51.0 Error: Undefined is not an object (evaluating '_react2.PropTypes.string')

Getting the following error in React Native 0.51.0
undefined is not an object (evaluating '_react2.PropTypes.string')

I have managed to find a fix by removing the PropTypes import from react, and replacing it with import PropTypes from 'prop-types';.

Submitting a PR for review.

TypeError: nodeHandle.getHostNode is not a function

I receive this error but everything works great, I guess is something with focus.

/node_modules/react-native/Libraries/Renderer/src/renderers/native/ReactNativeStack.js:44
return nodeHandle.getHostNode();
^
TypeError: nodeHandle.getHostNode is not a function
at Object.findNodeHandle (/home/julioe/react-native/fotoapp/node_modules/react-native/Libraries/Renderer/src/renderers/native/ReactNativeStack.js:44:19)
at Component.focus (/home/julioe/react-native/fotoapp/node_modules/react-native/Libraries/Renderer/src/renderers/native/NativeMethodsMixin.js:145:43)
at Component. (/home/julioe/react-native/fotoapp/node_modules/react-timer-mixin/TimerMixin.js:18:16)
at ontimeout (timers.js:386:14)
at tryOnTimeout (timers.js:250:5)
at Timer.listOnTimeout (timers.js:214:5)
error Command failed with exit code 1.

Your component's very useful, thanks, greetings

Deprecation warnings on ReactNative >=25.

https://github.com/facebook/react-native/releases/tag/v0.25.1

Requiring React API from react-native is now deprecated - 2eafcd4 0b534d1

Also this will stop working in 0.26. So we had to rewrite imports to avoid warnings.