react-native-patternlock-authentication

Pattern Lock Security for both Android and IOS using react native svg.

Featured Pattern Working Gif

General Pattern Working Gif

Installation

Note: To use this Authentication, ensure that you have react-native-svg and its dependencies (follow this guide).

npm install react-native-patternlock-authentication

Usage

There are two types of PatternLock Available in this Package.

1. GeneralPatternLock
2. FeaturedPatternLock

GeneralPatternLock

import { Dimensions } from 'react-native';

// ....

import { GeneralPatternLock } from 'react-native-patternlock-authentication'; // Import Package

const { width, height } = Dimensions.get('window');
const PATTERN_CONTAINER_HEIGHT = height / 2; //you can change it as per your need
const PATTERN_CONTAINER_WIDTH = width; //you can change it as per your need
const PATTERN_DIMENSION = 3; //you can change it as per your need
const CORRECT_UNLOCK_PATTERN = '0123'; //Correct Pattern

// ...

export const App = () => {
  const onPatternMatch = () => {
    // Do your Functionalities
  };

  const onWrongPattern = () => {
    // Do your Functionalities
  };

  const onPatternMatchAfterDelay = () => {
    // Do your Functionalities
  };

  const onWrongPatternAfterDelay = () => {
    // Do your Functionalities
  };

  return (
    //...

    <GeneralPatternLock
      containerDimension={PATTERN_DIMENSION}
      containerWidth={PATTERN_CONTAINER_WIDTH}
      containerHeight={PATTERN_CONTAINER_HEIGHT}
      correctPattern={CORRECT_UNLOCK_PATTERN}
      dotsAndLineColor="blue"
      defaultDotRadius={10}
      snapDotRadius={15}
      snapDuration={100}
      lineStrokeWidth={5}
      wrongPatternColor="red"
      matchedPatternColor="green"
      onPatternMatch={onPatternMatch}
      onWrongPatternAfterDelay={onWrongPatternAfterDelay}
      onPatternMatchAfterDelay={onPatternMatchAfterDelay}
      onWrongPattern={onWrongPattern}

      // ...Use Remaining Props as per your convenience
    />

    //...
  );
};

Props

Props	Type	Required	Default	Description
containerDimension	Number	No	3	It Refers the Dimension of the Pattern Dots Array (eg.). 3 means 3 x 3, 4 means 4 x 4.
containerWidth	Number	No	Dimensions.get('window').width
containerHeight	Number	No	(Dimensions.get('window').height)/2
correctPattern	String	Yes
wrongPatternDelayTime	Number (MilliSeconds)	No	1000	Pattern draw event disable duration after the Wrong Pattern.
correctPatternDelayTime	Number	No	0	Pattern draw event disable duration after the Correct Pattern.
dotsAndLineColor	String	No	blue
wrongPatternColor	String	No	red
lineStrokeWidth	Number	No	5	Thickness of Line
defaultDotRadius	Number	No	6
snapDotRadius	Number	No	10	Snaping radius of Dots When Connecting the Dots.
snapDuration	Number	No	100	Snaping duration of Dots When Connecting the Dots.
enableHint	Boolean	No	false
hint	String	No
hintContainerStyle	ViewStyle	No
hintTextStyle	TextStyle	No	{ color: '#000000' }
matchedPatternColor	String	No	green

Methods

onPatternMatch

It will call, when the Pattern is Matched with Correct Pattern.

Type	Required
function	Yes

onWrongPattern

It will call, when the Pattern is Matched with Wrong Pattern.

Type	Required
function	No

onPatternMatchAfterDelay

It will call, when the Pattern is Matched with Correct Pattern after the correctPatternDelayTime which is passed as prop by you.

Type	Required
function	No

onWrongPatternAfterDelay

It will call, when the Pattern is Matched with Wrong Pattern after the wrongPatternDelayTime which is passed as prop by you.

Type	Required
function	No

FeaturedPatternLock

It includes all Pattern Authentication Process like,

1. Confirm Your Pattern,
2. Change Pattern
3. Set New Pattern

import { Dimensions } from 'react-native';

// ....

import {
  FeaturedPatternLock,
  PatternProcess,
} from 'react-native-patternlock-authentication'; // Import Package

const { width, height } = Dimensions.get('window');
const PATTERN_CONTAINER_HEIGHT = height / 2; //you can change it as per your need
const PATTERN_CONTAINER_WIDTH = width; //you can change it as per your need
const PATTERN_DIMENSION = 3; //you can change it as per your need

// ...

export const App = () => {
  const onPatternMatch = () => {
    // Do your Functionalities
  };

  const onWrongPattern = () => {
    // Do your Functionalities
  };

  const onPatternMatchAfterDelay = () => {
    // Do your Functionalities
  };

  const onWrongPatternAfterDelay = () => {
    // Do your Functionalities
  };

  return (
    //...

    <FeaturedPatternLock
      onPatternMatch={onPatternMatch}
      onWrongPattern={onWrongPattern}
      isChangePattern={false}
      processName={PatternProcess.NEW_PATTERN}

      // ...Use Remaining Props as per your convenience
    />

    //...
  );
};

Props

Props	Type	Required	Default	Description
containerDimension	Number	No	3	It Refers the Dimension of the Pattern Dots Array (eg.). 3 means 3 x 3, 4 means 4 x 4.
containerWidth	Number	No	Dimensions.get('window').width
containerHeight	Number	No	(Dimensions.get('window').height)/2
correctPattern	String	Yes - when processName is PatternProcess.CONFIRM_PATTERN. No - when processName is PatternProcess.NEW_PATTERN.
processName	String	No	PatternProcess.NEW_PATTERN	PatternProcess Contains two processes. NEW_PATTERN and CONFIRM_PATTERN. processName must be CONFIRM_PATTERN for Change Pattern Process
isChangePattern	boolean	No	false	If the Pattern is working as Change Pattern then change it to true
showHintMessage	Boolean	No	false
dotRadius	Number	No	10
dotsColor	String	No	red
movingLineColor	String	No	blue
snapDotRadius	Number	No	15	Snaping radius of Dots When Connecting the Dots.
lineStrokeWidth	String	No	6
activeLineColor	String	No	blue
wrongPatternColor	String	No	red
snapDuration	Number	No	100 (milli seconds)	Snaping duration of Dots When Connecting the Dots.
connectedDotsColor	String	No	blue
correctPatternColor	Number	No	green
minPatternLength	Number	No	3
newPatternConfirmationMessage	String	No	Empty String
wrongPatternDelayTime	Number	No	1000 (milli seconds)
correctPatternMessage	String	No	Empty String
correctPatternDelayTime	Number	No	1000 (milli seconds)
correctPatternDelayDurationMessage	String	No	Empty String
iswrongPatternCountLimited	Boolean	No	false	If there is maximum limit of Wrong Pattern then change it to true
totalWrongPatternCount	Number	No	0	If iswrongPatternCountLimited is true then give maximum limit of Wrong Pattern
wrongPatternDelayDurationMessage	String	No	Empty String
minPatternLengthErrorMessage	String	No	Empty String
wrongPatternMessage	String	No	Empty String
changePatternFirstMessage	String	No	Empty String
changePatternDelayTime	Number	No	1000 (milli seconds)
changePatternSecondMessage	String	No	Empty String
isEnableHeadingText	Boolean	No	false
enableDotsJoinViration	Boolean	No	false	If it is true, then the mobile will be vibrate whenever the Pattern Dots Connects (Add Vibration Permissions). Refer React Native Vibration for Permissions.
vibrationPattern	Array	No	[0, 200]	Pattern of Vibration for connecting Dots. If enableDotsJoinViration is true then the Mobile Vibrates in this Pattern Refer React Native Vibration
headingText	String	No	Empty String
enablePatternNotSameCondition	Boolean	No	true	If It is true, then the previous Pattern is not allowed for new Pattern when the time of Change Pattern Process. Change it to false, if the Previous Pattern is also allowed for New Pattern
patternTotalCountReachedErrorMessage	String	No	Empty String
newPatternDelayDurationMessage	String	No	Empty String
newPatternMatchedMessage	String	No	Empty String
newPatternDelayTime	Number	No	1000 (milli seconds)
patternCountLimitedErrorMessage	String	No	Empty String
samePatternMatchedMessage	String	No	Empty String
hintTextStyle	TextStyle	No	{ color: 'blue' }
headingTextStyle	TextStyle	No	{ color: 'blue' }
hintTextContainerStyle	ViewStyle	No	{ alignItems: 'center' }

Methods

onPatternMatch

It will call, when the Pattern is Matched with Correct Pattern. It will also called after the Confirm Pattern of Set Pattern Process. It returns pattern as callback Parameters.

Type	Required
function	Yes

onWrongPattern

It will call, whenever the Pattern is Matched with Wrong Pattern. It returns pattern and wrongPatternRemainingCount ( if enable iswrongPatternCountLimited ) as callback Parameters.

Type	Required
function	No

onPatternMatchAfterDelay

It will call, when the Pattern is Matched with Correct Pattern after the correctPatternDelayTime which is passed as prop by you. It will also called after the Confirm Pattern of Set Pattern Process. It returns pattern as callback Parameters.

Type	Required
function	No

onWrongPatternAfterDelay

It will call, when the Pattern is Matched with Wrong Pattern after the wrongPatternDelayTime which is passed as prop by you. It returns pattern and wrongPatternRemainingCount ( if enable iswrongPatternCountLimited ) as callback Parameters.

Type	Required
function	No

License

MIT

Would you like to support me?