jarden-digital/react-native-pincode

How can i use this library

Closed this issue · 4 comments

I write this code but it is not working true ,
how can I control pin ?
I want to use the pin with api , is it possible ?

import React, {Component} from 'react';
import {
    View,
    Alert,
    TouchableHighlight,
    Text
} from 'react-native';
import PINCode from '@haskkor/react-native-pincode'
import {colors} from "../../Assets/Variable";
import {PinResultStatus,hasUserSetPinCode} from "@haskkor/react-native-pincode/index";
import {styles} from "./style";
import delay from "@haskkor/react-native-pincode/src/delay";
import PinCodeEnter from "@haskkor/react-native-pincode/index";

export default class PINCodes extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pinCodeStatus: PinResultStatus.initial,
        };
        this.endProcess = this.endProcess.bind(this);
        this.finishProcess = this.finishProcess.bind(this);
        this.handleResultEnterPin = this.handleResultEnterPin.bind(this);
        // this.finishProcess = this.finishProcess.bind(this)


    }

    endProcess(pinCode) {
        console.log('endProcess', pinCode);
        this.handleResultEnterPin(pinCode)
        this.setState({pinCodeStatus: PinResultStatus.failure});


    };

    finishProcess(pinCode) {
        console.log('finishProcess', pinCode)

    };

    renderForgot() {
        return (
            <TouchableHighlight

                onPress={() =>
                    Alert.alert('Forgot Password')}
                style={styles.forgotWrapper}>
                <Text style={styles.forgotText}>Forgot?</Text>
            </TouchableHighlight>
        )
    }

    handleResultEnterPin(pinCode) {
        console.log('handleResultEnterPin', pinCode)

        this.setState({pinCodeStatus: PinResultStatus.failure});
    };

    onFail(pinCode) {
        console.log('onFail', pinCode)
    };

    pinStatus(pinCode) {
        console.log('pinStatus', pinCode)

    };

    changeInternalStatus = (status) => {
        if (status === PinResultStatus.initial) this.setState({pinLocked: false});
        this.setState({internalPinStatus: status});
    };
    hasSet = async() => {
        const res = await hasUserSetPinCode()
        console.log('hasSet', res)
    }
    render() {
        this.hasSet()

        return (
            <PINCode status={'enter'}
                     disableLockScreen
                     passwordLength={6}
                     stylePinCodeTextButtonCircle={{fontSize: 25, fontWeight: 'bold'}}
                     bottomLeftComponent={this.renderForgot()}
                     styleMainContainer={{flex: 1, justifyContent: 'center',}}
                     colorCircleButtons={'transparent'}
                     colorPassword={'white'}
                     colorPasswordEmpty={colors.gray}
                     stylePinCodeHiddenPasswordSizeEmpty={15}
                     stylePinCodeHiddenPasswordSizeFull={15}
                     stylePinCodeMainContainer={{flex: 1,}}
                     buttonDeleteText={'delete'}
                     stylePinCodeColorTitle={colors.Orange}
                     numbersButtonOverlayColor={colors.darkblue}
                     stylePinCodeButtonNumber={'white'}
                     touchIDDisabled
                     changeInternalStatus={this.changeInternalStatus}

                     stylePinCodeEnterContainer={{
                         flex: 1,
                         justifyContent: 'center',
                         alignItems: 'center',
                         backgroundColor: colors.Orange,
                     }}
                     stylePinCodeChooseContainer={{
                         flex: 1,
                         justifyContent: 'center',
                         alignItems: 'center',
                         backgroundColor: colors.primary,
                     }}
                     stylePinCodeDeleteButtonSize={30}


                   //  endProcessFunction={this.endProcess}
                     pinStatus={this.pinStatus}
                     storePin={(pin) => {
                         console.log('pin', pin)
                     }}
                     finishProcess={() => console.log('pin enters')}
                     handleResultEnterPin={(code) => this.handleResultEnterPin(code)}
                     onFail={(attempt) => this.onFail(attempt)}
                // handleResultEnterPin={this.handleResultEnterPin}
                // onFail={this.onFail}
                // finishProcess={this.finishProcess}

                // buttonDeleteComponent={this.renderForgot()}

            />
        );
    }
}

Hi,

I'm not sure I understand sorry.
What is not working?
What do you wish to do with the API you're talking about?

Cheers,
Jeremy

when ı wrote those functions (finishProcess, handleResultEnterPin and onFail) it is not working good so if password is wrong this can't shake and red color, but when ı didn't use those functions it is working perfect , (i am so sorry for bad write english , i read but ı can't write :))
i want to get password code then send i servise if password is correct i change screen but it is wrong i want to show wrong messages or shake
thank you for helps

Hi!

I have trouble understanding the issue.
Could you tell me where the pinStatus used in pinStatus={this.pinStatus} is coming from?
Same goes for changeInternalStatus={this.changeInternalStatus}. This is not a prop of the component unless I'm mistaken.

Cheers,
Jeremy

Closing this issue because there has been no activity for a few months now. Don't hesitate to reopen it if needed.