react-native-dialogbox
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
default true
default true
optional callback called when overlay dismisses dialogbox
optional override for system styles
message
: string|number, […]) : Promise e.g.
dialogbox.alert(1);
dialogbox.alert(1, 'two', '10 messages at most');
dialogbox.alert('promise example').then(() => dialogbox.alert('dismissed'));
title
: string, content
: string|number|array<string|number> isRequired
, btn
: {title
: string default 'OK'
, style
: object, callback
: function}, }) : Promise e.g.
dialogbox.tip({
content: 'come on!',
});
dialogbox.tip({
title: 'TipTip',
content: 'come on!',
});
dialogbox.tip({
content: ['come on!', 'go!'],
btn: {
text: 'OKOK',
callback: () => {
dialogbox.alert('over!');
},
},
});
dialogbox.tip({
content: 'promise example',
btn: {
text: 'done'
}
}).then(() => (dialogbox.alert('done')));
dialogbox.tip({
content: 'style example',
style: {
color: 'red';
}
});
title
: string, content
: string|number|array<string|number> isRequired
, buttonFlow
: ‘auto’ | ‘row’ | ‘column’ default 'auto'
, ok
: {title
: string default 'OK'
, style
: object, callback
: function}, cancel
: {title
: string default 'Cancel'
, style
: object, callback
: function}, }) : Promise e.g.
dialogbox.confirm({
content: 'Are you ready?',
});
dialogbox.confirm({
content: 'Are you ready?',
ok: {
callback: () => {
dialogbox.alert('Very good!');
},
},
});
dialogbox.confirm({
title: 'title',
content: ['come on!', 'go!'],
ok: {
text: 'Y',
style: {
color: 'red'
},
callback: () => {
dialogbox.alert('Good!');
},
},
cancel: {
text: 'N',
style: {
color: 'blue'
},
callback: () => {
dialogbox.alert('Hurry up!');
},
},
});
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) {
dialogbox.alert(`You selected ${event.button.text}`);
} else {
dialogbox.alert('Dialog cancelled');
}
});
title
: string, content
: string|number|array<string|number> isRequired
, buttonFlow
: ‘auto’ | ‘row’ | ‘column’ default 'auto'
, btns
: [{title
: string default 'OK'
, style
: object, callback
: function}] }) : Promise e.g.
dialogbox.pop({
title: 'Animals',
content: 'Which animal do you like?',
btns: [
{
text: 'Frog',
callback: () => {
dialogbox.alert('Ribbit!');
},
},
{
text: 'Dog',
callback: () => {
dialogbox.alert('Woof!');
},
},
{
text: 'Cat',
callback: () => {
dialogbox.alert('Meow!');
},
}
]
});
dialogbox.pop({
title: 'Animals',
content: 'Which animal do you like?',
btns: [
{
text: 'Frog'
},
{
text: 'Dog'
},
{
text: 'Cat'
}
]
}).then(event => {
if (event.button) {
dialogbox.alert([
`You selected ${event.button.text}`,
`It was button index ${event.index}`
]);
} else {
dialogbox.alert([
'Dialog was dismissed without selection',
'Index for this event is always -1'
]);
}
});
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) {
dialogbox.alert([
`You selected ${event.button.text}`,
`It was button index ${event.index}`
]);
} else {
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 {
constructor(props) {
super(props);
this.dialogbox = React.createRef();
this.handleOnPress = this.handleOnPress.bind(this);
}
handleOnPress() {
// alert
this.dialogbox.current.alert(1);
},
render() {
return (
<View style={styles.container}>
<Text style={styles.btn} onPress={this.handleOnPress}>click me !</Text>
{/** dialogbox component */}
<DialogBox ref={this.dialogbox}/>
</View>
);
},
};
Author: victoriafrench
GitHub: https://github.com/victoriafrench/react-native-dialogbox
#react-native #programming