react-native-otp-auto-verify 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,300 +1,452 @@
1
- # react-native-otp-auto-verify
2
-
3
-
4
- [![npm version](https://img.shields.io/npm/v/react-native-otp-auto-verify.svg?style=flat-square)](https://www.npmjs.com/package/react-native-otp-auto-verify) [![npm downloads](https://img.shields.io/npm/dm/react-native-otp-auto-verify.svg?style=flat-square)](https://www.npmjs.com/package/react-native-otp-auto-verify) [![license](https://img.shields.io/npm/l/react-native-otp-auto-verify.svg?style=flat-square)](https://github.com/kailas-rathod/react-native-otp-auto-verify/blob/main/LICENSE) [![typescript](https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=flat-square)](https://www.typescriptlang.org/)
5
-
6
- **react-native-otp-auto-verify** is a lightweight and secure React Native OTP auto-verification library for Android, built on the official Google SMS Retriever API. It enables automatic OTP detection without requiring READ_SMS or RECEIVE_SMS permissions, ensuring full Google Play Store compliance and enhanced user trust. Designed for modern authentication flows, this library is ideal for fintech apps, banking applications, e-commerce platforms, and secure login systems.
7
-
8
- With minimal dependencies and clean architecture, it integrates seamlessly into both React Native Old Architecture and the New Architecture (TurboModule) environments. The solution improves user experience by eliminating manual OTP entry on Android while maintaining strong server-side validation standards.
9
-
10
- Works best for onboarding/login flows in **banking**, **fintech**, and authentication-heavy apps.
11
- Supports both RN Old Architecture and React Native **New Architecture** (TurboModule).
12
- **Android**: automatic OTP detection.
13
- **iOS**: auto-OTP is not supported—use manual OTP entry as fallback.
14
-
15
- **Connect:** [GitHub](https://github.com/kailas-rathod/react-native-otp-auto-verify) · [npm](https://www.npmjs.com/package/react-native-otp-auto-verify) · [Issues](https://github.com/kailas-rathod/react-native-otp-auto-verify/issues) · [License](https://github.com/kailas-rathod/react-native-otp-auto-verify/blob/main/LICENSE)
16
-
17
- ---
18
- <img width="1536" height="1024" alt="otp" src="https://github.com/user-attachments/assets/e4908e99-e7d1-4a96-a6d2-b92c50090db0" />
19
-
20
-
21
- ## Features
22
-
23
- - ✅ **Automatic OTP detection**: receives OTP from matching SMS and exposes it as `otp` (hook) or `extractedOtp` (listener)
24
- - ✅ **No SMS permissions**: no access to inbox, avoids sensitive permissions and reduces compliance friction
25
- - ✅ **App hash security**: OTP SMS must end with your **11-character hash** (only your app can receive it)
26
- - ✅ **Hook + Imperative API**: `useOtpVerification()` for screens, `activateOtpListener()` for custom flows
27
- - ✅ **TypeScript**: typed options and return values
28
- - ✅ **New Architecture ready**: TurboModule implementation; works with Old Architecture too
29
- ---
30
-
31
- ## Platform Support
32
-
33
- | Platform | Support | Notes |
34
- |----------|----------|-------|
35
- | Android | ✅ | Requires Google Play Services on device |
36
- | iOS | ✅ Native Only | Uses iOS Security Code AutoFill (manual tap required) |
37
-
38
- ## Requirements
39
-
40
- - React Native: **0.60+** (autolinking)
41
- - Android: **minSdkVersion 24+**
42
-
43
- ## Installation
44
-
45
- ```sh
46
- npm install react-native-otp-auto-verify
47
- # or
48
- yarn add react-native-otp-auto-verify
49
- # or
50
- pnpm add react-native-otp-auto-verify
51
- ```
52
-
53
-
54
- ## Usage
55
-
56
- ### 1) Get your app hash
57
-
58
- SMS Retriever only delivers messages that include your **11-character app hash**.
59
-
60
- ```ts
61
- import { getHash } from 'react-native-otp-auto-verify';
62
-
63
- const hashes = await getHash();
64
- const appHash = hashes[0]; // send this to your backend
65
- ```
66
-
67
- ### 2) Format your OTP SMS
68
-
69
- Your backend **must** include the app hash at the **end** of the SMS.
70
-
71
- Requirements:
72
-
73
- - Message must be **≤ 140 bytes**
74
- - Must contain a **4–6 digit** OTP
75
- - Must **end with** the app hash from `getHash()`
76
-
77
- Recommended format:
78
-
79
- ```
80
- Dear Kailas Rathod, 321500 is your OTP for mobile authentication. This OTP is valid for the next 15 minutes. Please DO NOT share it with anyone.
81
- uW87Uq6teXc
82
- ```
83
- Note: You do not need `<#>` at the start of the message.
84
-
85
- ### 3) Hook usage (recommended)
86
-
87
- Start listening only while the OTP screen is visible (foreground).
88
-
89
- ```tsx
90
- import React from 'react';
91
- import { Text, View } from 'react-native';
92
- import { useOtpVerification } from 'react-native-otp-auto-verify';
93
-
94
- export function OtpScreen() {
95
- const { hashCode, otp, timeoutError, error, startListening, stopListening } =
96
- useOtpVerification({ numberOfDigits: 6 });
97
-
98
- React.useEffect(() => {
99
- void startListening();
100
- return () => stopListening();
101
- }, [startListening, stopListening]);
102
-
103
- return (
104
- <View>
105
- {!!hashCode && <Text>Hash: {hashCode}</Text>}
106
- {!!otp && <Text>OTP: {otp}</Text>}
107
- {timeoutError && <Text>Timeout. Tap resend and try again.</Text>}
108
- {!!error && <Text>Error: {error.message}</Text>}
109
- </View>
110
- );
111
- }
112
- ```
113
-
114
- ### 4) Imperative usage
115
-
116
- ```ts
117
- import {
118
- activateOtpListener,
119
- removeListener,
120
- } from 'react-native-otp-auto-verify';
121
-
122
- const sub = await activateOtpListener(
123
- (sms, extractedOtp) => {
124
- if (extractedOtp) {
125
- console.log('OTP:', extractedOtp);
126
- }
127
- },
128
- { numberOfDigits: 6 }
129
- );
130
-
131
- // cleanup
132
- sub.remove();
133
- // or
134
- removeListener();
135
- ```
136
-
137
- # iOS OTP AutoFill (Native)
138
-
139
- iOS does **not** allow third-party libraries to read SMS messages.
140
-
141
- Automatic SMS reading is restricted by Apple for privacy and security reasons.
142
- Instead, iOS provides a native feature called **Security Code AutoFill**, which suggests the OTP above the keyboard when properly configured.
143
-
144
- This library does **not** auto-read OTP on iOS.
145
-
146
- ---
147
-
148
- ## How iOS OTP AutoFill Works
149
-
150
- 1. User receives an SMS containing an OTP.
151
- 2. iOS detects the code.
152
- 3. The OTP appears above the keyboard.
153
- 4. User taps the suggestion.
154
- 5. The code fills automatically into the input field.
155
-
156
- No SMS permissions required.
157
-
158
- ---
159
-
160
- ## React Native Setup
161
-
162
- Use the following configuration in your OTP input field:
163
-
164
- ```tsx
165
- <TextInput
166
- style={styles.input}
167
- keyboardType="number-pad"
168
- textContentType="oneTimeCode"
169
- autoComplete="sms-otp"
170
- importantForAutofill="yes"
171
- maxLength={6}
172
- />
173
-
174
- ```
175
-
176
-
177
- ## react-native-otp-auto-verify Architecture Flow
178
- <img width="1536" height="1024" alt="react-native-otp-auto-verify Architecture Flow" src="https://github.com/user-attachments/assets/11582523-81cb-4904-9de0-56af05b3a3b4" />
179
-
180
- ## API Reference
181
-
182
- ### `useOtpVerification(options?)`
183
-
184
- Use this on your OTP screen. It manages:
185
- - getting the app hash (`hashCode`)
186
- - starting/stopping the SMS Retriever listener
187
- - extracting OTP and exposing it as `otp`
188
-
189
- | Property | Type | Default | Description |
190
- |----------|------|---------|-------------|
191
- | `numberOfDigits` | `4 \| 5 \| 6` | `6` | OTP length to extract |
192
- | `hashCode` | `string` | `''` | App hash (send to backend) |
193
- | `otp` | `string \| null` | `null` | Extracted OTP |
194
- | `sms` | `string \| null` | `null` | Full SMS text |
195
- | `timeoutError` | `boolean` | `false` | Timeout occurred |
196
- | `error` | `Error \| null` | `null` | Set when getHash or startListening fails |
197
- | `startListening` | `() => Promise<void>` | — | Start listening |
198
- | `stopListening` | `() => void` | — | Stop listening |
199
-
200
-
201
- ### `getHash(): Promise<string[]>`
202
-
203
- Android only. On iOS returns `[]`.
204
-
205
- ### `activateOtpListener(handler, options?): Promise<{ remove(): void }>`
206
-
207
- Android only. Throws on iOS.
208
-
209
- ### `removeListener(): void`
210
-
211
- Android only. Removes native listeners.
212
-
213
- ### `extractOtp(sms: string, numberOfDigits?: 4 | 5 | 6): string | null`
214
-
215
- Pure helper to extract the OTP from an SMS string.
216
-
217
- ## Timeout behavior
218
-
219
- SMS Retriever waits up to **5 minutes**. When it times out:
220
-
221
- - `timeoutError` becomes `true`
222
- - call `startListening()` again to retry
223
-
224
- ## React Native New Architecture
225
-
226
- This library is built with **TurboModules** and fully supports React Native's **New Architecture**.
227
-
228
- ### What is the New Architecture?
229
-
230
- The New Architecture (also known as Fabric + TurboModules) is React Native's new rendering system and native module architecture that provides:
231
-
232
- - Better performance and type safety
233
- - Synchronous native module calls
234
- - Improved interoperability with native code
235
-
236
- ### Enabling New Architecture
237
-
238
- The library works automatically with both **Old Architecture** and **New Architecture**. No code changes needed.
239
-
240
- **For Android:**
241
-
242
- Enable New Architecture in `android/gradle.properties`:
243
-
244
- ```properties
245
- newArchEnabled=true
246
- ```
247
-
248
- **For iOS:**
249
-
250
- Enable New Architecture in `ios/Podfile`:
251
-
252
- ```ruby
253
- use_react_native!(
254
- :fabric_enabled => true,
255
- # ... other options
256
- )
257
- ```
258
-
259
- Or set the environment variable:
260
-
261
- ```sh
262
- RCT_NEW_ARCH_ENABLED=1 pod install
263
- ```
264
-
265
- ### Compatibility
266
-
267
- - ✅ Works with **Old Architecture** (React Native < 0.68)
268
- - ✅ Works with **New Architecture** (React Native 0.68+)
269
- - ✅ Automatically detects and uses the correct architecture
270
- - ✅ No breaking changes when migrating
271
-
272
- ## Troubleshooting
273
-
274
- - OTP not detected
275
- - Ensure the SMS **ends with** the app hash
276
- - Keep the SMS **≤ 140 bytes**
277
- - Match `numberOfDigits` to your OTP length
278
- - Keep the app in **foreground**
279
- - Listener fails to start
280
- - Ensure Google Play services are available on the device
281
- - Avoid multiple active listeners at once
282
-
283
- ## Example app
284
-
285
- See [`./example`](./example).
286
-
287
- ## Contributing
288
-
289
- See [`CONTRIBUTING.md`](CONTRIBUTING.md).
290
-
291
- ## Publishing
292
-
293
- Maintainers: see [RELEASE_CHECKLIST.md](./RELEASE_CHECKLIST.md) before publishing a new version to npm.
294
-
295
- ## Keywords
296
- react native otp auto verify, react native sms retriever api, automatic otp detection android, react native otp autofill, sms retriever react native, otp verification library react native, google play compliant otp library
297
-
298
- ## License
299
-
300
- [MIT](./LICENSE) — see [LICENSE](./LICENSE) in the repo.
1
+ # react-native-otp-auto-verify
2
+
3
+ [![npm version](https://img.shields.io/npm/v/react-native-otp-auto-verify.svg?style=flat-square)](https://www.npmjs.com/package/react-native-otp-auto-verify) [![npm downloads](https://img.shields.io/npm/dm/react-native-otp-auto-verify.svg?style=flat-square)](https://www.npmjs.com/package/react-native-otp-auto-verify) [![license](https://img.shields.io/npm/l/react-native-otp-auto-verify.svg?style=flat-square)](https://github.com/kailas-rathod/react-native-otp-auto-verify/blob/main/LICENSE) [![typescript](https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=flat-square)](https://www.typescriptlang.org/)
4
+
5
+ **react-native-otp-auto-verify** is a lightweight and secure React Native OTP auto-verification library for Android, built on the official Google SMS Retriever API. It enables automatic OTP detection without requiring READ_SMS or RECEIVE_SMS permissions, ensuring full Google Play Store compliance and enhanced user trust. Designed for modern authentication flows, this library is ideal for fintech apps, banking applications, e-commerce platforms, and secure login systems.
6
+
7
+ - **No permissions**: It requires zero SMS permissions from the user, making it compliant with strict Google Play Store policies.
8
+
9
+ With minimal dependencies and clean architecture, it integrates seamlessly into both React Native Old Architecture and the New Architecture (TurboModule) environments. The solution improves user experience by eliminating manual OTP entry on Android while maintaining strong server-side validation standards.
10
+
11
+ Works best for onboarding/login flows in **banking**, **fintech**, and authentication-heavy apps.
12
+ Supports both RN Old Architecture and React Native **New Architecture** (TurboModule).
13
+ **Android**: automatic OTP detection.
14
+
15
+ **iOS**: Uses iOS Security Code AutoFill (manual tap required).
16
+
17
+ **Connect:** [GitHub](https://github.com/kailas-rathod/react-native-otp-auto-verify) · [npm](https://www.npmjs.com/package/react-native-otp-auto-verify) · [Issues](https://github.com/kailas-rathod/react-native-otp-auto-verify/issues) · [License](https://github.com/kailas-rathod/react-native-otp-auto-verify/blob/main/LICENSE)
18
+
19
+ ---
20
+
21
+ <img width="1536" height="1024" alt="otp" src="https://github.com/user-attachments/assets/e4908e99-e7d1-4a96-a6d2-b92c50090db0" />
22
+
23
+ ## Features
24
+
25
+ - ✅ **Automatic OTP detection**: receives OTP from matching SMS and exposes it as `otp` (hook) or `extractedOtp` (listener)
26
+ - ✅ **No SMS permissions**: no access to inbox, avoids sensitive permissions and reduces compliance friction
27
+ - ✅ **App hash security**: OTP SMS must end with your **11-character hash** (only your app can receive it)
28
+ - ✅ **Hook + Imperative API**: `useOtpVerification()` for screens, `activateOtpListener()` for custom flows
29
+ - ✅ **TypeScript**: typed options and return values
30
+ - ✅ **New Architecture ready**: TurboModule implementation; works with Old Architecture too
31
+
32
+ ---
33
+
34
+ ## Platform Support
35
+
36
+ | Platform | Support | Notes |
37
+ | -------- | -------------- | ----------------------------------------------------- |
38
+ | Android | ✅ | Requires Google Play Services on device |
39
+ | iOS | ✅ Native Only | Uses iOS Security Code AutoFill (manual tap required) |
40
+
41
+ ## Requirements
42
+
43
+ - React Native: **0.60+** (autolinking)
44
+ - Android: **minSdkVersion 24+**
45
+ - **TurboModule**: The library uses codegen/TurboModule. The native module must be built and linked. If it is not registered (e.g. build issue or unsupported setup), importing the library will throw at load time.
46
+
47
+ ## Installation
48
+
49
+ ```sh
50
+ npm install react-native-otp-auto-verify
51
+ ```
52
+
53
+ # or
54
+
55
+ ```sh
56
+ yarn add react-native-otp-auto-verify
57
+ ```
58
+
59
+ # or
60
+
61
+ ```sh
62
+ pnpm add react-native-otp-auto-verify
63
+ ```
64
+
65
+ ## Usage
66
+
67
+ ### 1) Get your app hash
68
+
69
+ SMS Retriever only delivers messages that include your **11-character app hash**.
70
+
71
+ ```ts
72
+ import { getHash } from 'react-native-otp-auto-verify';
73
+
74
+ const hashes = await getHash();
75
+ const appHash = hashes[0]; // send this to your backend
76
+ ```
77
+
78
+ ### 2) Format your OTP SMS
79
+
80
+ Your backend **must** include the app hash at the **end** of the SMS.
81
+
82
+ Requirements:
83
+
84
+ - Message must be **≤ 140 bytes**
85
+ - Must contain a **4–6 digit** OTP
86
+ - Must **end with** the app hash from `getHash()`
87
+
88
+ Recommended format:
89
+
90
+ ```
91
+ Dear Kailas Rathod, 321500 is your OTP for mobile authentication. This OTP is valid for the next 15 minutes. Please DO NOT share it with anyone.
92
+ uW87Uq6teXc
93
+ ```
94
+
95
+ Note: You do not need `<#>` at the start of the message.
96
+
97
+ ### 3) Hook usage (recommended)
98
+
99
+ Start listening only while the OTP screen is visible (foreground).
100
+
101
+ ```tsx
102
+ import React from 'react';
103
+ import { Text, View } from 'react-native';
104
+ import { useOtpVerification } from 'react-native-otp-auto-verify';
105
+
106
+ export function OtpScreen() {
107
+ const { hashCode, otp, timeoutError, error, startListening, stopListening } =
108
+ useOtpVerification({ numberOfDigits: 6 });
109
+
110
+ React.useEffect(() => {
111
+ void startListening();
112
+ return () => stopListening();
113
+ }, [startListening, stopListening]);
114
+
115
+ return (
116
+ <View>
117
+ {!!hashCode && <Text>Hash: {hashCode}</Text>}
118
+ {!!otp && <Text>OTP: {otp}</Text>}
119
+ {timeoutError && <Text>Timeout. Tap resend and try again.</Text>}
120
+ {!!error && <Text>Error: {error.message}</Text>}
121
+ </View>
122
+ );
123
+ }
124
+ ```
125
+
126
+ ### 4) Imperative usage
127
+
128
+ ```ts
129
+ import {
130
+ activateOtpListener,
131
+ removeListener,
132
+ } from 'react-native-otp-auto-verify';
133
+
134
+ const sub = await activateOtpListener(
135
+ (sms, extractedOtp) => {
136
+ if (extractedOtp) {
137
+ console.log('OTP:', extractedOtp);
138
+ }
139
+ },
140
+ { numberOfDigits: 6 }
141
+ );
142
+
143
+ // cleanup
144
+ sub.remove();
145
+ // or
146
+ removeListener();
147
+ ```
148
+
149
+ 🔹 Step 1 – Start OTP Listener
150
+
151
+ ```ts
152
+ import { useOtpVerification } from 'react-native-otp-auto-verify';
153
+
154
+ const { startListening, stopListening, otp } = useOtpVerification();
155
+
156
+ useEffect(() => {
157
+ startListening();
158
+
159
+ return () => stopListening();
160
+ }, []);
161
+ ```
162
+
163
+ ## Create OTP Screen (Recommended Hook Method)
164
+
165
+ ```ts
166
+ import React, { useEffect, useState } from 'react';
167
+ import { View, Text, TextInput, Button, Platform } from 'react-native';
168
+ import { useOtpVerification } from 'react-native-otp-auto-verify';
169
+
170
+ const OtpScreen = () => {
171
+ const [otpValue, setOtpValue] = useState('');
172
+
173
+ const { otp, hashCode, timeoutError, error, startListening, stopListening } =
174
+ useOtpVerification({ numberOfDigits: 6 });
175
+
176
+ // Start listener when screen opens
177
+ useEffect(() => {
178
+ if (Platform.OS === 'android') {
179
+ startListening();
180
+ }
181
+
182
+ return () => {
183
+ stopListening();
184
+ };
185
+ }, []);
186
+
187
+ // Auto verify when OTP received
188
+ useEffect(() => {
189
+ if (otp) {
190
+ setOtpValue(otp);
191
+ verifyOtp(otp);
192
+ }
193
+ }, [otp]);
194
+
195
+ const verifyOtp = async (code: string) => {
196
+ console.log('Verifying OTP:', code);
197
+
198
+ // Call your backend API here
199
+ // await api.post('/verify-otp', { otp: code })
200
+ };
201
+
202
+ return (
203
+ <View style={{ padding: 20 }}>
204
+ <Text>Enter OTP</Text>
205
+
206
+ <TextInput
207
+ value={otpValue}
208
+ onChangeText={setOtpValue}
209
+ keyboardType="number-pad"
210
+ maxLength={6}
211
+ textContentType="oneTimeCode"
212
+ autoComplete="sms-otp"
213
+ style={{
214
+ borderWidth: 1,
215
+ padding: 12,
216
+ marginVertical: 12,
217
+ }}
218
+ />
219
+
220
+ <Button title="Verify" onPress={() => verifyOtp(otpValue)} />
221
+
222
+ {timeoutError && (
223
+ <Text style={{ color: 'red' }}>Timeout. Please resend OTP.</Text>
224
+ )}
225
+
226
+ {error && <Text style={{ color: 'red' }}>Error: {error.message}</Text>}
227
+ </View>
228
+ );
229
+ };
230
+
231
+ export default OtpScreen;
232
+ ```
233
+
234
+ # Start OTP Listener in Screen
235
+
236
+ ```ts
237
+ import React, { useEffect, useState } from 'react';
238
+ import { View, TextInput, Text } from 'react-native';
239
+ import { useOtpVerification } from 'react-native-otp-auto-verify';
240
+
241
+ export default function OtpScreen() {
242
+ const [otpValue, setOtpValue] = useState('');
243
+
244
+ const { otp, startListening, stopListening } = useOtpVerification({
245
+ numberOfDigits: 6,
246
+ });
247
+
248
+ useEffect(() => {
249
+ startListening(); // Start listening
250
+
251
+ return () => {
252
+ stopListening(); // Cleanup
253
+ };
254
+ }, []);
255
+
256
+ useEffect(() => {
257
+ if (otp) {
258
+ setOtpValue(otp); // OTP automatically retrieved here
259
+ console.log('Retrieved OTP:', otp);
260
+ }
261
+ }, [otp]);
262
+
263
+ return (
264
+ <View>
265
+ <TextInput
266
+ value={otpValue}
267
+ onChangeText={setOtpValue}
268
+ keyboardType="number-pad"
269
+ maxLength={6}
270
+ />
271
+ </View>
272
+ );
273
+ }
274
+ ```
275
+
276
+ # iOS OTP AutoFill (Native)
277
+
278
+ iOS does **not** allow third-party libraries to read SMS messages.
279
+
280
+ Automatic SMS reading is restricted by Apple for privacy and security reasons.
281
+ Instead, iOS provides a native feature called **Security Code AutoFill**, which suggests the OTP above the keyboard when properly configured.
282
+
283
+ This library does **not** auto-read OTP on iOS.
284
+
285
+ ---
286
+
287
+ ## How iOS OTP AutoFill Works
288
+
289
+ 1. User receives an SMS containing an OTP.
290
+ 2. iOS detects the code.
291
+ 3. The OTP appears above the keyboard.
292
+ 4. User taps the suggestion.
293
+ 5. The code fills automatically into the input field.
294
+
295
+ No SMS permissions required.
296
+
297
+ ---
298
+
299
+ ## React Native Setup
300
+
301
+ Use the following configuration in your OTP input field:
302
+
303
+ ```tsx
304
+ <TextInput
305
+ style={styles.input}
306
+ keyboardType="number-pad"
307
+ textContentType="oneTimeCode"
308
+ autoComplete="sms-otp"
309
+ importantForAutofill="yes"
310
+ maxLength={6}
311
+ />
312
+ ```
313
+
314
+ ## react-native-otp-auto-verify Architecture Flow
315
+
316
+ <img width="1536" height="1024" alt="react-native-otp-auto-verify Architecture Flow" src="https://github.com/user-attachments/assets/11582523-81cb-4904-9de0-56af05b3a3b4" />
317
+
318
+ ## API Reference
319
+
320
+ ### `useOtpVerification(options?)`
321
+
322
+ Use this on your OTP screen. It manages:
323
+
324
+ - getting the app hash (`hashCode`)
325
+ - starting/stopping the SMS Retriever listener
326
+ - extracting OTP and exposing it as `otp`
327
+
328
+ | Property | Type | Default | Description |
329
+ | ---------------- | --------------------- | ------- | ---------------------------------------- |
330
+ | `numberOfDigits` | `4 \| 5 \| 6` | `6` | OTP length to extract |
331
+ | `hashCode` | `string` | `''` | App hash (send to backend) |
332
+ | `otp` | `string \| null` | `null` | Extracted OTP |
333
+ | `sms` | `string \| null` | `null` | Full SMS text |
334
+ | `timeoutError` | `boolean` | `false` | Timeout occurred |
335
+ | `error` | `Error \| null` | `null` | Set when getHash or startListening fails |
336
+ | `startListening` | `() => Promise<void>` | — | Start listening |
337
+ | `stopListening` | `() => void` | — | Stop listening |
338
+
339
+ ### `getHash(): Promise<string[]>`
340
+
341
+ Android only. On iOS returns `[]`.
342
+
343
+ ### `activateOtpListener(handler, options?): Promise<{ remove(): void }>`
344
+
345
+ Android only. Throws on iOS.
346
+
347
+ ### `removeListener(): void`
348
+
349
+ Android only. Removes native listeners.
350
+
351
+ ### `extractOtp(sms: string, numberOfDigits?: 4 | 5 | 6): string | null`
352
+
353
+ Pure helper to extract the OTP from an SMS string.
354
+
355
+ ## Timeout behavior
356
+
357
+ SMS Retriever waits up to **5 minutes**. When it times out:
358
+
359
+ - `timeoutError` becomes `true`
360
+ - call `startListening()` again to retry
361
+
362
+ ## React Native New Architecture
363
+
364
+ This library is built with **TurboModules** and fully supports React Native's **New Architecture**.
365
+
366
+ ### What is the New Architecture?
367
+
368
+ The New Architecture (also known as Fabric + TurboModules) is React Native's new rendering system and native module architecture that provides:
369
+
370
+ - Better performance and type safety
371
+ - Synchronous native module calls
372
+ - Improved interoperability with native code
373
+
374
+ ## ✨ Feature Comparison
375
+
376
+ | Feature | react-native-otp-auto-verify | Other packages |
377
+ | ----------------------- | ---------------------------- | ------------------ |
378
+ | SMS Retriever API | ✅ Yes | ✅ Yes |
379
+ | Requires SMS Permission | ❌ No | ❌ No |
380
+ | TurboModule Support | ✅ Yes | ❌ Usually No |
381
+ | TypeScript Support | ✅ Full | ⚠️ Partial |
382
+ | Hook API | ✅ `useOtpVerification` | ❌ Not Available |
383
+ | App Hash Utility | ✅ Built-in | ⚠️ Basic |
384
+ | Architecture Ready | ✅ Old + New | ⚠️ Mostly Old Only |
385
+ | Maintenance | ✅ Actively Maintained | ⚠️ Varies |
386
+
387
+ ### Enabling New Architecture
388
+
389
+ The library works automatically with both **Old Architecture** and **New Architecture**. No code changes needed.
390
+
391
+ **For Android:**
392
+
393
+ Enable New Architecture in `android/gradle.properties`:
394
+
395
+ ```properties
396
+ newArchEnabled=true
397
+ ```
398
+
399
+ **For iOS:**
400
+
401
+ Enable New Architecture in `ios/Podfile`:
402
+
403
+ ```ruby
404
+ use_react_native!(
405
+ :fabric_enabled => true,
406
+ # ... other options
407
+ )
408
+ ```
409
+
410
+ Or set the environment variable:
411
+
412
+ ```sh
413
+ RCT_NEW_ARCH_ENABLED=1 pod install
414
+ ```
415
+
416
+ ### Compatibility
417
+
418
+ - ✅ Works with **Old Architecture** (React Native < 0.68)
419
+ - ✅ Works with **New Architecture** (React Native 0.68+)
420
+ - ✅ Automatically detects and uses the correct architecture
421
+ - ✅ No breaking changes when migrating
422
+
423
+ ## Troubleshooting
424
+
425
+ - OTP not detected
426
+ - Ensure the SMS **ends with** the app hash
427
+ - Keep the SMS **≤ 140 bytes**
428
+ - Match `numberOfDigits` to your OTP length
429
+ - Keep the app in **foreground**
430
+ - Listener fails to start
431
+ - Ensure Google Play services are available on the device
432
+ - Avoid multiple active listeners at once
433
+
434
+ ## Example app
435
+
436
+ See [`./example`](./example).
437
+
438
+ ## Contributing
439
+
440
+ See [`CONTRIBUTING.md`](CONTRIBUTING.md).
441
+
442
+ ## Publishing
443
+
444
+ Maintainers: see [RELEASE_CHECKLIST.md](./RELEASE_CHECKLIST.md) before publishing a new version to npm.
445
+
446
+ ## Keywords
447
+
448
+ react native otp auto verify, react native sms retriever api, automatic otp detection android, react native otp autofill, sms retriever react native, otp verification library react native, google play compliant otp library
449
+
450
+ ## License
451
+
452
+ [MIT](./LICENSE) — see [LICENSE](./LICENSE) in the repo.