Possible suggestions?

[Angelk90]

@prscX : Hi, congratulations as always. Can I give some possible suggestions?

[prscX]

Hi @Angelk90,

Definitely you are always welcome and appreciated 😄. Please find below list of native libraries I am planning to integrate:

Pattern

• aritraroy/PatternLockView
• Tuqierrenzu/TQGestureLockView

I firmly believe that this library should be implemented in JS, but based on my current task timelines I don't have time to work on the same.

P.S: Tomorrow I will be back from my vacation and coming week I am planning to look into all the issues raised by you and community.

Thanks Pranav

[Angelk90]

@prscX : Happy holiday. :smile:

These are the possible suggestions that at the moment come to mind. 1) Give the possibility to put a background with the image, and to set the transparency. This is the effect I got:

This is the solution I tried, but we need to make some changes, at least I think:

import React, { Component } from "react";
import { StyleSheet, ViewPropTypes, Platform, ImageBackground, StatusBar } from "react-native";
import PropTypes from "prop-types";

import { requireNativeComponent } from "react-native";

class RNLockScreen extends Component {
  static propTypes = {
    ...ViewPropTypes,

    type: PropTypes.string,
    mode: PropTypes.number,
    pattern: PropTypes.object,
    pin: PropTypes.object,
    props: PropTypes.object
  };

  static defaultProps = {
    type: "pin",
    mode: -1,
    onStarted: undefined,
    onProgress: undefined,
    onComplete: undefined,
    onCleared: undefined,
    onEmpty: undefined,
    onChange: undefined,
    pattern: {
      dotCount: 3,
      dotNormalSize: 12,
      dotSelectedSize: 24,
      pathWidth: 4,
      aspectRatioEnabled: true,
      aspectRatio: "square",
      normalStateColor: "#FFFFFF",
      correctStateColor: "#0000ee",
      wrongStateColor: "#786787",
      dotAnimationDuration: 200,
      pathEndAnimationDuration: 100,
      lock: '-1'
    },
    pin: {
      pinLength: 6,
      textColor: '#E6E6E6',
      textSize: 16,
      buttonSize: 72,
      verticalSpacing: 24,
      horizontalSpacing: 36,
      buttonBackgroundDrawable: undefined,
      deleteButtonDrawable: undefined,
      deleteButtonSize: 16,
      showDeleteButton: false,
      deleteButtonPressedColor: '#C8C8C8',
      dotEmptyBackground: '',
      dotFilledBackground: '',
      dotDiameter: 12,
      dotSpacing: 16,
      indicatorType: 'fillWithAnimation',
      lock: '-1'
    }
  };

  _onChange = (event) => {
    if (event.nativeEvent.eventType === 'started') {
        this.props.onStarted && this.props.onStarted()
    } else if (event.nativeEvent.eventType === 'progress') {
        this.props.onProgress && this.props.onProgress(event.nativeEvent.pattern)
    } else if (event.nativeEvent.eventType === 'completed') {
        this.props.onCompeted && this.props.onCompeted(event.nativeEvent.pattern)
    } else if (event.nativeEvent.eventType === "cleared") {
        this.props.onCleared && this.props.onCleared()
    } else if (event.nativeEvent.eventType === 'empty') {
        this.props.onEmpty && this.props.onEmpty()
    } else if (event.nativeEvent.eventType === 'change') {
        this.props.onChange && this.props.onChange(event.nativeEvent.pattern)
    }

    console.log("Event: " + event.nativeEvent.eventType + ", Pattern: " + event.nativeEvent.pattern);
  }

  render() {
    let patternProps = Object.assign({}, RNLockScreen.defaultProps.pattern, this.props.pattern)
    let pinProps = Object.assign({}, RNLockScreen.defaultProps.pin, this.props.pin)

    return (
      <ImageBackground source={{ uri: 'https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-619176.jpg' }} style={{ width: null, height: null, flex: 1 }}>
        <StatusBar backgroundColor="rgba(52, 52, 52, 0)" translucent />
        <LockScreen
          style={[style.container, this.props.style]}
          props={{
            type: this.props.type,
            pattern: patternProps,
            pin: pinProps
          }}
          onChange={this._onChange}
        />
      </ImageBackground>
    );
  }
}

const LockScreen = requireNativeComponent("RNLockScreen", RNLockScreen, {
  nativeOnly: { onChange: true }
});

const style = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: 'center',
    //alignItems: 'center',
    backgroundColor: 'rgba(52, 52, 52, 0.5)',
    //backgroundColor: "#22b3f7"
  }
});

export default RNLockScreen;

2) For the "pin" type, set up a graphic similar to this:

Under each number there are the letters, in case the person encodes numbers with letters in case the person does not remember where the letters are. ;)

Add the send button, near zero is under nine. I would set the button as if it were an icon. I would use react-native-vector-icons, letting the user choose which package to use and which icon to use.

Add the input field, with the delete icon, as you can see in the image, where the code is inserted and with the possibility to delete them if you make a mistake. So you can enter the code again.

3) Insert a new type "keyboard", a simple input field, with the delete icon, as in case 2, where the code is inserted from the keyboard.

Similar to this: or

P.s. Only a doubt arises, at the end when the code is inserted, if it is correct it makes an action, if it is wrong it should do another.

For example, if it is correct, you can do a: this.props.navigation.navigate ('Access'); If it is wrong, it gives an error message.

Quite right?

[prscX]

@Angelk90 WOW :smile I didn't thought it in that way, before publishing I will definitely include above suggestions.

Thanks Pranav

[Angelk90]

@prscX: Forgive me I did not want to give you more work. :smile: How had you thought about it at the beginning?

[prscX]

It's really nice @Angelk90 that you have shared the use cases. We should definitely loop all the suggested items.

My use case was simple, just to have a pin/pattern authentication without any customizable items, but you have shared points through which we can make this more intuitive.

Thanks Pranav

[prscX]

Hi @Angelk90, I have add backgroundImage prop in order to set the screen background.

I will work on other suggestions as well. Meantime you can install v0.0.3 in order to use the same.

Thanks Pranav

[Angelk90]

Hi @prscX, I did a test. From dependency problems, the "react-native-material-ripple" dependency is lacking.

Looking at Usage: to take the type uses: RNPopoverMenu.Type.Pin But I do not understand why RNPopoverMenu, which uses react-native-popover-menu.

I could not prove it gives me the following error:

[prscX]

My Bad, While doing writeup I copied few steps from react-native-popover-menu README and got missed to change the name.

Apologies for the same. I have updated README

Thanks Pranav

[Angelk90]

@prscX : I am given the following error, if I do it using RNLockScreen.Type.Pin.

[prscX]

Hi @Angelk90,

Can you please try below codes:

• Types

  • Pin: 0
  • Pattern: 1

• Modes

  • Capture: 0
  • Verify: 1

In RNLockScreen source I have created two static props Types & Modes which ideally should be accessible using RNLockScreen.

In example I have directly used the codes and believing that it will work updated in README. My Bad ideally I should have checked this.

Thanks Pranav

[Angelk90]

@prscX : I tried this way: <RNLockScreen type = {1} mode = {1} The same mistake I do not understand what the problem may be.

[prscX]

Hi @Angelk90, Can you please try <RNLockScreen type={0} mode={0} once, just wanted to confirm the issue is related to Pattern or even Pin also has the issue.

Thanks Pranav

[Angelk90]

@prscX : Already done, same problem.

[prscX]

@Angelk90: Interesting.

• What if we assign RNLockScreen = RNLockScreen.default?
• Can you please try by running example project. Just wanted to confirm the issue is related to usage/environment or even the example project as the issue.

Thanks Pranav

[Angelk90]

@prscX : I tried an example, now I'm given the following error.

But it seems to give problems, also you do not see the buttons at the end in the pin mode. In that Pattern, from the following error:

I advise you to create a new project from scratch, and install the component so you can check if any problems. Also if as image backgroundImage I want to put an outlet from http, would it be possible or only locally? P.Š. When you want me to do some tests let me know.

[Angelk90]

@prscX : I did some tests. There is a problem with the lib react-native-svg, due to installing it manually.

In usage you should change at least I think with import RNLockScreen from 'react-native-lock-screen' with import [{RNLockScreen} from 'react-native-lock-screen' There is an onDone function, for when the code is entered and verified.

It looks like the Pattern type, does not seem to work.

[prscX]

@Angelk90: I believe you got it working for Pin type?

• SVG: Have you linked SVG in your app? react-native link react-native-svg

• Pattern: Have you run below command? What exact error are you getting? cd ./node_modules/react-native-lock-screen/ios/ && pod install

Meantime I will setup a sample example and verify the same.

Thanks Pranav

[Angelk90]

@prscX : At the moment it works after installing react-native-svg and linking, independently. The Pattern type does not work. I get this error: https://camo.githubusercontent.com/2525eede53d4df705d4060ebd3f8ca295cfb24ce/68747470733a2f2f692e696d6775722e636f6d2f554a4b7a5359762e6a7067

[prscX]

@Angelk90:

• Just wanted to confirm, have you run below command? react-native link react-native-lock-screen

• Are you running the app from command line or android studio? In case android studio then can you please put breakpoint on below RNLockScreen.java class props method and please step source in order to find the exact source line number because the screenshot is not providing the exact exception line number.

Thanks Pranav

[Angelk90]

@prscX : Yes, I did "react-native link" directly. Command line.

I made some changes on the js file, related to the Pin type. Here you find everything: js.zip

The graphics would be something like this:

1) The effect that react-native-material-ripple, is not an effect that personally seems pleasant. Due to the fact that it takes up all the space, in reality the Ripple effect should only be rounded. It will be a matter of personal taste.

2) backgroundImage, would it be possible to take it also via http?

3) There is a function like onCapture, but for Verify, that when the correct password is entered does a specific action? OnDone type?

4) Would it be possible to remove the thing that the dots, change color when the pass is inserted, whether it is right or wrong?

5) Personally I believe that when the user inserts the pass, and it is wrong I think the dots with the corresponding code should be reset. Either it could add an attribute for those who do not want to.

Let me know what you think.

P.Š.

a) As you can see I could not perfectly match the numbers with the letters in the central position, see if you can.

b) For the backspaceSVG image, as you can do to make the whole image white except for the X that is transparent, that is, that you see under the background.

[prscX]

Thanks @Angelk90 for the feedback/suggestion.

Quick Update: I have push a release V0.0.4 with onVerified callback, this will help in order to listen for successful authentication when the mode is 2.

I am looking into other suggestions and will keep you posted.

Thanks Pranav

[prscX]

Hi @Angelk90: I have found the root cause for SVG issue. This is due to the conflict between SVG package versions.

In library I have configured SVG: 6.3.1 and in your app the version might be a different one, due to which two SVG packages are getting downloaded and creating conflicts.

Their are two ways in order to resolve this:

• Match the same SVG version in your app
• Delete the node_modules folder from react-native-lock-screen post installation.

Please let me know in case this solution does not resolve your issue.

Thanks Pranav

[Angelk90]

@prscX : I had solved by installing react-native-svg again.

[Angelk90]

@prscX : I was reminded of an idea, your Gradient Blur View project, if the user instead of inserting an image wants to insert a colored background could do it. Too bad it only works for iOS.

Have you got to see the zip file and the suggestions that I had proposed?

[prscX]

Hi @Angelk90: Thanks for the suggestion.

My Apologies. Completely linked-up with couple of other stuffs. I have fixed the Icons issue, now it will show up all the icons.

Can you please install latest version and verify the same. Coming weekend I am planning to work on the suggested topics.

Thanks </ Pranav >

[Angelk90]

@prscX :

[Angelk90]

@prscX : I did some tests. As you can see if you rotate the device the buttons are bad, first image. If I put an image as background image, image can only be seen at the bottom, image two. If I close the app and remove the cable connected to the PC or we can say restart the device and then open the app, the icons disappear, image three.

[prscX]

Thanks @Angelk90 for reporting the issue. I will look into this.

Thanks </ Pranav >

[Angelk90]

@prscX : Let me know when you want me to do other tests. :)

[prscX]

Hi @Angelk90,

I have fixed the background image issue. You can install latest v0.0.6 for the fixes.

Let me know in case you still face the same issue.

Thanks </ Pranav >

[Angelk90]

@prscX : I did some tests. 1) the problem of the background has been fixed. 2) The problem still remains that if after compiling the project, app starts and works, but if I later do the following steps which are: a) I close the app b) Remove the cable c) Reapply the app The two icons below that near zero, do not appear. I do not know if the problem is due to my debugging. 3) You have got to see the zip file and the suggestions above.

[prscX]

Thanks @Angelk90 for reporting the issue. I will look into the issue.

Thanks </ Pranav >

[Angelk90]

Hi, @prscX are there any news? In particular to this post: https://github.com/prscX/react-native-lock-screen/issues/1#issuecomment-376215338 Let me know what you think.

[prscX]

Hi @Angelk90: Is possible to share PR of what you are looking for. I am slightly lined-up with few other planned items.

Most of the source is implemented in JavaScript only. Please let me know incase you face any issues.

Thanks </ Pranav >

[Angelk90]

@prscX : Try to take a look here, there are some possible changes you could do: https://github.com/Angelk90/react-native-lock-screen/commit/ede811a18092663fea530b69dd6c74ce5c173b51 The suggestions I had tried are based on the old version.

For example, I added the letters and removed the white background in the buttons. You could put these options where:

• Give the possibility to choose the background color of the buttons or do not put it transparent, as in my case.
• Give the possibility to put the letters under the buttons, or not, at the user's choice.
• Also in my opinion in the passcodeVisualizerContainer it would be better to put the possibility to put borderBottomColor
• In addition, for the delete icon do you think so you can choose the internal color of the "x" and the external color of the image? Why if you consider my example: https://user-images.githubusercontent.com/20476002/37917114-dcfafa18-311d-11e8-9ec8-346a62c99e89.jpeg It would be very nice that the gray part is white and the part of the "x" is transparent.

[prscX]

Thanks @Angelk90 for sharing the snippet.

I have pushed a release v0.0.8 with the below suggested enhancements:

• Enabled rippleProps to set pin ripple color
• Changed pin ripple shape to circle
• Added alphabetPinSuggestion prop to add pin suggestions

Please refer README for the enhanced props.

TAG: 0.0.8

Thanks </ Pranav >

[Angelk90]

@prscX :

[Angelk90]

@prscX : I was trying the new version but did not fill in the following error: I have executed the following instructions: https://github.com/prscX/react-native-lock-screen#getting-started But I can not get it done.

[Angelk90]

@prscX : I managed to start it, as usual, I congratulate some suggestions that come to my mind. 1) I used type = {} RNLockScreen.Type.Pattern mode = {} RNLockScreen.Mode.Verify If password use lock = {'123'} The first pattern is considered 0 and the last 8. So in case there can not be a change of type. This is just a consideration. A possible solution, You could do that when you select the pattern type, increase all by 1, the char that form the lock if the pass is numeric.

2) In type type = {RNLockScreen.Type.Pin} I would add an option if the user wants it when the password is wrong, then the pass is completely erased from the input field, the type should be a bool.

3) It would be possible to have such a thing: Which is to choose the color confirmPin? Same for the deletePin? For the delete, choose both the exterior color and the internal color. For example, for my personal taste it would be white exterior and the transparent internal "x". I had done tests with confirmPin, I had succeeded but deletePin no, I think we need to change the svg file.

Then I would add two options that allow you to set the confirmPin and deletePin color.

4) If I rotate the screen I always get the same problem, see image: My device data: 5.5-inch display with a resolution of 1920x1080 pixels.

5) It would be possible to add the option, set the bottom color of the input, if desired. Personally, graphically, it would be nicer, less dispersive.

6) There is the type Pattern, the type Pin, missing a type Char or keyboard something like this. I suggest something similar to this graphically.

let me know what you think.

[prscX]

Thanks @Angelk90 for sharing the valuable suggestions. I will look into the same, once I have some breathing space. Please feel free to share PR.

Thanks </ Pranav >

[Angelk90]

@prscX : I thank you to always listen to me. Let me know when you need me to do probable tests.

[prscX]

Sure @Angelk90. I will keep you posted about the progress.

Thanks </ Pranav >

[Angelk90]

@prscX : There are news about: https://github.com/prscX/react-native-lock-screen/issues/1#issuecomment-392101997

[prscX]

Hi @Angelk90: I have enabled/fixed below items in the latest release V0.0.15:

• Scaling Issue. I have integrated RNSizeMatters library in order to have right font/view size across screen factors.
• Added clearLockOnError prop in order clear pin visualizer on error
• Integrated RNToasty for the error/success toasts

Please let me know in case you face any issues.

Thanks </ Pranav >

[Angelk90]

@prscX : 1) I have downloaded the new version on npm does not seem to work download 0.0.10 I had to specify version 0.0.15.

2) It gives me the following error in mode: RNLockScreen.Type.Pin When I do ok.

3) I used type = {RNLockScreen.Type.Pattern} mode = {RNLockScreen.Mode.Verify} If password use lock = {'123'} The first pattern is considered 0 and the last 8. I know in case there is not a change of type. This is just a consideration. A possible solution, you can do that when you select the pattern, increase all by 1, the char that form the lock if the pass is numeric.

4) It would be possible to have such a thing: Which is to choose the color confirm? Same for the deletePin? For the delete, choose both the exterior color and the interior color. For example, for my personal taste it would be white and transparent internal "x". I had done tests with confirmPin, I had succeeded but deletePin no, I think we need to change the svg file.

Then I would add two options that allow you to set the confirmPin and deletePin color.

5) I do not like very graphically the thing that every time you enter a number, then there is that thing of the check.

for example my pass is: If password use lock = {'123'} I do not arrive at the fourth check, I preferred something like that.

6) He gave me this strange error when I unplugged the device, and I opened the app again, the svg icons were no longer visible.

7) There is the type Pattern, the type Pin, missing a type Char or keyboard something like this. I suggest something similar to this graphically.

Code:

render() {
  return <View style={styles.container}>
  <StatusBar backgroundColor="rgba(52, 52, 52, 0)" translucent />
  <RNLockScreen
  type={RNLockScreen.Type.Pin}
  mode={RNLockScreen.Mode.Verify}
  onCapture={lock => {
    console.log("lock: " + lock);
  }}
  onVerified={() => {
    console.log('lock verified')
  }}
  lock={'123'}
  pinProps={{
    rippleProps:{
      rippleColor: '#8b0000'
    },
    containerStyle:{
      backgroundColor: 'transparent'
    },
    textStyle:{
      color: '#fff'
    },
    suggestionStyle: {
      color: '#989889'
    },
  }}
  backgroundImage={wallpaper}
  />
  </View>;
}

let me know what you think.

[prscX]

Hi @Angelk90: You need to link RNToasty library, please follow the updated installation steps from README in order to resolve RNToasty error.

Thanks </ Pranav >

[prscX]

Hi @Angelk90: I have followed UI/UX design provided by hanks-zyh/PasscodeView library. Having a separate line for the pin visualizer would be a completely custom implementation.

However please feel free to raise PR for enabling this feature based on some props flag.

Thanks </ Pranav >

[Angelk90]

Hi @prscX :

2) answer to question 2): It seems that at the time of installation he did not install the module, react-native-toasty.

• The other points remain the same, from 3 onwards.
• I did not understand, to get back the thing of the pins inserted in this way, I have to set some props? https://raw.githubusercontent.com/hanks-zyh/PasscodeView/master/screenshot/demo.gif

8) As you can see from the image the number is too much outside it would be more central, for example the number 2, I modified it with paint.

• As soon as you have time, you could answer all the points I have listed.

Thx.

[MartorSkull]

It would be nice to have fingerprint implementation.

[imDmytro]

Очень хорошо ребята, а сегодня до вечера мне и парням нужен cash, money, ,бабос а то у меня будет подбиты Glass