jarden-digital / react-native-pincode Goto Github PK

Hey,

We are trying to use react-native-pincode on AppCenter and are running into an issue. If you setup a simple project that uses react-native-pincode then write a Unit test such as:

it('renders without crashing', () => {
   const rendered = renderer.create(<SetPinCodeScreen
     setPinCode={ store }
      />).toJSON();
  expect(rendered).toBeTruthy();
});

Then you get the following error:

FAIL src/views/set-pin-code/SetPinCodeScreen.test.tsx
  ● Test suite failed to run

    /Users/vsts/agent/2.136.1/work/1/s/node_modules/@haskkor/react-native-pincode/dist/index.js:37
        async componentWillMount() {
              ^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      1 | import * as React from 'react';
      2 | import PINCode, { IProps } from '@haskkor/react-native-pincode'
    > 3 | import { StyleSheet } from "react-native";
        |                         ^
      4 | 
      5 | interface Props extends IProps {
      6 |   id?: string

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/views/set-pin-code/SetPinCodeScreen.tsx:6:17)

I looked into that method:

async componentWillMount() {
    await AsyncStorage.getItem(this.props.timePinLockedAsyncStorageName || timePinLockedAsyncStorageNameDefault).then((val) => {
      this.setState({pinLocked: !!val})
    })
  }

I think maybe AsyncStorage is hanging?

Any thoughts, are you running this on a CI?

after Locked screen goes away, password not resetted and have unlimited length.

I dont use handler, only required props.

iPhone X simulator.

by the way, why so bad customization? awesome component :)

There is no possibility to override string on ApplicationLocked Come back later and try again..

Maybe im missing something obvious but I cant seem to work out how I am supposed to get an event / callback when the user has chosen a pin (status is "choose").

The "finishProcess" callback seems to only be triggered after the user has entered the pin when the status is "enter".

Hello, I would love to handle on my own failed attempts, could you add property to disable locked screen? (But still need failed attempts to be counted and passed to onFail method)

Hi,

The fix for #48 in commit e26fb9d now means that when we set pinStatus on PINCode this value is now overwritten in the method endProcess. We need a way to be able to replace the method endProcess(pinCode) with our own handler completly. Just to be clear we are not using the storedPin approach, and instead manage the pinStatus property ourselves.

During creating new PIN view and setting touchIDDisabled prop by setState it does not re render and ask for face id, tried to do so on iphone X.

@haskkor/[email protected]
[email protected]

import React from 'react';
import {View} from 'react-native';
import PINCode, {hasUserSetPinCode} from '@haskkor/react-native-pincode';
import TouchID from 'react-native-touch-id';

export interface Props {

}

export interface State {
    status: "choose" | "enter" | "locked";
    isTouchIdSupported: boolean;
}

class AuthPinScreen extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);

        this.state = {
            status: 'choose',
        };
    }

    componentWillMount(): void {
        hasUserSetPinCode(Config.pin.codeKeychainName)
            .then((a) => {
                if (a) {
                    this.setState({status: 'enter'});
                }
            })
            .catch(() => this.setState({status: 'locked'}));

        TouchID.isSupported()
            .then(() => {
                this.setState({isTouchIdSupported: true}, () => {
                    this.forceUpdate();
                });
            })
            .catch((e: any) => console.log(e));
    }

    render(): React.ReactNode {
        return <View>
            <PINCode
                status={this.state.status}
                touchIDDisabled={!this.state.isTouchIdSupported}
            />
        </View>;
    }
}

export default AuthPinScreen;

Hello @Haskkor

Can't find a way to change title and subtitle colors.

Could you please add this to props?

Is there any way to change localization for touch id screen texts?

Hey there, thank you for this awesome library! We are using it and it's great.

I'm having one issue though, while trying to change the fontFamily of the text portions of the <PINCode />:

const primaryFont = 'Avenir-Book';
const fontWeight = '400';

<PINCode
  colorPassword={CommonUtils.uiColors.success}
  numbersButtonOverlayColor={CommonUtils.uiColors.success}
  styleMainContainer={{
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }}
  styleLockScreenText={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  styleLockScreenTextButton={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  styleLockScreenTextTimer={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  stylePinCodeViewTitle={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  stylePinCodeTextButtonCircle={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  stylePinCodeTextTitle={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  stylePinCodeTextSubtitle={{
    fontFamily: primaryFont,
    fontWeight: fontWeight
  }}
  storedPin={this.props.pin}
  maxAttempts={3}
  textButtonLockedPage="Log In with email/password"
/>

None of these seem to be taking effect, am I doing this incorrectly? Thank you!

First, thanks for your great PinCode component, it looks fantastic 👍.
However, owing to the lack of a copyright statement, it makes me stop the pace to use it in a potential commercial product.
If that not be a problem, would you please give a simple Example of how to use this component? Suppose using this component in a single screen, combined with react-navigation, how could I navigate to another screen after successfully PIN CODE input?

Original ApplicationLocked render function is:

  render() {
    return (
      <View>
        {this.renderErrorLocked()}
      </View>
    )
  }

Here we apply container styles on top View component of renderErrorLocked, on Android it still remains hidden despite absolute positioning and you see PinCodeEnter.

Moving container styles here solves the issue for me:

  render() {
    return (
      <View style={styles.container}>
        {this.renderErrorLocked()}
      </View>
    )
  }

https://github.com/fnzc/react-native-pincode/blob/master/src/PinCodeEnter.tsx#L143

Maybe this code could be moved at very end so it will be safe to unmount component on fails and this would also allow for user to manage pinAttemptsAsyncStorageName property in AsyncStorage on thier own

[email protected]
[email protected]
[email protected]

Keep up the good work. 👍

It is crashing on real device Iphone X with version above 11, I couldn't get any logs yet...
It worked on older real devices.
It worked on Iphone X simulator.

any one tested it on Iphone X ?

Hi,
Thanks for a great library.
Could you please expose a property to adjust password hidden circle sizes (pre and post entry).
If you'd prefer, I could submit a pull request.
Many thanks,
Justin

null is not an object (evaluating 'RNKeychainManager.SECURITY_LEVEL_ANY')

dependencies:
@haskkor/react-native-pincode#1.13.0
react-native-keychain#3.1.1

How can I use bottomLeftComponent ?
I set this value to any but it seems not work

status: choose or enter has a function related ?
Want to make an example of how to use status: choose or enter?

It should not be committed, ever.

i want chang title and message for TouchID.

Thank you.

If we're using enter mode, we can use endProcessFunction to get the entered pin code:

<PINCode
    status={'enter'}
    endProcessFunction={(pin) => console.log('Got pin: ' + pin)}}
/>

However, if we're using choose mode, I'm not seeing a simple way to get the correct pin code. We can use finishProcess to indicate when the correct pin has been entered, but this doesn't provide the pin code.

I could use storePin and then store the pin myself, but it would be a bit nicer if finishProcess could come with the pin :)

Hopefully I'm not overlooking a simple way to do this.

Thanks for the great library!

<PINCode status={'choose'} storePin={false}/>

How to reproduce

Use android

How to fix

Add
<uses-permission android:name="android.permission.VIBRATE"/>
to

AndroidManifest.xml

Guys, do you have any contributing guide lines for this project, a branching strategy or something?

I was just wondering how you would go about detecting if the user has actually set the pincode or not.

For for the following example:

1. User logs into the app and sets Pincode for quick access next time
2. User exits app
3. User enters app again. App needs to now determine if the user has set a pincode yet, in which case they should be directed to the "EnterPincode" screen, otherwise the user should be directed to the "LoginAndSetPincode" screen.

So the problem is around step 3, how does the app know which screen to send the user to? Obviously we could use localstorage to store if the user has set a pincode for the device but that means that react-native-pincode and the app are using two different stores for the same value so they could go out of sync?

I guess one way to do it would be to use the "storePin" and "storedPin" properties to proxy access to react-native-keychain but this seems somehow wasteful?

Thoughts?

Steps for reproduce

1. Try to login and enter PIN Code incorrectly some times so access is locked
2. Wait until the time is over and Enter your PIN Code step is shown again
3. See pict. Note that the 4 PIN Code dots are filled/completed. The user has to manually deleted them before entering the 4 digits again

4. It would be nice to show the 4 dots cleared as when first requested

Solution

I've made the dirty hack to fix it and I'm using that
https://github.com/marla-singer/react-native-pincode/blob/2a39d1bff9d560c9d860b1aa05fc9458ec063fb3/src/PinCode.tsx#L137

If it's okay for you then I can prepare PR. If it isn't then I'm looking forward to see your changes and a new version of the library :)

how can i disable Touch id/Face id ? status={"enter"} always ask me to use touch id

I am using Android with USB debugging.
And animation, for example, of wrong pin are really laggy and have low fps. In builded app it's a little better, but still.
Can you please optimize animation for better perfomance?

Nothing in docs, and getting ts error while trying to pass handleResult (incorrect types I guess)

This property is not applied until the Delete button is pressed once.

The problem appears to be in PinCode.js, line 223, where the state is set to the default colorDelete: 'rgb(211, 213, 218)' instead of checking if the property styleDeleteButtonColorHideUnderlay has been supplied, as it does for example in onHideUnderlay.

Hello, can i customize the background when show and hidden?

Thanks

Hi. First of all thanks for library, I like many possibilities for customization. But now I am missing one.

Could you please add property where I can define custom component, which will be rendered in the left bottom corner of numpad (now there is nothing rendered) ?
So it would be something like
buttonLeftBottomComponent={() => <MyCustomButton title={...} onPress={...} />}.
I could really use that button for some actions.

This is my code , please help me

`
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Pincode from './react-native-pincode';
import Password from './src/pincode/index';

type Props = {};
export default class App extends Component {
renderPassword(){
return(

)
}
render() {
return (
<Pincode
status={'choose'}
passwordComponent={this.renderPassword()}
passwordLength={4}
/>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},

});
`

Hi!

I was wondering what can you do, once you set the pin code and want to remove it later. I used Keychain.resetGenericPassword, but the hasUserSetPinCode still returned with true, even though the pin code i set no longer worked :/

Would it be possible to one more option to pinSatus ('reset') ?
I will try yo look into it in the meantime

Hi,
Another suggestion we have is to have a configuration option to show the PIN code as the user types. This would be useful when entering an MFA code, as opposed to a PIN.
Best regards,
Justin

Hi,

Do you plan to migrate away from the deprecated React methods such as:
componentWillReceiveProps
componentWillUpdate

Thanks,
Justin

hi,

i dont know if it is bug or not, if i set passwordLength to 6, i can type over 6 char. it means if user typed to 8 char accidentally, user need to backspace 2 more extra. Sorry for my bad english, i hope you understand what i mean.

and so, which options can i use to run function if user already type 6 chars, so user cant typed 7th and 8th char.

thanks

The textDescriptionLockedPage property is prefixed by // todo replace.

Hi!

For some time now, hasUserSetPinCode() on iOS always returns true when I open the app. If I then call deleteUserPinCode, it returns with false. I thought it was just a simulator issue, but it returns true for fresh install on new devices. Am I missing something with the react-native-keychain stuff? I tried the latest update with pinCodeKeychainName and serviceName no results. If i test it with some faceroll hasUserSetPinCode(hjvhgkvjhhjkvj) , it still returns true.

Can you elaborate how pinCodeKeychainName works btw? if I set it to unique is, it should save it under that name, right?

Hi buddy and thanks a lot for this amazing library!

Could you please take a look on this issue?
naoufal/react-native-touch-id#65

I'm using your package and face this crash with android 5.

You can easily reproduce it with android emulator and 22'th API

Is it possible to avoid using Fingerprint on old android devices using this method:
naoufal/react-native-touch-id#65 (comment)
?

In my android device react-native-pincode component is very slow tell me what can i do to make this fast. when i click number button it responds very late peroformance very slow.
please help , i am stuck with it,

My Code

<PINCode
status={'enter'}
finishProcess={()=>this.finishProcess()}
colorPassword={'#7E7EEF'}
numbersButtonOverlayColor={'#7E7EEF'}
touchIDDisabled={true}
pinCodeKeychainName={'pincode'}
onClickButtonLockedPage={this.quitApplication}
/>

First of all, thanks for sharing a nice library.
Can you please cleanup the dependencies and devDependencies?
Especially, react-navigation. Actually, this library doesn't depend on the navigation lib.
So while we are using another navigation lib, it becomes to be spam package.
I hope you to cleanup the dependencies to install only necessary packages.
Thanks in advance.

Could you please add example project in this solution?

Hi,

I wondered if you'd thought of adding pluggable validation rules when choosing a PIN, such as non-sequential numbers, and non-repeating numbers.

Or perhaps just a couple of new parameters that allow restricting the use of sequential numbers and all repeating numbers?

If not, would you accept a pull request?

Thanks.

Hey,

Firstly awesome component mate, very good work.

I am testing it in the simulator and it works great except for the final part once the key is confirmed I get an exception:

Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'setGenericPasswordForOptions' of undefined
TypeError: Cannot read property 'setGenericPasswordForOptions' of undefined
    at Object.setGenericPassword (blob:http://localhost:8081/1f2ec60d-926f-43e9-b4a3-564cdc3a4f6e:203342:30)
    at PinCodeChoose._callee$ (blob:http://localhost:8081/1f2ec60d-926f-43e
...

I suspect it is to do with https://github.com/oblador/react-native-keychain but cant for the life of me work out why its not working.

Does one have to install react-native-keychain explicitly or is just react-native-pincode's dependency on it good enough?

import PINCode, { PinResultStatus } from '@haskkor/react-native-pincode'

<PINCode
 status={'enter'}
 pinStatus={this.state.pinStatus}
 handleResultEnterPin={this.handleResultEnterPin}
 onFail={this.onFail}
/>

I have simple pin code component then, inside handleResultEnterPin Im setting pin status to failure
this.setState({ pinStatus: PinResultStatus.failure })

And after first entry I can retype pin, but then component just stuck on second entry last digit and onFail is not being fired

Expected behaviour: I should be able to retype pin code as many times as I want and handle this inside onFail method that is being fired after state being changed to failure

I using PINcode to secure my token, but in my app, I also using keychain to storage some other values by storage with other service. But if I save any item to keychain, and then call the method hasUserSetPinCode, it always return true, whether PINCode I have not set anywhere. Please provide a params for hasUserSetPinCode() like service to get value that they are not in my service.

How i can change delete button text only ?
I want to change delete button text, and keep same Icon.

please , tell me how to get my enter code .

<PINCode
status={'choose'}
finishProcess={()=>console.log('pin enters')}
handleResultEnterPin={(code)=>{
console.log(code);
}}
onFail={(attempt)=>{
console.log(attempt+'fail');
}}
/>