How to build a OTP Component in React native with counter timer and resend otp functionality using functional component

Question

I have tried several articles to build OTP component which is customizable but hard luck getting it

Some of them are running on IOS platform but not on android

Finally, I completed that after a lot of struggle as a newbie to react-native

Answer 1

This is done using React functional component and React hooks

yarn add react-native-confirmation-code-input
yarn add react-native-countdown-component
yarn add react-redux

import React, { useState, useRef } from "react";
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  Alert
} from "react-native";
import CountDown from 'react-native-countdown-component';
import CodeInput from 'react-native-confirmation-code-input';
import Icon from "react-native-vector-icons/FontAwesome5";
import { Input, Button } from "react-native-elements";
import { useSelector, useDispatch } from "react-redux";
import * as AuthActions from "../store/actions/auth";

export const OtpVerifyScreen = props => {
  const auth = useSelector(state => state.auth);
  const dispatch = useDispatch();
  const inputRef = useRef('codeInputRef2');
  const [counter, SetCounter] = useState(150); // Set here your own timer configurable
  const [random, SetRandom] = useState(Math.random());
  const [disabled, setDisabled] = useState(true)
  const handleResend = () => {
    SetRandom(Math.random())
    // Handle Resend otp action here
  }
  const handleVerify = (otp) => {
  // Handle the verification logic here
  // dispatch verify action
  };

  return (
    <View style={styles.container}>
      <Text style={{ padding: 10 }}>Enter OTP</Text>
      <View style={styles.otp}>
        <View style={{ height: 100, width: 200, marginLeft: 10 }}>
          <CodeInput
            ref={inputRef}
            // secureTextEntry
            className={'border-b'}
            activeColor='rgba(0, 0, 0, 1)'
            inactiveColor='rgba(0, 0, 0, 1)'
            space={10}
            keyboardType="numeric"
            autoFocus={true}
            codeLength={6}
            size={20}
            inputPosition='left'
            onFulfill={(code) => handleVerify(code)}
          />
        </View>
        <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
          <CountDown
            key={random}
            until={counter}
            size={15}
            onFinish={() => setDisabled(() => false)}
            separatorStyle={{ color: 'black' }}
            digitStyle={{ backgroundColor: '#FFF' }}
            digitTxtStyle={{ color: 'black' }}
            timeToShow={['M', 'S']}
            showSeparator
            timeLabels={{ m: '', s: '' }}
          />
          <Button disabled={disabled} style={{ marginLeft: 10 }} title="RESEND" onPress={handleResend}></Button>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "flex-start",
    marginTop: 20,
  },
  otp: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "flex-start"
  }
});

export default OtpVerifyScreen;

Hope this helps Happy Coding !!