talut/react-native-pin-view

Easy, convenient, quick-forming PinView component.

react-native-pin-view's Issues

Change font and "dot" style

Hello, I am using your library and I am trying to use my personal style set for the PIN login. Do I have the possibility to change the default one?

Thanks for your library! 🐸

Fill last circle before onComplete event

I put PinView in a modal screen and hide the modal screen in onComplete event. Every thing is ok but PinView raise onComplete just after pressing last number button without filling the last circle.

How can I solve that?

[REQUEST]

Add an ESLint configuration file to the root of the project.

Warning when using Icon for deleteText

Describe the bug
Hi, thanks for your useful library! When we do as suggested in issue #30 we get the warning

Warning: Failed prop type: Invalid prop deleteTextof typeobjectsupplied toPinView, expected string.

To Reproduce
Use deleteText={<Icon name="ios-backspace" size={32} />}

Rendering is ok, but a warning is present.

Expected behavior
No warnings.

Device (please complete the following information):
Expo SDK, Android Emulator for Nexus, API 28, Android 9.0

Layout on smaller screen.

Describe the bug
Layout not proper on smaller screen device, have a look at screenshot.

My code is as per below.

<PinView
                        buttonDeletePosition="right"
                        buttonBgColor="#f1f1f1"
                        onComplete={this.onPinSuccess}
                        pinLength={4} // You can also use like that.
                        
                    />

Device: iPhone SE

Font Family doesn't change in Android devices

Describe the bug
Hi, I would like to say that the applying font-family style doesn't work in Android devices. I tried to pass fontFamily attribute to buttonTextStyle prop, however the font family has not change in Android yet works great in iOS.

Device specification

• Device: Samsung Galaxy A8 2018
• OS: Android
• Version Version 9 (Lollipop)

TS errors for customLeftButton and customRightButton

Describe the bug
I am getting TS errors for the customLeftButton and customRightButton. The error is: -

Type 'Element | undefined' is not assignable to type 'FunctionComponent<any> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<any>'.

react-native-pin-view.d.ts(48, 9): The expected type comes from property 'customRightButton' which is declared here on type 'IntrinsicAttributes & PinViewProps'

To Reproduce

1. Copy paste demo code

Expected behavior
While the buttons are working as expected, it would be great to have everything typesafe

Screenshots

Device (please complete the following information):

• Device: [e.g. iPhone6] Pixel 5
• OS: [e.g. iOS8.1] Android
• Version [e.g. 22] 12

Adding text like "Enter your passcode"

How can I add a message like "Enter your passcode"?

onLongPress option

Hi, is there option onLongPress (beside onButtonPress) in ReactNativePinView. Thanks.

The delete button style does not change

I tried to use the prop feature to change the delete button style but it does not work.

I use version 2.5.0 with the following prop:

buttonDeleteStyle={<Icon name="ios-backspace" size={32} />}

nothing happens.

Add prop to not hide inputs

This is a great component, but it will be nice if you added a prop so we don't hide the characters that are inputted. It will allow for use in much broader situations instead of just entering a pin

Custom styles for Delete button

How can I change styles just for delete button?

buttonSize not being applied to "0" button

Describe the bug
buttonSize not being applied to "0" button

To Reproduce
Set button size to something like buttonSize={100}

Expected behavior
"0" button should be size of 100

Additional context
In index.js buttonSize is being overwritten by customLeftButtonSize. I was able to set the button size to 100 by setting customLeftButtonSize=100.

<ViewButton disabled={disabled} accessible={accessible} activeOpacity={activeOpacity} onButtonPress={() => onButtonPressHandle("zero", "0")} buttonSize={buttonSize} text={buttonTextByKey.zero} customTextStyle={buttonTextStyle} customViewStyle={buttonViewStyle} buttonSize={customLeftButtonSize} />

Option for clearing userInput onFailure()

Hi,

It would be great to have an option to clear userInput (and/or this.state.animatedInputIndex, and then the circles in the upper side) when onFailure.

I think that it can be done in index.js, in keyboardOnPress, before calling onFailure. Something like

this.userInput = []
this.setState({
          animatedInputIndex: []
});

Thanks for this module!

[REQUEST] Turn Delete from String into Icon ?

Is there a way to turn the delete from string into icon ?

Hit exception "Unable to resolve "./libs/parts/KeyboardView"

I have updated the react-native-pin-view from version 2.5.0 to 3.0.0 using command 'npm install react-native-pin-view@latest --save'. However, when I tried to run the project, it shows exception "Unable to resolve "./libs/parts/KeyboardView" from "node_modules\react-native-pin-view\index.js". The code below shows the current version and dependencies for the package.

package.json :
"react-native-pin-view": "^3.0.0",

package-lock.json :
"react-native-pin-view": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/react-native-pin-view/-/react-native-pin-view-3.0.0.tgz",
"integrity": "sha512-6REScMNTIjhdRs7JUe1wbpz19OM4BcpLRI3w/WIvNCWyLppZlUOE4qne5jsQziUefN5vFlvxyiT4NwrNgQy1Ig==",
"requires": {
"prop-types": "^15.7.2"
}
},

Adding cancel button

Usually PIN code screens has a "cancel" option. How can I add a cancel button at bottom right corner?

Dependency problem on react-native@"^.0.66.4"

Describe the bug

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-native
npm ERR!   react-native@"^0.66.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"^0.63.4" from [email protected]
npm ERR! node_modules/react-native-pin-view
npm ERR!   react-native-pin-view@"^3.0.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

To Reproduce

1. npx react-native init AwesomeProject
2. npm install --save react-native-pin-view

Expected behavior
Updates dependency

How to set pin?

Dear Team,

Is there any possibility to create pin view that could return pin entered and then save it somewhere?

Regards.

Any chance of changing the fontFamily on the keypad?

Currently, we are using this feature on our login screen but the app has its defined fontFamily. I tried adding this font like below, but I was not successful.

buttonTextStyle={{
          color: colors[theme],
          fontFamily: fonts.awash_100,
        }}

The buttons don't take the font up.

Suggested Solution:-
An extra field can be introduced called extraPadTextStyles, I mean, there must be a reason why you only accept colour and fontSize for now, so am looking at not touching that.

So, we can check if this field was defined, extraPadTextStyles, and then we merge it into the buttonTextStyle, this will also support interoperability.

Add extra custom button

Hi @talut
First of all: Thank you for the library. It looks great and has been easy to use so far!

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
I would like to have a "customButton" sit opposite of the delete button. My feature request is because I'm implementing biometric login (e.g. fingerprint) on top of pin authentification, and I would like to have a button with a fingerprint icon to show a fingerprint dialog/alert/modal.
Something similar to this:

Describe alternatives you've considered
I know I could create a view outside of the the react-native-pin-view component, but since the space is unused anyways, and since a button for biometric login is very common, I think it would be appropriate to add a simply prop for a custom button.

Pin View accepts more values than the PinLength attribute

Hello,
In the PinView I am using pinLength attribute and I have set it to 5, the layout shows 5 which is good, but if I type more that 5 numbers it accepts it. Ideally it should only accept pinLength count of numbers right.

here is an example.

   <PinView
              onComplete={(val, clear)=>{
                  alert(val); //if you press 12345678, it will alert definitely more than 5
                }
              }
              pinLength= 5
              buttonTextColor={colors.darkGrey}
              buttonBgColor={colors.lightestGrey}
              inputBgColor={colors.grey}
              inputActiveBgColor={colors.primaryColor}
              />

Am i missing anything to do here?

version : "react-native-pin-view": "^2.1.0",

Thanks
Rao

getting 7 digit while entering pin while pinLength set to 6

if we enter pin frequently then
getting 7 digit while entering pin while pinLength set to 6
Screenshot attached
RN version
"react-native": "0.60.4",
"react-native": "0.60.4",
"react-native-pin-view": "^2.3.1",

[todo]: Add custom button like reset, etc to the end.

is it possible to add additional button/ optional button at the end. similar to 'DEL' button but on the right side ?

Thank you.
Irfan

Error callback is not a function

Hi
Everytime I click on a digit, I receive this error.

Uncaught TypeError: callback is not a function
    at flushFirstCallback (scheduler.development.js:107)
    at flushWork (scheduler.development.js:219)
    at MessagePort.channel.port1.onmessage (scheduler.development.js:611)
flushFirstCallback @ scheduler.development.js:107
flushWork @ scheduler.development.js:219
channel.port1.onmessage @ scheduler.development.js:611

It breaks as an apk but on avd it is dismissable.

I upgraded to the version 3.0.0

This is my code:

<ReactNativePinView
                        inputSize={25}
                        ref={this.state.pinView}
                        pinLength={pinLen}
                        onButtonPress={key => { this.padHandler(key)
                          }}    
                          customLeftButton={this.state.showRemoveButton ? <Icon name={"backspace"} size={36} color={"#FFF"} />: undefined}
                          customRightButton={this.state.showUnlockButton ? <Icon name={"unlock"} size={36} color={"#FFF"} />: undefined}
                        />

Even if I remove the OnButtonPress, the problem continues

react-native info:
React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
Memory: 192.19 MB / 7.66 GB
Shell: 5.4.2 - /usr/bin/zsh
Binaries:
Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node
Yarn: 1.21.1 - /usr/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.15.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 23, 28
Build Tools: 28.0.3
System Images: android-28 | Google Play Intel x86 Atom
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.59.6 => 0.59.6

RTL layout issue

Hello
React native pin view works great, thank you for that.
I have an issue with RTL layout. In Arabic, when it comes to numbers and number keypad it is same as English.
When the phone is set to RTL, the KeyboardView is reversed and the InputView starts from right when pin is entered. but it should be exactly the same as LTR.

Is there way to stop it from change the layout in RTL.

Please suggest

Thanks
R

[REQUEST] Touchable feedback

Is your feature request related to a problem? Please describe.
It's an UI improvement, maybe this can be a problem on some apps, due to some app stores specific guidelines.

Describe the solution you'd like
Add a touchable feedback on the buttons.

Describe alternatives you've considered
I was thinking in adding a TouchableNativeFeedback to wrap the buttons components.

Additional context
Right now I'm working on adding a pin screen to a client. One of the requirements for this task is a touchable feedback, to comply with google material design guidelines, and maybe adding another type of tactile feedback, like a small vibration.
If you guys think it's interesting I can try to open a pull request with both of those features.
What do you guys think?

Emoji Keyboard

Hey. I'm new to react-native and I'm creating an app which will verify the users by entering emoji's instead of normal number input. So could you please help me out with how the keyboard view can be changed to display certain emojis instead of the numbers. I would like to display 10 emojis instead of the numbers on the keyboard.
Thanks

[REQUEST] PinViewProps interface improvements

onComplete
When the user completed input the pin, then inputted value will return. Also clear() is returning too. So if you want to remove user input after onComplete call clear() func in onComplete.

The onComplete property should be updated to include these parameters

 interface PinViewProps {
        pinLength?: number,
        showInputs?: boolean,
        inputTextStyle?: object,
        buttonTextColor?: string,
        returnType?: string,
        buttonBgColor?: string,
        inputBgColor?: string,
        onComplete: () => void,
        disabled?: boolean,
        inputActiveBgColor?: string,
        inputBgOpacity?: number,
        deleteText?: string
    }