ttdung11t2/react-native-confirmation-code-input

A react-native component to input confirmation code for both Android and IOS

react-native-confirmation-code-input

A react-native confirmation code input for both IOS and Android

Features

• A user-friendly component for inputting confirmation code
• Extended from component, so you can use its props
• Built-in type of code input: underline, box, circle
• Set position: center, left, right, full width
• Set size and active color, inactive color
• Easy to customize style, use base style from TextInput component
• Check code on finish or return code for async checking
• Clear code on fail
• Use React Native ES6

Screenshots

Installation

npm install react-native-confirmation-code-input --save

Usage

Basic

Import this module:

import CodeInput from 'react-native-confirmation-code-input';

Use as a component and style it:

render() {
  return (
    <CodeInput
      ref="codeInputRef1"
      secureTextEntry
      className={'border-b'}
      space={5}
      size={30}
      inputPosition='left'
      onFulfill={(code) => this._onFulfill(code)}
    />
    
    <CodeInput
      ref="codeInputRef2"
      secureTextEntry
      compareWithCode='AsDW2'
      activeColor='rgba(49, 180, 4, 1)'
      inactiveColor='rgba(49, 180, 4, 1.3)'
      autoFocus={false}
      ignoreCase={true}
      inputPosition='center'
      size={50}
      onFulfill={(isValid) => this._onFinishCheckingCode1(isValid)}
      containerStyle={{ marginTop: 30 }}
      codeInputStyle={{ borderWidth: 1.5 }}
    />
    
    <CodeInput
      ref="codeInputRef2"
      keyboardType="numeric"
      codeLength={5}
      className='border-circle'
      compareWithCode='12345'
      autoFocus={false}
      codeInputStyle={{ fontWeight: '800' }}
      onFulfill={(isValid, code) => this._onFinishCheckingCode2(isValid, code)}
    />
  )
}

props

This component uses the same props as . Below are additional props for this component:

Prop	Type	Default	Description
codeLength	number	5	length of confirmation code -> number of cells
compareWithCode	string		code to compare. if null, onFulfill callback return inputted code to check later
inputPosition	string	center	position of code input in its container: left, right, center, full-width
size	number	40	size of input cells
space	number	8	space between 2 cells
className	string	border-box	Some built-in classname: border-box, border-circle, border-b, border-b-t, border-l-r
cellBorderWidth	number	1.0	width of cell borders
activeColor	string	rgba(255, 255, 255, 1)	color of cells when active
inactiveColor	string	rgba(255, 255, 255, 0.2)	color of cells when inactive
ignoreCase	boolean	false	ignore case when checking code
autoFocus	boolean	true	auto focus on code input
codeInputStyle	style object		custom style for code input
containerStyle	style object		custom style for code input container
onFulfill	function		callback function called when fulfilling code. If compareWithCode is null -> return (code) in callback, else return (isValid, code). Required
onCodeChange	function		Get Code text on every update of Field

functions

clear input:

this.refs.refName.clear();
...
<CodeInput 
    ...
    ref="refName"
/>

Example

See EXAMPLE

git clone https://github.com/ttdung11t2/react-native-confirmation-code-input.git
cd react-native-confirmation-code-input/example
npm install
react-native run-ios / react-native run-android

License

react-native-confirmation-code-input is released under the MIT license. See LICENSE for details.

Any question or support will welcome.

react-native-confirmation-code-input's Issues

How to set Input Direction "Left" in RTL App mode?

I have app in Hebrew and app will in RTL mode and in RTL number input direction starts from Right but i need it from Left so please help me in solve this issue.

How to set the default value from state?

How to set the default value like we set in normal textinputs

show Error i when i give props codeLenth={4}

Invalide props comapereWith length is not equal to codeLength in ConfirmationCodeInput

While deleting and entering new code

Can not enter new code while entering the wrong code.
Error in iOS
I config:

<CodeInput
            activeColor='rgba(49, 180, 4, 1)'
            inactiveColor='rgba(49, 180, 4, 1.3)'
            space={8}
            size={30}
            keyboardType='numeric'
            codeLength={4}
            codeInputStyle={{ fontWeight: 'bold', fontSize: 30 }}
            inputPosition='left'
            autoFocus={false}
            ignoreCase={false}
            onFulfill={code => this.setState({code})}
            className='border-b'
          />

How to use numbers only

I need to to type numbers only(need to avoid letters and special character)

RN 0.63.0-rc.1

react-native-confimation-code-input seems not works with the 0.63.0-rc.1.

I obtain the following error:
Requiring module "node_modules/react-native-confirmation-code-field/lib/index.js", which threw an exception: TypeError: Object is not a constructor(evaluating 'new_reactNative.TextInput({})')

Keyboard jump as I fill in the digits

on iOS 11.2 simulator
When I type in a letter using the keyboard (mac or simulator), the autocompletion bar jumps (see video)

Clearing on Previous Pin Values when I clicked the particular pin

Let's say, I have a 4 data filled pin, When I clicked on the 3nd pin , the pin data (1,2,3) get's cleared and this is not supposed to happen.Is there a workaround possible ?

class "border-b" is not working

<CodeInput
ref="codeinput"
className="border-b"
keyboardType="numeric"
activeColor="white"
inactiveColor="white"
inputPosition='left'
cellBorderWidth={1}
space={10}
autoFocus={true}
codeLength={4}
size={60}
onFulfill={(code) => this.verify(code)}
containerStyle={{ marginTop: 50 }}
codeInputStyle={{ color: "white", fontSize: 32 }}
/>

This is the code i used to implement underline codeinput but it's not showing any border.
Is there any solution for that?

Thanks

Once onFulfill get called last text input clears?

I have successfully added the library in my project, but when onFulfill get called after successful insertion of data. I saw the last text input filed clears. How to avoid it to happen.

Thanks

how to do this?

i have a design like this. It is different than others. which props should I use?

Ability to change active and inactive border color

Hi, is it possible to change the active and inactive border color? By default, the active border has opacity 1 and inactive has 0.2. I want to maintain this but also change the color of the border. If I change the borderColor, it applies to all fields (active and inactive). Is there any workaround or can this be added?

Thanks.

Very bad component with serious error!!!

While I was filling in the spaces, I tried to remove one field by using backspace key.
Error happens from this time.
As I am trying to fill in more, it's keeping remove all the records and then i can't even fill in the starting 2 fields.
Very disappointed!

✨Add support for pasting

Description

• At the moment pasting doesn't work and it only pastes the first character

Intended behavior

• When pasting text, it should fill the inputs

PR: #30

Bundle size is significantly large

Description

• The whole lodash library is shipped with the project which increases the bundle size neelessly

Fix

• The bundle size can be significantly reduced by removing lodash and importing only the needed parts

PR:: #30

blurOnSubmit={false} not working

Issue

I try to use blurOnSubmit={false} but it not working when I submit, keyboard keep dismiss.

Version

react-native-confirmation-code-input: 1.0.4
react: 16.3.1
react-native: 0.55.4

Code Demo

<CodeInput
    ref={(input) => { 
       this.codeInput = input;
    }}                                
    autoFocus
    onFulfill={this.handleSubmitCode}
    blurOnSubmit={false}           <--------------- 
    keyboardType="numeric"
/>

How to call a function on every keypress?

onCodeChange doesn't work for me

Backspace is not working in Android

Hi,

Android backspace button is not working as expected in this module.

When pasting code into first Text, only first character will fill in

Hey,
This would rather be a nice feature instead of an issue.

But when i paste a string into the first box, only the first character will be pasted into the box, and the rest of the boxes do not fill up with the remaining characters.

This would be a nice feature because people like to copy/paste difficult to remember codes

Cannot read property 'style' of undefined

Cannot read property 'style' of undefined issue after updated the react-native version to 0.64.0 and react: 17.0.2.

Object../node_modules/react-native-confirmation-code-input/components/ConfirmationCodeInput.js

code input on react native 0.54.x bug

my package.json
{
"name": "captain",
"version": "0.0.1",
"private": true,
"scripts": {
"postinstall": "remotedev-debugger",
"start": "node node_modules/react-native/local-cli/cli.js start -- --reset-cache",
"test": "jest",
"ios": "react-native run-ios",
"ios8p": "react-native run-ios --simulator 'iPhone 8 Plus'",
"iosx": "react-native run-ios --simulator 'iPhone X'",
"link": "react-native link",
"bundle-ios": "react-native bundle --platform ios --entry-file index.js --bundle-output ./CodePush/main.jsbundle --assets-dest ./CodePush --dev false"
},
"dependencies": {
"@remobile/react-native-qrcode-local-image": "^1.0.4",
"lodash": "^4.17.5",
"mockjs": "^1.0.1-beta3",
"node-forge": "^0.7.4",
"prop-types": "^15.6.1",
"query-string": "^6.0.0",
"react": "16.2.0",
"react-native": "0.54.0",
"react-native-camera": "^0.13.0",
"react-native-code-push": "^5.3.2",
"react-native-confirmation-code-input": "^1.0.4",
"react-native-easy-toast": "^1.1.0",
"react-native-image-picker": "^0.26.7",
"react-native-keyboard-aware-scroll-view": "^0.4.4",
"react-native-qrcode": "^0.2.6",
"react-native-storage": "^0.2.2",
"react-native-svg": "^6.2.2",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^1.5.7",
"react-navigation-redux-helpers": "^1.0.3",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-actions": "^2.3.0",
"redux-persist": "^5.9.1",
"redux-thunk": "^2.2.0",
"remote-redux-devtools": "^0.5.12",
"teaset": "^0.5.6",
"victory-native": "^0.17.2"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-jest": "23.0.0-alpha.0",
"babel-plugin-module-resolver": "^3.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-remove-console": "^6.9.0",
"babel-preset-react-native": "4.0.0",
"jest": "23.0.0-alpha.0",
"react-native-clean-project": "^1.0.7",
"react-test-renderer": "16.2.0",
"remote-redux-devtools-on-debugger": "^0.8.3",
"remotedev-server": "^0.2.4"
},
"jest": {
"preset": "react-native"
}
}

Unable to use textContentType="oneTimeCode"

I need OTPs to be automatically filled from the keyboard using the prop : textContentType="oneTimeCode" , but when i tried only one field gets filled by the prop. How to fix this??

Is there any approach to specify the backgroundColor only for single active cell?

Hi,
I would like to set the active cell's background colour. Didn't manage to.

Setting the onBlur and onFocus calls only onBlur. onFocus is not called at all. But still, after managing this and setting the colour, all the cells are coloured. I want it to be only for the active cell.

Any suggestions

even auto focus is valid, keyboard is not shown

autoFocus parameter is true, first input field has focus, but keyboard is not shown.

When you add text "i" four times, it crashes

When you add text "i" four times, it crashes

Is it support auto read OTP when I receive OTP from SMS?

I am using this repo and it works super fine but I want to create auto read OTP when I receive OTP from SMS?

Please let me know how to create auto read OTP ?

Thanks

How can i create autofill when i recieve otp via sms.

How to test with detox?

Is there a way to do detox test with this library? I have no luck finding the element/type text because the code input component doesn't expose individual input and doesn't support testID too.

border type not working

hi,

not sure if i am doing border type correct, i keep trying to change to underline but it says as a box

<CodeInput
ref="codeInputRef1"
space={10}
size={30}
inputPosition='center'
activeColor='black'
inactiveColor='black'
codeInputStyle={{ borderWidth: 1.5 }}
borderType='underline'
autoFocus={false}
onFulfill={(isValid, code) => alert(isValid)}
/>

Prefill the code when re-entering the screen

In the onboarding of my app the user has to choose a code. I want the code to re-appear when they come back to the screen. How is this possible?

After fullfil there a bug that make you can not fulfill it again

NPM package is not updated

NPM package is not updated, the version 1.0.4 (the latest) does not include the callback onCodeChange

Android keyboard back button is not clearing the text

No visuals

I have problem with no visual representation of this plugin, i can click space where it suppose to be and i can fill code but no graphical feedback at all. Somone meet similar issue?

Component works very slow, dropping input

Even on clear react-native project installed component works very slow.
My use case is 4-digit sms code entry and as proficient mobile phone user when I'm typing fast it only picks up 2 digits from 4 typed which would be very annoying for my users.
Oppose to that I've tested normal TextInput which is working just fine.
It was tested on 4 different devices, always very bad performance.
Any suggestions?

Google drive link to video screen record: https://drive.google.com/file/d/1NxbFPZK38k4UrQQJmLqA8MIbpgF365hx/view?usp=sharing

How do I get Code text on every update of Field?

I see few pull requests which implements onCodeChange feature:
#59
#33
#22

Can you please check, accept one of them and discard others?

IS THIS REPO DEAD ? You can use fork with LTS!

💀 This repository is dead.

The author does not support it 😭.

I suggest using fork: react-native-confirmation-code-field, with ✔️ long term support!

iPhone 11 Keyboard can't pop out

The specific code is as follows：
<CodeInput ref="smscodeInput" keyboardType="numeric" codeLength={6} activeColor="rgba(247, 108, 62, 1)" inactiveColor="rgba(255, 255, 255, 0.2)" cellBorderWidth={2} compareWithCode="" autoFocus={false} codeInputStyle={styles.itemInput} onFulfill={code => this.smscodeCheck(code)} />

Expo Web support

Does this support expo web?

How to get value user write?

Hey,

I have a function to check the code input sent from firebase,
and i want to know what user he writes in so i use onChangeText as usual in TextInput RN , but i can't see any thing when i log the value?

SO how can I update the state after he right the code and "onFulfill" invoked?

Code

state = {
   isValid: false,
   codeInput: '', // what's user write!
   confirmResult: this.props.navigation.getParam('confirmResult'),
   message: this.props.navigation.getParam('message'),
 };
<CodeInput
           value={this.state.codeInput}
           onChangeText={input =>
             this.setState({codeInput: input}, () =>
               console.log(this.state.codeInput + 'heyCh'),
             )
           }
           ref="codeInputRef2"
           secureTextEntry
           compareWithCode={this.state.codeInput.toString()}
           activeColor="#1a4672"
           inactiveColor="#286fb7"
           autoFocus={false}
           ignoreCase={true}
           inputPosition="center"
           size={50}
           keyboardType="numeric"
           codeLength={6}
           onFulfill={() => this.confirmCode()}
           containerStyle={{margin: 0}}
           codeInputStyle={{borderWidth: 1.5}}
         />

// Function 
 confirmCode = () => {
   const {codeInput, confirmResult} = this.state;
   console.log('confirmResult:++ ', confirmResult);
   console.log('codeInput:++', codeInput); // it's empty although  i write the code number in inputs!
   if (confirmResult && codeInput.length) {
     confirmResult
       .confirm(codeInput)
       .then(user => {
         console.log(JSON.stringify(user.uid));
         this.setState({
           message: 'Code Confirmed!',
         });
       })
       .catch(error => {
         this.setState({message: `Code Confirm Error: ${error.message}`});
       });
   } else {
     console.log('Not here');
   }
 };

Docs for refs

Hi,I think the documentation for refs can be improved.can i add the changes.

how to make a confirmation code input active(focus on a confirmation code input)?

Hi I recently used this package for my project and now I have 2 confirmation code input field and the second one is active. I want to activate the first one when I start the program and then when I filled the first one I want to jump to second one.

this is a part of my code:

<View style={styles.inputWrapper1}> <CodeInput ref="codeInputRef1" className={'border-b'} codeLength={2} space={10} size={13} inputPosition='center' activeColor='#BFBFBF' inactiveColor='#BFBFBF' codeInputStyle={{ color: '#000000', fontFamily: "IRANSans(FaNum)", fontSize: 28, height: responsiveHeight(5.85), bottom: responsiveHeight(1.14), right: 8 }} onFulfill={(code) => this._onFulfillFirst(code)} /> </View> <View style={styles.inputWrapper1}> <CodeInput ref="codeInputRef2" className={'border-b'} codeLength={7} space={10} size={13} inputPosition='center' activeColor='#BFBFBF' inactiveColor='#BFBFBF' codeInputStyle={{ color: '#000000', fontFamily: "IRANSans(FaNum)", fontSize: 28, height: responsiveHeight(5.85), bottom: responsiveHeight(1.14) }} onFulfill={(code) => this._onFulfillSecond(code)} />

i want to go from first input to second input.

thanks for your help.

Set default value?

I have a use case for setting the value from a state variable. However, I can't find any way to do this.

Add onFocus prop

Please add onFocus props to the CodeInput component so that I can handle some animations using that.

I have issue with installation.

when I installed this component on my project. I got the issue like this.

undefined is not an object ( evaluating _react3.default.PropTypes.func )

I think this course of line 70 on ConfirmationCodeInput.js

inputComponent: React.PropTypes.func

when I cange this with like this, I solve this out

inputComponent: PropTypes.func

Detect whether the value is valid

Right now, there're onFulfill method that will be triggered when the input has been fulfilled. Currently, I use that chance to update my state with the returned code and marked the input as valid. However, when user delete/backspace/removing characters, nothing was trigger and there're no ways for me to get hold the value now to determine that it is no longer valid. So that valid mark on the input still as valid while it isn't.

For example, my validity rule is simply I need it to be 4 characters. onFulfill will trigger when user typed in those 4 characters. My state updated and my UI make the input border to be green. That's good. Now, the user go on and erase the last input leaving it with only 3 characters. My input border still maintain as green, because I got no way to update my state.

How can I achieve this?

'refs' is deprecated

this.refs.codeInputRef1.clear() gives an info message but it works.
Any idea to update it?

On iOS focus issue

When the code input is full and I focus on the first, second, third, etc cell then appears a bug which is not letting me input any new number. It just keeps focusing the first cell.

Type errors

node_modules/react-native-confirmation-code-field/index.d.ts(36,51): error TS2694: Namespace '".../node_modules/@types/react-native/index"' has no exported member 'TextInputProps'.
node_modules/react-native-confirmation-code-field/index.d.ts(43,34): error TS2694: Namespace '".../node_modules/@types/react-native/index"' has no exported member 'ViewProps'.
10:23:25 - Compilation complete. Watching for file changes.

My server will return true on successful validation how to do this?

I have used this component and my server will return true on successful validation how to do this?