Auto Read SMS react native

STEP1:

npm i react-native-otp-textinput

Step 2:

npm i react-native-sms-retriever

OTP Input View UI

<OTPTextInput

ref={otpInputRef} //Its refference Value

containerStyle={styles.textInputContainer}

textInputStyle={styles.roundedTextInput}

inputCount={6}

useRef

tintColor=”#E9E9E9"

handleTextChange={(text) => setOTP({ otpInput: text })}

/>

Style UI

const styles = StyleSheet.create({

textInputContainer: {

marginBottom: 20,

},

roundedTextInput: {

borderRadius: 10,

borderWidth: 4,

backgroundColor: “#E9E9E9”,

},

let otpInputRef = useRef(null);

SMS Retriver Logic:

React.useEffect(() => {

try {

const registered = SmsRetriever.startSmsRetriever();

if (registered) {

SmsRetriever.addSmsListener(event => {

const otp = /(\d{6})/g.exec(event.message)[1];

console.log(otp);

// e.otpInputData.current.setValue(“123456”);

otpInputRef?.current.setValue(otp);

SmsRetriever.removeSmsListener();

});

}

} catch (error) {

console.log(JSON.stringify(error));

}

}, []);