15

React Native How to auto fetched the OTP in the textfield from the mobile sms, should support both ios and android?

Binisha
  • 167
  • 1
  • 1
  • 8
  • 1
    How do you send the SMS? Are you using firebase by any chance? Firebase has an auto verification mechanism which would feel the same as "auto fetch OTP". – hannojg Dec 31 '20 at 10:00

3 Answers3

9

For Android : Google SMS Retriever API

https://github.com/Rajat421//react-native-sms-retriever-api#readme

For iOS :

You will use props textContentType of TextInput

<TextInput
    value={this.state.codeOTP}
    textContentType="oneTimeCode"
/>

You can test before with this example :

Tested on real device, and connect with the Apple account

<TextInput
    value={this.state.codeOTP}
    textContentType="emailAddress"
/>
aelarassi
  • 113
  • 4
5

Native support added for react-native versions 0.66+!!

Android now has autoComplete="sms-otp" prop.

<TextInput
    ...
    autoComplete="sms-otp" // android
    textContentType="oneTimeCode" // ios
/>
Scott Jungwirth
  • 6,105
  • 3
  • 38
  • 35
1

Currently there is no support for ios till now for otp auto read functionality using react-native.

But for android you can use this library: https://github.com/faizalshap/react-native-otp-verify#readme

Ankush Rishi
  • 2,861
  • 8
  • 27
  • 59
  • cannot install the packege react-native-otp-verify,error occur after linking ,as cannot find symbol import com.faizal.OtpVerify.RNOtpVerifyPackage; – Binisha Mar 29 '19 at 06:06