1.0.4 • Published 7 years ago
react-native-modal-pay v1.0.4
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.