r5n-dev / react-native-otp-inputs Goto Github PK
View Code? Open in Web Editor NEWOTP inputs for React-Native
License: MIT License
OTP inputs for React-Native
License: MIT License
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.
How to focus?
Hi I wanted to change the cursor color of the otp input box.
I have used containerStyles = {{ caretColor: '#BA85FC' }} not working.
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;
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'?
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.
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.
im not able to set detected OTP because of handlechange...
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>
55.4 is one compatible and stable version of react native for android users.
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.
What are the values for unfocusedBorderColor other than transparent ?
How to change the change the color of the text inside the box ?
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.
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.
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.
If we type fast then it accepts more than 1 letter/number in one TextInput.
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.
Does it provide autofill feature for Android and ios?
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.
I've an OTP, say 1234
copied to my clipboard. When I paste only 1
gets pasted to the first input field.
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 have added this component and working fine in iOS but in android "secureTextEntry" is not working.
Any idea how it will work?
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.
Can you guys make TextInput colour property customsable, as in my case I need to have black colour for text.
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)
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
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.
Usage of Clear() methods is not clear i.e how to use the clear method? Thanks in advance
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"
if we give autoFocus={true} it is focusing to last index instead of first index.
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
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 ๐ฅ
prop securetextentry is working fine on ios but not on android.
password twice validate, like this:
this.otpInputComponent.clear();
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.