1.0.4 • Published 7 years ago

react-native-modal-pay v1.0.4

Weekly downloads
3
License
MIT
Repository
github
Last release
7 years ago

React Native Pay

Medium Build npm version NPM downloads NPM downloads React version Platform npm

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

PropTypeDescription
showboolShow the pay.
passWordType?stringPassword type for keyboard. Default 'numeric'.
passWordLen?numberPassword's length.Default 6.
loadingScale?stringLoad the image size after the input is complete.Default 'large'.
lang?objectWord 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.