ttdung11t2 / react-native-confirmation-code-input

A react-native component to input confirmation code for both Android and IOS
MIT License
411 stars 346 forks source link

How to get value user write? #69

Open anastely opened 4 years ago

anastely commented 4 years ago

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');
    }
  };
retyui commented 4 years ago

@anastely

You can use a fork without this problem https://github.com/retyui/react-native-confirmation-code-field

anastely commented 4 years ago

@retyui I will use it as soon as possible, Thanks :)