react-native-otpview/src/container/Index.js

autoplaced otp read otp from server and place it on ui for android and ios

import React, { Component } from 'react';
import { View, NativeModules, PermissionsAndroid, Platform, TextInput } from 'react-native';
import PinView from '../components/otp/PinView';
import KeyboardView from '../components/keyboard/Keyboard';
import PropTypes from "prop-types";
import styles from './OtpStyle';
const OtpManager = NativeModules.OtpManager;

async function requestCameraPermission() {
	try {
		const granted = await PermissionsAndroid.request(
			PermissionsAndroid.PERMISSIONS.RECEIVE_SMS,
			PermissionsAndroid.PERMISSIONS.READ_SMS,
			PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE,
			{
				// title: 'Cool Photo App Camera Permission',
				// message:
				// 	'Cool Photo App needs access to your camera ' +
				// 	'so you can take awesome pictures.',
				// buttonNeutral: 'Ask Me Later',
				// buttonNegative: 'Cancel',
				// buttonPositive: 'OK',
			},
		);
		if (granted === PermissionsAndroid.RESULTS.GRANTED) {
			console.log('You can use the camera');
		} else {
			console.log('Camera permission denied');
		}
	} catch (err) {
		console.warn(err);
	}
}

export default class OtpMaster extends Component {

	constructor(props) {
		super(props);
		this.state = {
			isLoading: false,
			code: "",
			isComplete: false,
		};
	}

	// async componentWillMount() {
	// 	await requestCameraPermission();

	// 	if (Platform.OS === 'android') {
	// 		OtpManager.startService(this.displayResult);
	// 	}
	// }

	async componentDidMount() {
		await requestCameraPermission();

		if (OtpManager) {
			console.log("Manager not null ::::::: ");
		} else {
			console.log("Manager null ::::::: ");
		}
		if (Platform.OS === 'android') {
			OtpManager.startService(this.displayResult);
		}
	}

	componentWillUnmount() {
		OtpManager.stopService();
	}


	displayResult = (result) => {


		var otpStr = result;
		var last4 = otpStr.slice(-4);

		if (isNaN(last4)) {
			this.setState({
				code: last4
			}, () => {
				if (Platform.OS === 'android') {
					OtpManager.stopService();
					OtpManager.startService(this.displayResult);
				}
			});
		}

	}


	onComplete = () => {
		if (!this.state.isComplete) {
			// this.setState({ isLoading: true, isComplete: true }, () => this.verifyUserCall());
		}
	};

	onPressKey = keyValue => {
		if (this.state.code.length < this.props.codeLength) {
			this.setState({
				code: this.state.code + keyValue,
			});
		}
	};

	onPressDelete = () => {
		if (this.state.code.length <= 0) return;
		this.setState({
			code: this.state.code.slice(0, -1),
			isComplete: false,
		});
	};

	render() {
		return (
			<View style={styles.container}>
				<View style={{ flex: 1, width: "100%" }}>
					{
						this.props.platFormMode === "ios" ?
							<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
								<TextInput
									maxLength={this.props.codeLength < 6 ? this.props.codeLength : 6}
									autoFocus={true}
									textContentType=" "
									placeholder="OTP"
									returnKeyType="default"
									keyboardType="phone-pad"
									style={{ backgroundColor: 'white', color: 'gray', textAlign: 'center', fontSize: 18, borderColor: "gray", borderBottomWidth: 1, width: "90%", height: 45, marginHorizontal: "10%" }}
								/>
							</View>
							:
							<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
								<PinView
									pinLength={this.props.codeLength < 6 ? this.props.codeLength : 6}
									pinValue={this.state.code}
									onComplete={this.onComplete} />

								<KeyboardView
									onKeyPress={this.onPressKey}
									onDeletePress={this.onPressDelete}
									keyboardBorderRadius={10}
									keyboardBackground={'lightgray'} />
							</View>
					}

				</View>
			</View>
		);
	}
}

OtpMaster.defaultProps = {
	// for otp view
	codeLength: 4,
	pinValue: '',
	onComplete: () => { this.onComplete },
	platFormMode: 'ios',
	// for otp keyboard
	onKeyPress: () => { },
	onDeletePress: () => { },
	keyboardBackground: 'darkgray',
	keyboardBorderRadius: 30

};

OtpMaster.propTypes = {
	// for otp view
	codeLength: PropTypes.number.isRequired,
	pinValue: PropTypes.string.isRequired,
	onComplete: PropTypes.func.isRequired,
	platFormMode: PropTypes.any,
	// for keyboard 
	onKeyPress: PropTypes.func.isRequired,
	onDeletePress: PropTypes.func.isRequired,
	keyboardBackground: PropTypes.any,
	keyboardBorderRadius: PropTypes.any
};