CODEWITHSUNDEEP
react-nativetextinput
sejn
sejn

Reputation: 2674

How to automatically paste the one time code which is received in SMS in react-native text input

I am using Textinput from react-native. How can I paste the otp or code automatcally in the textinput box.

Upvotes: 13

Views: 26798

Answers (7)

Zero
Zero

Reputation: 1

create new route and paste this code and try it after u send the verification code it will autofill the otp

import { useState } from "react";
import {
  Keyboard,
  Text,
  TextInput,
  TouchableWithoutFeedback,
  View,
} from "react-native";
const Contacts = () => {
  const [value, onChangeText] = useState("");
  return (
    <TouchableWithoutFeedback
      onPress={() => {
        Keyboard.dismiss();
      }}
    >
      <View style={{ flex: 1 }}>
        <TextInput
          // autoFocus={true}
          value={value}
          onChangeText={onChangeText}
          keyboardType="number-pad"
        />
        <Text>contacts</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};
export default Contacts;

Upvotes: 0

arnaudambro
arnaudambro

Reputation: 2673

You have to put textContentType="oneTimeCode" and keyboardType="numeric" on your TextInput. [EDIT 2023-01-22] some people (@TaiyrBegeyev) says that it's keyboardType="number-pad" instead, I couldn't try it again so... your move !

If you need to handle the code, also add a onChangeText prop to the TextInput

and FINALLY, the most important, if you don't see iOS poping up your code coming from SMS, check which message you're sending. In my case, in French,

  • Veuillez saisir le code ${code} dans l'application is working
  • Veuillez entrer ce code dans l'application : ${code} is NOT working

I've been checking RN side for hours, and finally changing the SMS was the solution.

Upvotes: 0

Melissa Pastore
Melissa Pastore

Reputation: 21

If anyone else is looking for how to do this in React Native web in a mobile browser, you do not need textContentType since this is an iOS only prop. You can do it by simply auto focusing your input. The code will autofill to whatever input is focused when the user taps on the code.

   <TextInput
     autoFocus={true}
     value={value}
     caretHidden={true}
     onChangeText={onChangeText}
     keyboardType="number-pad"
     />

Upvotes: 1

Simon
Simon

Reputation: 6533

As of react native version 0.66+

Android: Can use the autocomplete set to sms-otp

iOS: Can use textContentType set to oneTimeCode

Upvotes: 10

Ashabu
Ashabu

Reputation: 21

To paste otp automatically from sms in your iOS app in react-native you need to do following steps:

  1. Set textContentType="oneTimeCode"(supported only for iOS devices):
  1. You need to Send sms with the following pattern: <#> code: your otp here.

for e.g we send an sms in your company like this: <#> code: 1234.

P.S. I also have autoFocus = {true} on my otp input.

Upvotes: 2

theonetheycallneo
theonetheycallneo

Reputation: 118

You can use the "oneTimeCode"

For example:

<TextInput style={TEXTHEADER} textContentType="oneTimeCode" />

Online reference:

https://reactnative.dev/docs/textinput#textcontenttype

Upvotes: 2

Ishara Sandun
Ishara Sandun

Reputation: 737

Easiest way is to use SMS listening built in packages.

https://www.npmjs.com/package/react-native-android-sms-listener

https://www.npmjs.com/package/react-native-otp-verify

If you're using react-native-android-SMS-listner package, you can use a code as follows.

let subscription = SmsListener.addListener(message => {
  let verificationCodeRegex = /Your verification code: ([\d]{6})/

  if (verificationCodeRegex.test(message.body)) {
    let verificationCode = message.body.match(verificationCodeRegex)[1]

    YourPhoneVerificationApi.verifyPhoneNumber(
      message.originatingAddress,
      verificationCode
    ).then(verifiedSuccessfully => {
      if (verifiedSuccessfully) {
        subscription.remove()
        return
      }

      if (__DEV__) {
        console.info(
          'Failed to verify phone `%s` using code `%s`',
          message.originatingAddress,
          verificationCode
        )
      }
    })
  }
})

If youre using react-native-otp-verify you can follow the following tutorial

https://tech.goibibo.com/building-otp-verification-component-in-react-native-with-auto-read-from-sms-2a9a400015b0

Hope this helps

Upvotes: -4

Related Questions