ttdung11t2 / react-native-confirmation-code-input Goto Github PK

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 ?

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

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

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.

Invalide props comapereWith length is not equal to codeLength in ConfirmationCodeInput

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

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??

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

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"
}
}

<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

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

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

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

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

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?

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

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

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({})')

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.

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.

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.

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?

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

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

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

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

💀 This repository is dead.

The author does not support it 😭.

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

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

Hi,

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

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

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?

onCodeChange doesn't work for me

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!

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)} />

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.

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

Does this support expo web?

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.

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'
          />

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

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)}
/>

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

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"
/>

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

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');
   }
 };

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

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

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