React Native Pay

Installation

Using npm:

$ npm i react-native-modal-pay -S

Using yarn:

$ yarn add react-native-modal-pay

Usage

/**
|--------------------------------------------------
| react-native-pay demo
|--------------------------------------------------
*/
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { PayMny } from 'react-native-modal-pay';


class RnPay extends React.Component {
    constructor(props) {
        super(props)

    }

    _pay() {
        this.payMny._invokePay(true)
    }

    _onPay(va) {
        let cl = setTimeout(() => {
            if (va) {
                clearTimeout(cl)
                this.payMny._onErrorHandler('Password error!')
            }
        }, 2000);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text onPress={() => this._pay()} style={styles.txt}>RnPay:$10000.00</Text>

                <PayMny
                    show={true}
                    ref={(payMny) => this.payMny = payMny}

                    onChange={(va) => this._onPay(va)}

                />
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: '26%',
        // justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ccc',
    },
    txt: {
        color: '#fff',
        fontSize: 16
    }
});

export default RnPay;

Props

Prop	Type	Description
show	bool	Show the pay.
passWordType	?string	Password type for keyboard. Default 'numeric'.
passWordLen	?number	Password's length.Default 6.
loadingScale	?string	Load the image size after the input is complete.Default 'large'.
lang	?object	Word description.Default {title: 'Enter your password',forget: 'Forget password ?'}.
forgetCallBack	() => <any>	Forgot Password Touch event.
onChange	(password) => <any>	Callback is called after the password is entered, With parameter password.

Advanced Usage

You can use local calls to avoid redrawing the entire component:

this.refs.pay._invokePay(bool)

Platform Support

Both ios and android.