RNBiometricsPoc.jsx

import React, {useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  TouchableOpacity,
  StatusBar,
  Image,
} from 'react-native';

import ReactNativeBiometrics from 'react-native-biometrics';

import verifyImg from './citizen-identify-yourself.jpg';
import verifiedImg from './cooperation.gif';

const App = () => {
  const [verified, setVerfied] = useState(false);

  const onVerify = () => {
    ReactNativeBiometrics.isSensorAvailable().then(({biometryType}) => {
      let message = '';

      if (biometryType === ReactNativeBiometrics.TouchID) {
        message = 'Confirm fingerprint';
      } else if (biometryType === ReactNativeBiometrics.FaceID) {
        message = 'Face ID Message';
      } else if (biometryType === ReactNativeBiometrics.Biometrics) {
        message = 'Identify';
      }

      ReactNativeBiometrics.simplePrompt({
        promptMessage: message,
      }).then(({success}) => {
        setVerfied(success);
      });
    });
  };

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={styles.view}>
          <TouchableOpacity onPress={onVerify}>
            {verified ? (
              <Image source={verifiedImg} style={styles.img} />
            ) : (
              <Image source={verifyImg} style={styles.img} />
            )}
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  view: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    width: 300,
    resizeMode: 'contain',
  },
});

export default App;