r5n-dev / react-native-otp-inputs Goto Github PK

I've an OTP, say 1234 copied to my clipboard. When I paste only 1 gets pasted to the first input field.

Usage of Clear() methods is not clear i.e how to use the clear method? Thanks in advance

55.4 is one compatible and stable version of react native for android users.

When user edits the OTP, for the first box, user can input 2 characters if the text is not selected. Below is the screenshot of the first box having 2 characters instead of 1.

If we type fast then it accepts more than 1 letter/number in one TextInput.

Hi I wanted to change the cursor color of the otp input box.
I have used containerStyles = {{ caretColor: '#BA85FC' }} not working.

Dear All,

I found issue on custom installed keyboard for react-native-keyevent. it not work at all.
Is possible to get data input if react-native-keyevent not work? cause if i get console of otp input, i'm not get data if react-native-keyevent not work properly.

FEATURE REQUEST

Thanks for the very useful component.

It will be very useful to have an option to set secure input, for example <OtpInputs secure={true}/>.

This is also a dead simple improvement - I could create PR for this if you're ok with that.

password twice validate, like this:
this.otpInputComponent.clear();

How to achieve auto fill OTP

By default keyboard type is 'Phone-pad' (numbers) only. But, for alpha-numeric (letters+numbers) OTP not able to use the react-native-otp-input.

This tripped me up for a little while. The readme has the incorrect capitalization of the unFocusedBorderColor prop listed as un**f**ocusedBorderColor.

If you would like I can fork and submit a PR for this change or you can push it in your next update. Let me know what works for you - great work on this component 🥇

I try use secureTextEntry={true} but didnt work
Platform emulator android

import React, { useState } from 'react';
import { View, Dimensions } from 'react-native';
import OtpInputs from 'react-native-otp-inputs';
const OtpScreen = () => {
  const screenWidth = Dimensions.get('window').width;
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <OtpInputs
        handleChange={code => console.log(code)}
        numberOfInputs={6}
        inputStyles={{
          borderColor: 'black',
          borderWidth: 1,
          borderRadius: 5,
          margin: 10,
          width: screenWidth / 10,
          textAlign: 'center',
          fontSize: 22,
          backgroundColor: 'grey',
        }}
        style={{
          paddingHorizontal: 30,
          width: screenWidth / 1,
          flexDirection: 'row',
        }}
        secureTextEntry={true}
      />
    </View>
  );
};

export default OtpScreen;

I have added this component and working fine in iOS but in android "secureTextEntry" is not working.

Any idea how it will work?

FEATURE REQUEST

Thanks for the very useful component.

It will be cool to have an option to change inputsContainerStyles which at the moment is defaulted to {marginHorizontal: 25, marginVertical: 20}. Sometimes we need to reset these margin while making our own styles.

I think it's a pretty simple fix - I could create PR for this if you're ok with that.

Hallo guys, can you help me?

error: bundling failed: Error: While trying to resolve module react-native-otp-inputs from file /Users/useradmin/Documents/xxx-app-consumer/app/components/RegisterOtp/RegisterOtp.screen.js, the package /Users/useradmin/Documents/xxx-app-consumer/node_modules/react-native-otp-inputs/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/useradmin/Documents/xxx-app-consumer/node_modules/react-native-otp-inputs/lib/index.tsx. Indeed, none of these files exist:

I using react native version 0.54.4
I have tried to delete the modules node, clear Watchman, but still it can't. I read in the documentation, can support react native versio >= 0.53.0

 <OtpInputs
                handleChange={setOTP}
                numberOfInputs={4}
                focusedBorderColor="transparent"
              />

I create OtpInputs with 4 inputs. I get OTP have 4 character(ex:1234) when i click fill OTP only first input show "1".

Thank you for the component.
I encountered an issue with pasting value in the OTP. After pasting my OTP in the inputs, I cannot edit it. Below are the screenshots of the problem.

This is the pasted value.

When I type something, the value changes to my typed input, but then quickly flickers back to the pasted value.

Dependabot couldn't parse the config file at .dependabot/config.yml. The error raised was:

(<unknown>): did not find expected '-' indicator while parsing a block collection at line 4 column 3

Please ensure the config file is a valid YAML file. An online YAML linter is available here.

You can mention @dependabot in the comments below to contact the Dependabot team.

We have option to set 'inputTextErrorColor' but not any option for 'inputTextColor'. It's always white.
Please add support for input text color as well.

I am not sure if it is related to otp inputs. I will open an issue in keyevents repository. Please see the video. At first I was using the google keyboard and everything worked perfectly. Then I switch to Samsung keyboard and it doesn't work at all.

https://yadi.sk/i/UuAFWwYjfZIsgQ

First OTPInputview is for 4 number and second is for 6 number.
4 DIgit OTPInputview working fine but If i try to write 5th word in second OTPInpuptview which has total 6 digit code so doesn't work and crashed.
Even If i use forceInput(), still not working.

Hi, I am facing an issue In iOS OTP code auto-filling.

I have set 6 as numberOfInputs and when I got OTP code SMS from keyboard accessory view.
While Tapping on it, the entire OTP code of 6 letters got filled to the first index of TextInput out of 6. The rest of TextInputs remains empty.

HI,
I'm trying to set the input to autofocus while the page loads...not sure how to do that..since the props are not defined in the documentation.

 <View style={styles.container,{padding:30}}>
      <OtpInputs autoFocus={true} handleChange={code => console.log(code)} numberOfInputs={4}
       />
</View>

For the OTP which contains small letters in it for e.g. a1b2c3 or abcde ,

According to the default behavior autoCapitalize:'sentences' (i.e first letter of each sentence in caps), the keyboard caps lock gets on for each TextInput of the 'react-native-otp-inputs' which is a bit annoying for users if they have an alphanumeric OTP.

Can there be an option to set auto capitalization "none" (or other) by an open prop similar to 'keyboardType'?

error: bundling failed: Error: Cannot combine flow and typescript plugins.
at validatePlugins (/Work/node_modules/@babel/parser/lib/index.js:6084:11)
at getParser (/Work/node_modules/@babel/parser/lib/index.js:11262:5)
at parse (/Work/node_modules/@babel/parser/lib/index.js:11232:22)
at parser (/Work/node_modules/@babel/core/lib/transformation/normalize-file.js:170:34)
at normalizeFile (/Work/node_modules/@babel/core/lib/transformation/normalize-file.js:138:11)
at runSync (/Work/node_modules/@babel/core/lib/transformation/index.js:44:43)
at transformSync (/Work/node_modules/@babel/core/lib/transform.js:43:38)
at Object.transform (/Work/node_modules/metro-react-native-babel-transformer/src/index.js:202:20)

package.json
"react": "16.8.3", "react-native": "0.59.8", "react-native-otp-inputs": "^3.2.0", "babel-preset-react-native": "^5.0.2", "metro-react-native-babel-preset": "^0.54.1"

When uses version 1 it works fine but latest version 2.0.1 have following problem.

While trying to resolve module react-native-otp-inputs

from file

F:\abc\app\components\EmailOTPVerification.js,

the package
F:\abc\node_modules\react-native-otp-inputs\package.json was successfully found.

However, this package itself specifies a main module field that could not be resolved

(F:\abc\node_modules\react-native-otp-inputs\lib\index.tsx.

Indeed, none of these files exist:

• F:\abc\node_modules\react-native-otp-inputs\lib\index.tsx(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)

• F:\abc\node_modules\react-native-otp-inputs\lib\index.tsx\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)

Can you guys make TextInput colour property customsable, as in my case I need to have black colour for text.

How to focus?

Hi @dsznajder
I think there is a regression bug with the handleChange callback function after the recent changes.
Previously, the handleChange function will be triggered after every input change, but now, it is not called even when the full OTP has been entered.

In this screenshot, the GO button is not enabled when all the inputs are entered but previously, it was.

When I try to log the changes, nothing was shown.

Version: 4.0.0-alpha.1 and 4.0.0-alpha.2

prop securetextentry is working fine on ios but not on android.

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /npm_and_yarn/helpers/package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it in the .dependabot/config.yml file in this repo.

You can mention @dependabot in the comments below to contact the Dependabot team.

While trying to create OTP inputs with 6 digits and custom styles as shown below, Keyboard is getting dismissed after user enters each single input.

<OtpInputs
  numberOfInputs={6}
  keyboardType="number-pad"
  autofillFromClipboard={false}
  handleChange={otp => console.log(otp)}
  inputContainerStyles={{ height: 53 }}
  inputStyles={{
    color: "#607ca8",
    fontSize: 25,
    textAlign: "center",
    paddingVertical: 5,
    paddingHorizontal: 8,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: "#adb6bc",}}
  style={{
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginTop: 20,
    marginBottom: 5,
  }}
/>

If inputContainerStyles={{ height: 53 }} is commented/removed, everything works fine. Except that it adds the default style which gives bottom border to all the input fields. The only way to avoid bottom border is to provide custom inputContainerStyles which strangely seems to be affecting Keyboard dismiss behavior.

This behavior was observed while using react-native-otp-inputs version "5.0.0-alpha.0" on Android studio's Pixel 3 emulator running Android Pi.

Dependabot encountered the following error when parsing your .dependabot/config.yml:

The property '#/update_configs/1' did not contain a required property of 'package_manager'
The property '#/update_configs/1' did not contain a required property of 'directory'
The property '#/update_configs/1' did not contain a required property of 'update_schedule'
The property '#/update_configs/2' did not contain a required property of 'package_manager'
The property '#/update_configs/2' did not contain a required property of 'directory'
The property '#/update_configs/2' did not contain a required property of 'update_schedule'

Please update the config file to conform with Dependabot's specification using our docs and online validator.

You can mention @dependabot in the comments below to contact the Dependabot team.

im not able to set detected OTP because of handlechange...

if we give autoFocus={true} it is focusing to last index instead of first index.

Does it provide autofill feature for Android and ios?

When I press the keys very quickly after one another, the keystrokes seem to get lost. Looks like if we input before the next input is focussed, it doesn't register. Any solution or workaround for this?
Thanks.

Here, I press 0 quickly twice, but I get it only once.

When user changes the value in the OTP input, if the changed value is the same as the old one, the cursor will stay in that box and not move to the next one.

Hello Team,
Thank You for this fantastic module. I am using version: 3.3.1. Recently, I found that on IOS, the OTP is not getting auto-populated correctly. Earlier it used to.

Nothing was really changed from our side in the app as such.

The detailed issue is as described:
1] The otp message is received
2] IPhone displays correct OTP on top of the keyboard
3] When clicked on it, it only populates the first digit and rest 3 are blank.

Few days back, it used to populate all four digits correctly.

On Android, when the otp comes and we click on the copy otp button in some devices, it populates correctly.

Please advice on the same.

Hello, I have run your example, everything is ok on Android, but there was a problem in Ios. The number that was selected before deleted will not be displayed. If this component is still maintained, I hope it can be solved.

What are the values for unfocusedBorderColor other than transparent ?
How to change the change the color of the text inside the box ?