Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-native-lock-screenpublic

    React Native: Lock Screen

    An easy-to-use, customizable and Material Design ready Pattern/Pin Lock view for Android & iOS.

    Pin
    Pattern
    With Background

    Getting started

    $ npm install react-native-lock-screen --save

    $ react-native link react-native-lock-screen

    $ react-native link react-native-svg

    • iOS

    $ cd ./node_modules/react-native-lock-screen/ios/ && pod install

    Usage

    import RNLockScreen from 'react-native-lock-screen';
     
    <RNLockScreen type={RNLockScreen.Type.Pin} mode={RNLockScreen.Mode.Capture} onCapture={lock => {
      }} onVerified={() => {
     
      }}
      lock={'123'}
    />
     

    Props

    Prop Type Default Note
    type number Pin - 0 Specify type of lock (Pin/Pattern)
    mode number Capture - 0 Specify mode of lock (Capture/Verify)
    lock string Specify lock then the mode is Verify
    onCapture func Specify onCapture event function, this is invoked once passcode is captured
    onVerified func Specify onVerified event function, this is invoked when the passcode is verified
    backgroundImage number : optional Specify lock screen background image
    renderHeaderFragment func : optional Specify func to customize header fragment
    renderSeparator func : optional Specify func to customize separator
    renderLockFragment func : optional Specify func to customize lock fragment
    patternProps object : optional Specify obj to pass pattern props
    pinProps object : optional Specify obj to pass pin props
    headerFragmentProps object : optional Specify obj to pass header fragment props
    lockFragmentProps object : optional Specify obj to pass lock fragment props
    defaultState object : optional Specify obj to pass DEFAULT state props
    reenterState object : optional Specify obj to pass REENTER state props
    successState object : optional Specify obj to pass SUCCESS state props
    errorState object : optional Specify obj to pass error state props
    confirmPin object : optional Specify obj to pass confirm pin state props
    deletePin object : optional Specify obj to pass delete pin state props
    • Default State Props: defaultState
    Prop Type Default Note
    title string Enter a passcode Specify the header fragment title
    titleStyle string { fontSize: 24, color: "#FFF" } Specify title style
    icon string lock icon Specify the header circle icon
    dotProps string style: { backgroundColor: "#FFF" } Specify the Dot component props
    • Reenter State Props: reenterState
    Prop Type Default Note
    title string Enter a passcode Specify the header fragment title
    titleStyle string { fontSize: 24, color: "#FFF" } Specify title style
    icon string lock icon Specify the header circle icon
    dotProps string style: { backgroundColor: "#FFF" } Specify the Dot component props
    • Success State Props: successState
    Prop Type Default Note
    title string Enter a passcode Specify the header fragment title
    titleStyle string { fontSize: 24, color: "#FFF" } Specify title style
    icon string lock icon Specify the header circle icon
    dotProps string style: { backgroundColor: "#037d50" } Specify the Dot component props
    • Error State Props: errorState
    Prop Type Default Note
    title string Enter a passcode Specify the header fragment title
    titleStyle string { fontSize: 24, color: "#FFF" } Specify title style
    icon string lock icon Specify the header circle icon
    dotProps string style: { backgroundColor: "#be0000" } Specify the Dot component props
    • Pin Props
    Prop Type Default Note
    confirmPin string Specify text/icon/style of confirm pin
    deletePin string Specify text/icon/style of delete pin
    rippleProps string Specify props of ripple. Please refer react-native-material-ripple
    containerStyle string Specify style of root container
    textStyle string Specify style of text displayed
    suggestionStyle string Specify style of suggestion displayed
    alphabetPinSuggestion bool true Enable/Disable alphabet suggestion
    • Confirm/Delete Pin Props
    Prop Type Default Note
    title string Specify text of confirm pin
    icon string Confirm Icon/Delete Icon Specify icon of confirm pin
    style string Specify style of title/icon

    Credit

    Contribution

    Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

    License

    This library is provided under the Apache 2.0 License.

    RNLockScreen @ Pranav Raj Singh Chauhan

    Keywords

    install

    npm i react-native-lock-screen

    Downloadsweekly downloads

    39

    version

    0.0.8

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar