anday013/react-native-otp-entry

Simple and fully modifiable OTP Input Component for React Native

react-native-otp-entry's Issues

Enable test support

Hello there! First of all, great work on this! I was wondering if you are planning to add some testID attributes to be able to locate input elements when running unit/e2e tests.

Thanks!

Documentation and Naming Consistency Fixes

Issue Description:

The main class of this library is named "OtpInput," but in the documentation, it is occasionally referred to as "OTPInput," creating inconsistencies. Additionally, there is an error in the documentation structure where certain properties should be nested within the "theme" property.

Issue Details:

• Naming Issue: The main class of the library is named "OtpInput," but the documentation mentions it as "OTPInput" in some places. This creates confusion and inconsistency in the documentation.

• Documentation Structure Error: The documentation presents an incorrect structure for configuring the component. Certain properties should be grouped within the "theme" property for better organization and clarity.

Current Documentation Snippet:

<OTPInput
  numberOfDigits={6}
  focusColor="green"
  onTextChange={(text) => console.log(text)}
  containerStyle={styles.container}
  inputsContainerStyle={styles.inputsContainer}
  pinCodeContainerStyle={styles.pinCodeContainer}
  pinCodeTextStyle={styles.pinCodeText}
  focusStickStyle={styles.focusStick}
  focusStickBlinkingDuration={500}
/>

Proposed Correction:

<OtpInput
  numberOfDigits={6}
  onTextChange={(text) => console.log(text)}
  focusColor: "green"
  focusStickBlinkingDuration: 500
  theme={{
    containerStyle: styles.container,
    inputsContainerStyle: styles.inputsContainer,
    pinCodeContainerStyle: styles.pinCodeContainer,
    pinCodeTextStyle: styles.pinCodeText,
    focusStickStyle: styles.focusStick
  }}

Need to style the focused input container

Here is the active input which holds number 4

Need to access all styling property for the active input

[ANDROID] - Error while updating property 'autoComplete'

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Environment: ANDROID
Error message: Error while updating property 'autoComplete'

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-otp-entry/dist/src/OtpInput/OtpInput.js b/node_modules/react-native-otp-entry/dist/src/OtpInput/OtpInput.js
index 4c8bc37..4933e4f 100644
--- a/node_modules/react-native-otp-entry/dist/src/OtpInput/OtpInput.js
+++ b/node_modules/react-native-otp-entry/dist/src/OtpInput/OtpInput.js
@@ -35,6 +35,8 @@ exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
               </react_native_1.Pressable>);
         })}
       </react_native_1.View>
-      <react_native_1.TextInput value={text} onChangeText={handleTextChange} maxLength={numberOfDigits} inputMode="numeric" textContentType="oneTimeCode" ref={inputRef} autoFocus={autoFocus} style={OtpInput_styles_1.styles.hiddenInput} secureTextEntry={secureTextEntry} autoComplete="one-time-code" testID="otp-input-hidden"/>
+      <react_native_1.TextInput value={text} onChangeText={handleTextChange} maxLength={numberOfDigits} inputMode="numeric" textContentType="oneTimeCode" ref={inputRef} autoFocus={autoFocus} style={OtpInput_styles_1.styles.hiddenInput} secureTextEntry={secureTextEntry} 
+    // @ts-ignore
+    autoComplete={react_native_1.Platform.OS === 'ios' ? "one-time-code" : "sms-otp"} testID="otp-input-hidden"/>
     </react_native_1.View>);
 });
diff --git a/node_modules/react-native-otp-entry/src/OtpInput/OtpInput.tsx b/node_modules/react-native-otp-entry/src/OtpInput/OtpInput.tsx
index 0a07e92..7d3ea19 100644
--- a/node_modules/react-native-otp-entry/src/OtpInput/OtpInput.tsx
+++ b/node_modules/react-native-otp-entry/src/OtpInput/OtpInput.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useImperativeHandle } from "react";
-import { Pressable, Text, TextInput, View } from "react-native";
+import { Platform, Pressable, Text, TextInput, View } from "react-native";
 import { styles } from "./OtpInput.styles";
 import { OtpInputProps, OtpInputRef } from "./OtpInput.types";
 import { VerticalStick } from "./VerticalStick";
@@ -83,7 +83,8 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
         autoFocus={autoFocus}
         style={styles.hiddenInput}
         secureTextEntry={secureTextEntry}
-        autoComplete="one-time-code"
+        // @ts-ignore
+        autoComplete={Platform.OS === 'ios' ? "one-time-code" : "sms-otp"}
         testID="otp-input-hidden"
       />
     </View>

Max supported fontSize

What is the maximum supported fontSize for OTP inputs?
With fontSize: 46, the inputs are like cut on the top. Can you please propose solution for this issue?

Focus colour is not working

@anday013 There is an issue in the library. I just created the sample app and found that the focusColor prop doesn't work when I use the borderColor in the pinCodeContainerStyle theme prop.

Here I attached the screenshots to explain the issue

While trying to resolve module `react-native-otp-entry` from file

i have this issues ussing expo:
While trying to resolve module react-native-otp-entry from file /Users/expo/workingdir/build/screens/login/TwoFA.js, the package /Users/expo/workingdir/build/node_modules/react-native-otp-entry/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/expo/workingdir/build/node_modules/react-native-otp-entry/dist/index.js. Indeed, none of these files exist:

• /Users/expo/workingdir/build/node_modules/react-native-otp-entry/dist/index.js(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs)
• /Users/expo/workingdir/build/node_modules/react-native-otp-entry/dist/index.js/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs)
  Learn more: https://docs.expo.dev/build-reference/troubleshooting
  can you help me on this

Cannot focus on a previous digit input

Describe the bug
Cannot focus on a previous digit input

To Reproduce
Steps to reproduce the behavior:

1. Fill one or more digits
2. Click on a previous digit box
3. Error: Focus stays on the same last input not the one pressed.
4. Error: Android text selector (or whatever that is) appears (less important)

Expected behavior

1. Should bring focus to the pressed digit box.
2. Should never show the text selector.

Screenshots
I pressed the first box.

Environment (please complete the following information):

• OS: Linux 6.8
• Device OS: Android
• Device version: Android 14
• Library version: 1.6.1

Additional context
Add any other context about the problem here.

Implement "Copy/Paste" feature

Feature Description

Currently, there is a lack of a feature for pasting code from the clipboard for the user.

Context of issue

The current implementation of the TextInput component is the following: there is a single <TextInput /> component that is being hidden while the value inputted in it is being displayed inside the separated <Text /> components, which are the actual "Input cells" that the user sees on the screen. <TextInput /> mentioned above is focused when <Text /> (cells) are being tapped. P.S. the tap is handled by Pressable that wraps each Text component:

react-native-otp-entry/src/OtpInput/useOtpInput.ts

Lines 10 to 16 in 7db6d76

	const handlePress = () => {
	// To fix bug when keyboard is not popping up after being dismissed
	if (!Keyboard.isVisible()) {
	Keyboard.dismiss();
	}
	inputRef.current?.focus();
	};

Recap: There is a single TextInput that's hidden and several Text components in the form of "cells", where each of the digits of the OTP code is being populated and displayed.

Issue

The "copy/paste" feature is a built-in feature in TextInput component, and in our case, it's been hidden from the user, there is no way for the user to pop up the built-in TextInput "text selection menu", which looks like this:

Possible solutions

Easy approach: It is possible to add context menu on long press and add custom options; however, it would kill the native feeling.
+: Easy to implement
-: Not native UX

Deep approach: It would be cool to trigger the native "text selection menu", however it probably requires a native piece of code for each platform
+: Fully native UX
-: Requires platform native knowledge to implement

TODOs:

• Paste functionality
• Copy functionality

Implementation

Actual implementation:

The actual implementation was way easier :D I just "streched" the input over the whole container, and now the context menu with copy/past is being triggered when user interacts with the container :)

Contribute Your Creativity: Custom Styles for "react-native-otp-entry"

Hello Community 👋

I'm inviting you to contribute custom styles to enhance react-native-otp-entry showcase. Your creativity will not only improve the library but also inspire other users of the library.

Share Your Work

Upload Video or Screenshot: Provide a video or screenshot showcasing your custom styles.
Share Code (Optional yet Preferable): Optionally, share your style code, preferably in a Snack Expo project.

Snack Expo: https://snack.expo.dev/@anday013/demo-react-native-otp-entry

Examples:

Dark Mode theme 🌑
Material Design-inspired styles 🎨
Minimalistic styles 🌱

or any other custom ones...

Thank you for your contributions! 🎉

'focusedPinCodeContainerStyle' does not exist in type 'Theme'

Hey @anday013 i think something when wrong with this property and maybe you has not merged code yet =))

Paste functionality is disabled when adding styles

When we add elevation to pinCodeContainerStyle. The pasting functionality dosen't work

pinCodeContainerStyle: { elevation: 2, }

Pasting code into input

I'd like to be able to long-press one of the inputs or the whole component and then press the 'paste' button to paste the OTP that is stored in my clipboard. Is there a way to achieve that currently?

I also suggest adding textContentType="oneTimeCode" to the TextInput, it can be used to indicate that a field can be auto-filled by a code arriving in an SMS on iOS.

The background color is not changeable

containerStyle backgroundColor property is not affecting the background between the fields

Autofocus when component render

Hi, tks you for creating a great component which custom style on it easily.

It's will better when add autofocus the 1st input when component render, isn't it ?

A way to disable cursor/caret inside the input

First of all, thank you for this neat little component.

I couldn't seem to find a way to disable the blinking cursor/caret inside the input. Would be nice to have an option to disable that.

Thank you.

Enabling only number inputs

Hello,

I am using this library on my new application and i am very happy, tried multiple libraries but this is the one.

But i am having this issue: I only want numeric input.

Of course, i can just put regex and check on every text input.

On emulator, i can use my keyboard and type with non numeric inputs. This is not a big of an issue, but i would like to see numeric prop.

docs: README.MD file inaccurate code snippet in theme Prop of "OtpInput" Component

This is my first time raising issue on github.

Issue Description:

There is a wrong code snippet related to main "OtpInput Component theme Props", The Problem is in theming Prop where the code is

  <OtpInput
    numberOfDigits={6}
    focusColor="green"
    focusStickBlinkingDuration={500}
    onTextChange={(text) => console.log(text)}
    onFilled={(text) => console.log(`OTP is ${text}`)}
    theme={{
      containerStyle={styles.container},
      inputsContainerStyle={styles.inputsContainer},
      pinCodeContainerStyle={styles.pinCodeContainer},
      pinCodeTextStyle={styles.pinCodeText},
      focusStickStyle={styles.focusStick},
      focusedPinCodeContainerStyle={styles.activePinCodeContainer}
    }}
  />

The Correct code snippet is should be like this

  <OtpInput
    numberOfDigits={6}
    focusColor="green"
    focusStickBlinkingDuration={500}
    onTextChange={(text) => console.log(text)}
    onFilled={(text) => console.log(`OTP is ${text}`)}
    theme={{
      containerStyle:styles.container,
      inputsContainerStyle:styles.inputsContainer,
      pinCodeContainerStyle:styles.pinCodeContainer,
      pinCodeTextStyle:styles.pinCodeText,
      focusStickStyle:styles.focusStick,
      focusedPinCodeContainerStyle:styles.activePinCodeContainer
    }}
  />

Keyboard issue

When I click on input box second time then the keyboard does not appear,

`

     <SafeAreaView>
        <OtpInput
            numberOfDigits={4}

        />
    </SafeAreaView>

`

I using this code