How to change the state of the component if you override it's methods?

[RZarifov]

How can I control the state of the component if I override handleResultEnterPin and finishProcess methods, among a couple of others? Where also I don't use the "pinCodeKeychainName" prop.

Meaning - how can I tell the component to set it's state on "wrong pincode entered, try again" state for example?

If necessary, I can provide a code example.
Thank you.

[jeremy-farnault]

Hi,

Sorry for the delay.
Have you tried using this prop?
pinStatus | Status coming back to the PIN component after the handleResultEnterPin function. | The status type is a value of the PinResultStatus enum (initial, success, failure, locked)
Hope it can help :)

[Relax594]

neither does work or i have no clue how this should work.

const authUser = (pin) => {
        if (pin === '1234') return PinResultStatus.success;

        return PinResultStatus.failure;
    };

<PINCode
        status="enter"
        finishProcess={() => {
            navigation.reset({
                 index: 0,
                 routes: [{ name: 'Übersicht' }],
            });
        }}
         handleResultEnterPin={(pin) => authUser(pin)}
 />

always says "invalid pin".

Same result when using useState in something like this:

const authUser = (pin) => {
        if (pin === '1234') setPinStatus(PinResultStatus.success);
        else setPinStatus(PinResultStatus.failure);
    };

<PINCode
        status="enter"
        pinStatus={pinStatus}
        finishProcess={() => {
            navigation.reset({
                 index: 0,
                 routes: [{ name: 'Übersicht' }],
            });
        }}
         handleResultEnterPin={(pin) => authUser(pin)}
 />

If im not mistaken it will never work because in PinCodeEnter.tsx Line 149 it's like this:

            if (this.props.handleResult) {
                this.props.handleResult(pinCode);
            }
            this.setState({ pinCodeStatus: PinResultStatus.initial });
            this.props.changeInternalStatus(PinResultStatus.initial);
            const pinAttemptsStr = await AsyncStorage.getItem(this.props.pinAttemptsAsyncStorageName);
            let pinAttempts = pinAttemptsStr ? +pinAttemptsStr : 0;
            const pin = this.props.storedPin || this.keyChainResult;
            if (pin === pinCode) {
                this.setState({ pinCodeStatus: PinResultStatus.success });
                AsyncStorage.multiRemove([
                    this.props.pinAttemptsAsyncStorageName,
                    this.props.timePinLockedAsyncStorageName,
                ]);
                this.props.changeInternalStatus(PinResultStatus.success);
                if (!!this.props.finishProcess) this.props.finishProcess(pinCode as string);
            } else {
                pinAttempts++;
                if (+pinAttempts >= this.props.maxAttempts && !this.props.disableLockScreen) {
                    await AsyncStorage.setItem(this.props.timePinLockedAsyncStorageName, new Date().toISOString());
                    this.setState({ locked: true, pinCodeStatus: PinResultStatus.locked });
                    this.props.changeInternalStatus(PinResultStatus.locked);
                } else {
                    await AsyncStorage.setItem(this.props.pinAttemptsAsyncStorageName, pinAttempts.toString());
                    this.setState({ pinCodeStatus: PinResultStatus.failure });
                    this.props.changeInternalStatus(PinResultStatus.failure);
                }
                if (this.props.onFail) {
                    await delay(1500);
                    this.props.onFail(pinAttempts);
                }
            }

So even if we overwrite handleResultEnterPin, it will still run the default process afterwards. The issue or the thing i try to do is in this issue: #155

[jeremy-farnault]

Yep both could be fixed at the same time 👍
As I mentioned in #155 a PR would be helpful if you need this quick.

[AlphaJuliettOmega]

handleResultEnterPin

Says required: false, return type / function type: any

on the docs here:https://www.npmjs.com/package/@haskkor/react-native-pincode

is the function I pass to handleResultEnterPin supposed to return a status: PinResultStatus?