StatusNeo

Auto-Read OTP from SMS in React Native (Android & iOS)

One-Time Passwords (OTP) are a common method for user verification in mobile apps. To create a smooth user experience, it’s ideal for the app to auto-read OTP from incoming SMS, eliminating the need for manual entry.

In this post, we’ll explore how to implement SMS-based OTP auto-reading in React Native, covering both Android and iOS platforms.

🔧 Prerequisites

• React Native version >= 0.63
• Android SDK setup
• Xcode setup for iOS
• Basic knowledge of native module linking
• Optional: React Native CLI (not Expo, unless using EAS with plugins)

📦 Step 1: Install Dependencies

To enable auto-reading SMS OTPs, we’ll use platform-specific libraries:

Android

For Android, you can use:

npm install react-native-sms-retriever

This library uses the Google SMS Retriever API, which allows auto-retrieval without needing SMS read permissions.

iOS

iOS does not allow SMS access, but Apple introduced Security Code AutoFill via the keyboard in iOS 12+. The OTP can be fetched only if the SMS follows a specific format.

No additional package is required for iOS – just format the SMS correctly.

⚙️ Step 2: Android Setup

1. Link the library

For RN < 0.60:

react-native link react-native-sms-retriever

RN >= 0.60 uses autolinking.

2. Modify AndroidManifest.xml

No SMS permission needed since SMS Retriever API doesn’t require it. Just ensure your app has internet permission:

<uses-permission android:name="android.permission.INTERNET" />

3. Create Hash for App Signature

Google requires an 11-character app hash in your OTP SMS.

You can generate it using:

import SmsRetriever from 'react-native-sms-retriever';

SmsRetriever.getAppHash().then(hash => {
  console.log('App hash:', hash);
});

4. Format Your SMS Correctly

Google SMS Retriever expects:

<#> Your OTP is 123456
AppName: [Your App]
[11-char hash]

👨‍💻 Implementing in React Native (Android)

import React, { useEffect, useState } from 'react';
import { TextInput, Button, View, Text } from 'react-native';
import SmsRetriever from 'react-native-sms-retriever';

export default function OTPComponent() {
  const [otp, setOtp] = useState('');

  useEffect(() => {
    startSMSListener();
  }, []);

  const startSMSListener = async () => {
    try {
      const registered = await SmsRetriever.startSmsRetriever();
      if (registered) {
        SmsRetriever.addSmsListener(event => {
          const message = event.message;
          const otpMatch = message.match(/\d{4,6}/);
          if (otpMatch) {
            setOtp(otpMatch[0]);
          }
          SmsRetriever.removeSmsListener();
        });
      }
    } catch (error) {
      console.log('Error starting SMS Retriever', error);
    }
  };

  return (
    <View>
      <Text>Enter OTP</Text>
      <TextInput value={otp} onChangeText={setOtp} keyboardType="number-pad" />
      <Button title="Submit" onPress={() => console.log('OTP submitted:', otp)} />
    </View>
  );
}

🍎 iOS Auto-Fill Support

1. Format the OTP SMS

To support AutoFill in iOS, structure your OTP SMS like this:

123456 is your verification code.

YourAppName

OR better:

YourAppName: 123456

Make sure:

• OTP is at the beginning of the message or follows your app name.
• The user has previously interacted with your app.
• You use a <TextInput> with textContentType="oneTimeCode".

2. React Native iOS Code

<TextInput
  value={otp}
  onChangeText={setOtp}
  keyboardType="number-pad"
  textContentType="oneTimeCode"
  autoComplete="sms-otp"
/>

⚠️ iOS does not allow programmatic reading of SMS – the OS fills it via the keyboard based on message matching.

🧪 Testing Tips

Android:

• Use a real device (emulators usually can’t receive SMS).
• Send SMS from another phone or SMS testing tool with correct hash.

iOS:

• Use a real device running iOS 12+.
• Send SMS from a real device or simulate via Apple Business Register (for internal testing).

🚫 Known Limitations

✅ Conclusion

Auto-reading OTPs in React Native enhances user experience but comes with platform-specific constraints. Android allows full automation via SMS Retriever API, while iOS relies on the system’s secure AutoFill mechanism.

By following the proper SMS formats and integrating native capabilities, you can provide a seamless OTP experience on both platforms.

🔗 Useful Links

• Google SMS Retriever API
• Apple AutoFill Security Code