Auto-Reading OTP in React Native with *react-native-otp-auto-verify

Published: 2 days ago (March 18, 2026 at 06:34 AM EDT)

3 min read

Source: Dev.to

react-native-otp-auto-verify

One of the small but painful UX problems in mobile apps is OTP verification.
Traditionally, users have to manually type a 4–6 digit code from an SMS, which can lead to abandoned flows and frustrated users.

react-native-otp-auto-verify is a library that automatically listens to incoming SMS messages on Android and extracts the OTP when it arrives—no manual input needed ✨.
It uses Android’s SMS Retriever API to:

Listen for incoming SMS that contains your OTP.
Extract the OTP code (e.g., 4–6 digits) without user interaction.
Provide easy hooks and imperative APIs for listeners.

Note: This works on Android only; iOS does not allow arbitrary SMS reads for security/privacy reasons.

How It Works

Generate App Hash

The library exposes a method to generate the app’s hash, which you must embed in the OTP SMS payload sent from your backend.

import { getHash } from "react-native-otp-auto-verify";

const [hash] = await getHash(); // e.g., "AbCdEfGhIjK"

Format SMS Correctly

The SMS must include the hash at the end, prefixed by “ to satisfy the SMS Retriever format.

 Your verification code is 123456
AbCdEfGhIjK

Only messages that contain this hash will be delivered to the app.

Listen & Extract the Code

You can use the provided hook or an imperative listener.

Hook Example

import React, { useEffect } from "react";
import { View, Text } from "react-native";
import { useOtpVerification } from "react-native-otp-auto-verify";

export function OtpScreen() {
  const { otp, startListening, stopListening } = useOtpVerification({
    numberOfDigits: 6,
  });

  useEffect(() => {
    startListening();
    return () => stopListening();
  }, []);

  return (
    
      {otp ?? "Waiting for SMS…"}
    
  );
}

Imperative Listener Example

import { activateOtpListener, removeListener } from "react-native-otp-auto-verify";

const handler = (code) => {
  console.log("Received OTP:", code);
};

activateOtpListener(handler);

// When you no longer need the listener
removeListener();

API Overview

Function	Description
`getHash()`	Returns the Android app hash to embed in SMS.
`useOtpVerification(options)`	Hook that starts/stops the listener and provides the OTP, timeout errors, etc.
`activateOtpListener(handler)`	Imperative listener that invokes `handler` with the extracted OTP.
`removeListener()`	Manually removes the active listener.
`extractOtp(sms, numberOfDigits)`	Utility to parse an OTP from a raw SMS string.

Alternatives & Compatibility

There are other packages (e.g., react-native-otp-verify), but many are outdated or don’t support newer React Native architectures.
react-native-otp-auto-verify works with React Native ≥ 0.60+ and supports autolinking.

Important Considerations

The SMS must include the app hash; otherwise the platform won’t deliver it.
The listener times out after ~5 minutes—handle retries in your UI.

Installation

npm install react-native-otp-auto-verify

Usage Summary

Generate the app hash on the client (getHash).
Include the hash in the OTP SMS sent from your backend (see format above).
Start the listener in your React Native component (hook or imperative API).
Receive the OTP automatically when the SMS arrives.

Resources

Full code and documentation: react‑native‑otp‑auto‑verify on GitHub