React-native Demo (28)-Popup API

Alertios
React-native Online Runner method

Static alert (title:string, message?: String, buttons?: array<{text:? string; onpress?:? Function; }>, type?: string): No input Popup

Static prompt (title:string, value?: String, buttons?: array<{text:? string; onpress?:? Function; }>, callback?: Function): Pop-up box instance with input box

/** * The examples provided by Facebook is for non-commercial testing and * evaluation purposes only.
 * * Facebook reserves all rights not expressly granted. * * The software is provided ' as is ', without WARRANTY of any KIND, EXPRESS * OR implied, including and not LIMITED to T HE warranties of merchantability, * FITNESS for A particular PURPOSE and NON infringement. In NO EVENT shall * FACEBOOK is liable for any CLAIM, damages OR other liability, WHETHER in * a ACTION of contract, to
 RT or OTHERWISE, arising from, out of or in * CONNECTION with the software or the same or other dealings in the software.

* * @flow * * ' use strict ';
var React = require (' react-native ');

var {StyleSheet, View, Text, Touchablehighlight, Alertios,} = React;
exports.framework = ' React ';
Exports.title = ' Alertios ';
exports.description = ' IOS alerts and action sheets '; Exports.examples = [{title: ' Alerts ', render () {return (<View> <touchablehighlight Style={styles.wrapper} onpress={() = Alertios.alert (' Foo Title ', ' My alert Msg ' )}> <view style={styles.button}> <text>alert with message and default button& lt;/text> </View> </TouchableHighlight> <touchablehighlight style={styles.wrap per} onpress={() = Alertios.alert (null, NULL, [{text: ' B Utton ', onpress: () = Console.log (' Button pressed! ')},])}> <view style={styles .button}> <text>alert with only one button</text> </View> </touchabl
            Ehighlight> <touchablehighlight Style={styles.wrapper} onpress={() = Alertios.alert ( ' foo Title ', ' My Alert Msg ', [{text: ' foo ', onpress: () = Console.log (' foo P
            Ressed! ')},  {text: ' Bar ', onpress: () = Console.log (' Bar pressed! ')},])}> <view style={s Tyles.button}> <text>alert with buttons</text> </View> </touchab
            Lehighlight> <touchablehighlight Style={styles.wrapper} onpress={() = Alertios.alert ( ' foo Title ', null, [{text: ' foo ', onpress: () = Console.log (' foo pressed! ') }, {text: ' Bar ', onpress: () = Console.log (' Bar pressed! ')}, {text: ' Baz ', Onpress: () =& Gt Console.log (' Baz pressed! ')},])}> <view style={styles.button}> < Text>alert with 3 buttons</text> </View> </TouchableHighlight> <touchabl Ehighlight Style={styles.wrapper} onpress={() = Alertios.alert (' Foo Title ', ' My Ale
            RT MSG ',' ... '. Split ("). Map (dot, index) = = ({text: ' Button ' + Index, onpress: () =&gt ;
            Console.log (' Pressed ' + Index)}))}> <view style={styles.button}> <text>alert with too many buttons</text> </View> </TouchableHighlight> &lt
  ;/view>);

}}, {title: ' Prompt ', Render (): react.component {return <promptexample/>}}];

    Class Promptexample extends React.component {constructor (props) {super (props);
    This.promptresponse = This.promptResponse.bind (this);

    This.state = {promptvalue:undefined,};
    This.title = ' Type a value ';
    This.defaultvalue = ' Default value '; This.buttons = [{text: ' Custom Cancel ',}, {text: ' Custom OK ', onPress:this.promptResponse}]
  ;
         } render () {return (<View> <text style={{marginbottom:10}}> <text style={{fontweight: ' Bold '}}>prompt value:</text> {this.state.promptValue} </Text> <touchablehighlight Style={styles.wrapper} onpress={this.prompt.bind (This, this.title, This.prom Ptresponse)}> <view style={styles.button}> <Text> prompt with title &A mp Callback </Text> </View> </TouchableHighlight> &LT;TOUCHABLEHIGHL

          Ight Style={styles.wrapper} onpress={this.prompt.bind (This, this.title, this.buttons)}>
            <view style={styles.button}> <Text> prompt with Title & custom Buttons </Text> </View> </TouchableHighlight> <touchablehighlight sty

          Le={styles.wrapper} onpress={this.prompt.bind (This, this.title, This.defaultvalue, This.promptresponse)}> <view styLe={styles.button}> <Text> prompt with title, default value & callback </Text> </View> </TouchableHighlight> <touchablehighlight style= {Styles.wrapper} onpress={this.prompt.bind (This, this.title, This.defaultvalue, this.buttons)}> &L T View style={styles.button}> <Text> prompt with title, default value & Custom button
  s </Text> </View> </TouchableHighlight> </View>); } prompt () {//Flow ' s apply support is broken: #7035621 ((AlertIOS.prompt:any). Apply:any) (Alertios, argument
  s);
  } promptresponse (Promptvalue) {this.setstate ({promptvalue}); }} var styles = Stylesheet.create ({wrapper: {borderradius:5, Marginbottom:5,}, button: {Backgrou
 Ndcolor: ' #eeeeee ', Padding:10,},});

effect Alert

prompt