react-native-popup

0.6.1 • Public • Published

react-native-popup

npm version

This is a custom component for React Native, a simple popup, compatible with ios and android.

Demo

ui

Props

  • isOverlay bool - default true
  • isOverlayClickClose bool - default true

static Methods

  • alert(message: string|number, [...])
    e.g.
 
        this.popup.alert(1);
 
        this.popup.alert(1, 'two', '10 messages at most');
  • tip({ title: string, content: string|number|array<string|number> isRequired, btn: {title: string default 'OK', callback: function}, })
    e.g.
 
        this.popup.tip({
            content: 'come on!',
        });
 
        this.popup.tip({
            title: 'TipTip',
            content: 'come on!',
        });
 
        this.popup.tip({
            content: ['come on!', 'go!'],
            btn: {
                text: 'OKOK',
                style: {
                    color: 'red'
                },
                callback: () => {
                    this.popup.alert('over!');
                },
            },
        });
  • confirm({ title: string, content: string|number|array<string|number> isRequired, ok: {title: string default 'OK', callback: function}, cancel: {title: string default 'Cancel', callback: function}, })
    e.g.
 
        this.popup.confirm({
            content: 'Are you ready?',
        });
 
        this.popup.confirm({
            content: 'Are you ready?',
            ok: {
                callback: () => {
                    this.popup.alert('Very good!');
                },
            },
        });
 
        this.popup.confirm({
            title: 'title',
            content: ['come on!', 'go!'],
            ok: {
                text: 'Y',
                style: {
                    color: 'red'
                },
                callback: () => {
                    this.popup.alert('Good!');
                },
            },
            cancel: {
                text: 'N',
                style: {
                    color: 'blue'
                },
                callback: () => {
                    this.popup.alert('Hurry up!');
                },
            },
        });

Usage

Step 1 - install

    npm install react-native-popup --save

Step 2 - import and use in project

import Popup from 'react-native-popup';
 
class App extends React.Component{
 
    onPressHandle() {
        // alert
        this.popup.alert(1);
    },
 
    render() {
        return (
            <View style={styles.container}>
 
                <Text style={styles.btn} onPress={this.onPressHandle.bind(this)}>click me !</Text>
 
                {/** Popup component */}
                <Popup ref={popup => this.popup = popup }/>
                {/** or <Popup ref={popup => this.popup = popup } isOverlay={false} isOverlayClickClose={false}/> */}
 
            </View>
        );
    },
    
};

Readme

Keywords

Package Sidebar

Install

npm i react-native-popup

Weekly Downloads

5

Version

0.6.1

License

ISC

Last publish

Collaborators

  • rsk
  • zooble