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.