react-native-otpview/src/components/otp/PinView.js

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

import React, { Component } from "react";
import { View, Text, StyleSheet ,TextInput} from "react-native";
import PropTypes from "prop-types";
import styles from './PinViewStyle';




export default class PinView extends Component {
    constructor(props) {
        super(props);
    }

    onComplete = () => {
        this.props.onComplete();
    };

    renderPin = () => { };

    checkForComplete = index => {
        const { pinLength, pinValue } = this.props;
        if (index + 1 === pinLength && pinLength === pinValue.length) {
            setTimeout(() => {
                this.onComplete();
            }, 200);
        }
    };

    renderSinglePin = index => {
        const { pinValue } = this.props;
        return (
            <View style={styles.pinStyle} key={index}>
                <Text
                    textContentType="oneTimeCode"
                    style={styles.textStyle}>{pinValue[index]}</Text>
                {this.checkForComplete(index)}
            </View>
        );
    };

    render() {
        const { pinLength } = this.props;
        let arrayPin = [];
        for (let index = 0; index < pinLength; index++) {
            arrayPin.push(index);
        }
        return (
            <View style={styles.container}>
                {arrayPin.map(this.renderSinglePin)}
            </View>
        );
    }
}

PinView.propTypes = {
    pinLength: PropTypes.number.isRequired,
    pinValue: PropTypes.string.isRequired,
    onComplete: PropTypes.func.isRequired,
};

PinView.defaultProps = {
    pinLength: 4,
    pinValue: '',
    onComplete: () => { this.onComplete },
};