Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to detect screen lock ( pin, password, pattern, and fingerprint ) set or not in device, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection of screen lock.

Introduction

React Native device info provide isPinOrFingerprintSet() function to detect pin, password, pattern, and fingerprint lock set or not it will return only true or false. isPinOrFingerprintSet() function work in ios, android, and windows platform.

Installation

  • Go to your project directory and install react-native-device-info package using npm.
npm install --save react-native-device-info
  • Link react-native-device-info package if your react native version less then 0.63.
npx react-native link react-native-device-info

Syntax

DeviceInfo.isPinOrFingerprintSet() function usages syntax.


import DeviceInfo from 'react-native-device-info';


DeviceInfo.isPinOrFingerprintSet().then((isPinOrFingerprintSet) => {
  if (!isPinOrFingerprintSet) {
    // ...
  }
});

Example

In Below Example, we will isPinOrFingerprintSet() value on constant and show in application.

React Native Device Info isPinOrFingerprintSet example

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  SafeAreaView,
} from 'react-native';
import DeviceInfo from 'react-native-device-info';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      passwordLock: false
    }
  }
  

  componentDidMount(){
    DeviceInfo.isPinOrFingerprintSet().then((isPinOrFingerprintSet) => {
      if (isPinOrFingerprintSet) {
        this.setState({passwordLock: true});
      }
    });
  }

  

  render() {
    const { passwordLock } = this.state;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <Text>Device have password lock</Text>
          <Text>{`${passwordLock}`}</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 20,
    backgroundColor: '#ffffff',
  },
});

export default App;

Output

React Native, DeviceInfo, isPinOrFingerprintSet, Example

Thanks for Reading…