Create a Biometric Authentication App using React-Native

//App.js

import { StatusBar } from "expo-status-bar";
import { Alert, Button, StyleSheet, Text, View } from "react-native";
import * as LocalAuthentication from "expo-local-authentication";
import { useState } from "react";

export default function App() {
    const [authenticated, setAuthenticated] = useState(false);
    const checkDeviceForHardware = async () => {
        let compatible = await LocalAuthentication.hasHardwareAsync();
        console.log("compatible", compatible);
    };

    const checkForBiometrics = async () => {
        let biometricRecords = await LocalAuthentication.isEnrolledAsync();
        console.log("biometricRecords", biometricRecords);
    };

    const authenticate = async () => {
        let result = await LocalAuthentication.authenticateAsync();
        if (result.success) {
            setAuthenticated(true);
        } else {
            Alert.alert("Authentication failed");
        }
    };

    return (
        <View style={styles.container}>
            <StatusBar style="auto" />
            <Text style={styles.heading}>
                Biometric Authentication GeeksforGeeks
            </Text>
            <Button
                title={authenticated ? "Hide Content" : "Show Hidden Content"}
                onPress={() => {
                    if (authenticated) {
                        setAuthenticated(false);
                        return;
                    }
                    checkDeviceForHardware();
                    checkForBiometrics();
                    authenticate();
                }}
            />
            {authenticated && (
                <Text>
                    <Text style={{ fontWeight: "bold" }}>Hidden Content: </Text>
                    GeeksforGeeks is a computer science portal for geeks. It
                    contains well written, well thought and well explained
                    computer science and programming articles, quizzes and
                    practice/competitive programming/company interview
                    Questions.
                </Text>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "space-evenly",
        flex: 1,
    },
    heading: {
        fontSize: 20,
        fontWeight: "bold",
        marginBottom: 20,
        color: "green",
    },
});