react-native-otpview/src/components/keyboard/Keyboard.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, TouchableOpacity, Image } from "react-native";
import PropTypes from "prop-types";
import styles from './KeyboardStyle';
const back_arrow = require("../../Images/back_arrow.png")


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

    onPressKey = keyValue => () => {
        this.props.onKeyPress(keyValue);
    };

    onPressDelete = () => {
        this.props.onDeletePress();
    };

    onPressNothing = () => {

    };

    //render function

    renderKey = keyValue => {
        if (keyValue === "-1") {
            return (
                <TouchableOpacity
                    style={[styles.keyStyle, { backgroundColor: 'transparent' }]}
                    onPress={this.onPressNothing}
                    activeOpacity={.8}
                >
                    <Text style={styles.textKeyStyle} />
                </TouchableOpacity>
            );
        } else if (keyValue === "-2") {
            return (
                <TouchableOpacity
                    style={[styles.keyStyle, { backgroundColor: this.props.keyboardBackground, borderRadius: this.props.keyboardBorderRadius }]}
                    onPress={this.onPressDelete}
                    activeOpacity={.8}
                >
                    <Image style={styles.deleteContainer} source={back_arrow} />
                </TouchableOpacity>
            );
        } else {
            return (
                <TouchableOpacity
                    style={[styles.keyStyle, { backgroundColor: this.props.keyboardBackground, borderRadius: this.props.keyboardBorderRadius }]}
                    onPress={this.onPressKey(keyValue)}
                    activeOpacity={.8}
                >
                    <Text style={styles.textKeyStyle}>{keyValue}</Text>
                </TouchableOpacity>
            );
        }
    };

    render() {
        return (
            <View style={styles.container}>

                {/* Keyboard 1 to 3 */}
                <View style={styles.rowStyle}>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("1")}
                    </View>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("2")}
                    </View>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("3")}
                    </View>
                </View>

                {/* Keyboard 4 to 6 */}
                <View style={styles.rowStyle}>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("4")}
                    </View>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("5")}
                    </View>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("6")}
                    </View>
                </View>

                {/* Keyboard 7 to 9 */}
                <View style={styles.rowStyle}>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("7")}
                    </View>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("8")}
                    </View>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("9")}
                    </View>
                </View>

                {/* Keyboard 0 to Delete  */}
                <View style={styles.rowStyle}>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("-1")}
                    </View>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("0")}
                    </View>
                    <View style={styles.keyboardKey}>
                        {this.renderKey("-2")}
                    </View>
                </View>
            </View>
        );
    }
}

Keyboard.propTypes = {
    onKeyPress: PropTypes.func.isRequired,
    onDeletePress: PropTypes.func.isRequired,
    keyboardBackground: PropTypes.any,
    keyboardBorderRadius: PropTypes.any
};

Keyboard.defaultProps = {
    onKeyPress: () => { },
    onDeletePress: () => { },
    keyboardBackground: 'darkgray',
    keyboardBorderRadius: 30
};