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

Question

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

Answer 1

As of react native version 0.66+

Android: Can use the autocomplete set to sms-otp

iOS: Can use textContentType set to oneTimeCode

Answer 2

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):

2. 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.

Answer 3

You can use the "oneTimeCode"

For example:

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

Online reference:

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

Answer 4

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"
     />

Answer 5

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.

Answer 6

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