This is a custom component for React Native, a simple popup, compatible with ios and android.
This is a forked distro of react-native-popup that adds support for the current versions of react-native, and adds additional features (style overrides, promise support). The originating distro can be found here
isOverlay bool - default trueisOverlayClickClose bool - default trueonDismiss function() - optional callback called when overlay dismisses dialogboxstyle object - optional override for system styles
alert (messagestring |number , [...]) : Promise
e . g .
this . dialogbox . alert ( 1 ) ;
this . dialogbox . alert ( 1 , ' two ' , ' 10 messages at most ' ) ;
this . dialogbox . alert ( ' promise example ' ) . then ( ( ) => this . dialogbox . alert ( ' dismissed ' ) ) ;
tip ({ titlestring , contentstring |number |array <string |number > isRequiredbtntitlestring default 'OK'styleobject , callbackfunction }, }) : Promise
e . g .
this . dialogbox . tip ( {
content : ' come on! ' ,
} ) ;
this . dialogbox . tip ( {
title : ' TipTip ' ,
content : ' come on! ' ,
} ) ;
this . dialogbox . tip ( {
content : [ ' come on! ' , ' go! ' ] ,
btn : {
text : ' OKOK ' ,
callback : ( ) => {
this . dialogbox . alert ( ' over! ' ) ;
} ,
} ,
} ) ;
this . dialogbox . tip ( {
content : ' promise example ' ,
btn : {
text : ' done '
}
} ) . then ( ( ) => ( this . dialogbox . alert ( ' done ' ) ) ) ;
this . dialogbox . tip ( {
content : ' style example ' ,
style : {
color : ' red ' ;
}
} ) ;
confirm ({ titlestring , contentstring |number |array <string |number > isRequiredbuttonFlow'auto' | 'row' | 'column' default 'auto'oktitlestring default 'OK'styleobject , callbackfunction }, canceltitlestring default 'Cancel'styleobject , callbackfunction }, }) : Promise
e . g .
this . dialogbox . confirm ( {
content : ' Are you ready? ' ,
} ) ;
this . dialogbox . confirm ( {
content : ' Are you ready? ' ,
ok : {
callback : ( ) => {
this . dialogbox . alert ( ' Very good! ' ) ;
} ,
} ,
} ) ;
this . dialogbox . confirm ( {
title : ' title ' ,
content : [ ' come on! ' , ' go! ' ] ,
ok : {
text : ' Y ' ,
style : {
color : ' red '
} ,
callback : ( ) => {
this . dialogbox . alert ( ' Good! ' ) ;
} ,
} ,
cancel : {
text : ' N ' ,
style : {
color : ' blue '
} ,
callback : ( ) => {
this . dialogbox . alert ( ' Hurry up！ ' ) ;
} ,
} ,
} ) ;
this . dialogbox . confirm ( {
title : ' title ' ,
content : [ ' come on! ' , ' go! ' ] ,
ok : {
text : ' Y ' ,
style : {
color : ' red '
}
} ,
cancel : {
text : ' N ' ,
style : {
color : ' blue '
}
} ,
} ) . then ( ( event ) => {
if ( event . button ) {
this . dialogbox . alert ( ` You selected ${ event . button . text } ` ) ;
} else {
this . dialogbox . alert ( ' Dialog cancelled ' ) ;
}
} ) ;
pop ({ titlestring , contentstring |number |array <string |number > isRequiredbuttonFlow'auto' | 'row' | 'column' default 'auto'btnstitlestring default 'OK'styleobject , callbackfunction }] }) : Promise
e . g .
this . dialogbox . pop ( {
title : ' Animals ' ,
content : ' Which animal do you like? ' ,
btns : [
{
text : ' Frog ' ,
callback : ( ) => {
this . dialogbox . alert ( ' Ribbit! ' ) ;
} ,
} ,
{
text : ' Dog ' ,
callback : ( ) => {
this . dialogbox . alert ( ' Woof! ' ) ;
} ,
} ,
{
text : ' Cat ' ,
callback : ( ) => {
this . dialogbox . alert ( ' Meow! ' ) ;
} ,
}
]
} ) ;
this . dialogbox . pop ( {
title : ' Animals ' ,
content : ' Which animal do you like? ' ,
btns : [
{
text : ' Frog '
} ,
{
text : ' Dog '
} ,
{
text : ' Cat '
}
]
} ) . then ( event => {
if ( event . button ) {
this . dialogbox . alert ( [
` You selected ${ event . button . text } ` ,
` It was button index ${ event . index } `
] ) ;
} else {
this . dialogbox . alert ( [
' Dialog was dismissed without selection ' ,
' Index for this event is always -1 '
] ) ;
}
} ) ;
this . dialogbox . pop ( {
title : ' Animals with Stacked Buttons ' ,
content : ' Which animal do you like? ' ,
buttonFlow : ' column ' ,
btns : [
{
text : ' Frog '
} ,
{
text : ' Dog '
} ,
{
text : ' Cat '
}
]
} ) . then ( event => {
if ( event . button ) {
this . dialogbox . alert ( [
` You selected ${ event . button . text } ` ,
` It was button index ${ event . index } `
] ) ;
} else {
this . dialogbox . alert ( [
' Dialog was dismissed without selection ' ,
' Index for this event is always -1 '
] ) ;
}
} ) ;
npm install react-native-dialogbox --save
import React , { Component } from ' react ' ;
import { View , Text , StyleSheet } from ' react-native ' ;
import DialogBox from ' react-native-dialogbox ' ;
export default class App extends Component {
handleOnPress = ( ) => {
this . dialogbox . alert ( 1 ) ;
} ,
render ( ) {
return (
< View style = { styles . container } >
< Text style = { styles . btn } onPress = { this . handleOnPress } > click me ! < / Text >
{ }
< DialogBox ref = { dialogbox => { this . dialogbox = dialogbox } } / >
< / View >
) ;
} ,
} ;
