DEV Community: DETL INC

How to implement Image Upload with Expo Image Picker in React Native for a professional app launched app.

DETL INC — Thu, 14 Nov 2024 16:38:38 +0000

Introduction

At DETL, we specialize in crafting stellar software applications that seamlessly blend hardcore engineering with sleek design. Our mission is to deliver both mobile and web applications that provide exceptional user experiences without compromising on aesthetics or functionality. In this blog post, we will guide you through how to implement an image picker in your Expo React Native application. This feature will allow users to upload a profile image, adding a personal touch to their profiles.

Why Implement a Profile Image Picker?

Personalization is a key factor in enhancing user engagement within an app. Allowing users to upload a profile image not only personalizes their experience but also creates a deeper connection with the application. In this blog post, we’ll show you how to implement this feature using Expo’s ImagePicker, enabling users to select and upload profile pictures seamlessly.

Overview

Before embarking on this journey of explaining to you how to allow users to upload their profile image, I’d like to first break down the topics just so you’ll have a solid idea of what we will be covering in this blog post.

Installing Required Packages
Requesting Permissions
Allowing Users to Pick an Image
Uploading the Image to the Backend
Updating the User’s Profile Picture

We will explain each step in detail so you are not left confused :)

Step 1: Installing Required Packages

Before we start, make sure you have Expo React Native application configured so that you can install the following package called expo-image-picker.

expo install expo-image-picker

Step 2: Importing Necessary Modules and Setting Up State

In your profile component file, import the necessary package and as well as create the necessary states that will handle the uploading of the image.

We have a folder called profile -> index.tsx and we place the code which we will show you below inside of the index.tsx file.

import React, { useCallback, useEffect, useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
  RefreshControl,
  Alert,
  ActivityIndicator,
} from 'react-native';
import * as ImagePicker from 'expo-image-picker';

// State variables
const [selectedImage, setSelectedImage] = useState('');
const [loadingImage, setLoadingImage] = useState(false);

We have declared two states, the first state saves the selected image and the second state is a loading state which we will use when we are making an API call to our backend to save the image to the user's profile. We also import expo-image-picker.

Step 3: Requesting Permissions and Picking an Image

We need to request permission to access the user’s media library and then allow them to select an image.

const pickImage = async () => {
  // Ask for permission to access the gallery
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert(
      'Permission Denied',
      'Permission to access gallery was denied'
    );
    return;
  }

  // Launch the image picker
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [1, 1],
    quality: 1,
    base64: true, // Include base64 in the result
  });

  if (!result.canceled) {
    setLoadingImage(true);
    const completeBase64String =
      'data:image/png;base64,' + result.assets[0].base64;
    uploadProfilePicture(completeBase64String, result.assets[0].uri);
  } else {
    setLoadingImage(false);
    Alert.alert('Error', 'Failed to select image');
  }
};

When we request access from the user we check if the status was granted; if not, then we throw an alert. Once the status has been granted, the app will automatically navigate to the user's media library where their images are stored.

Firstly, it is important to note that when we pick the image the user has selected, we make sure that we have access to the base64 format of the image since that is what we will be sending back to the backend when we make our API call.

Secondly, as you can see from the code as shown below is that we attach a string to the result.

const completeBase64String =
      'data:image/png;base64,' + result.assets[0].base64;
    uploadProfilePicture(completeBase64String, result.assets[0].uri);

The selected image returns a base64 without the first part of the image data:image/png;base64, which is important, otherwise our backend will not be able to process the image correctly. What we do is attach a base64 image string to the result we get from the image picker so that our backend is able to process the image accordingly. This is a specific use case and can as well be handled by your backend but it is much easier in its implementation on the frontend.

So far we have selected our image, received the equivalent base64 result of that image and now we will make a backend call with the base64 result of the image which is shown in the above code as such uploadProfilePicture(completeBase64String, result.assets[0].uri).

Step 4: Uploading the Image to the Backend

We need to send the selected image to the backend server to update the user’s object. Whenever the user is re-authenticated, the image is then fetched from their profile and displayed on the app.

const uploadProfilePicture = async (base64Image, uri) => {
  const endpoint = 'user';
  const method = 'PUT'; // Use PUT as per your requirement

  try {
    // Prepare the data object
    const data = {
      profilePicture: base64Image,
    };

    // Make the API request
    const response = await actionProvider.makeRequest(endpoint, method, data);

    if (response.status === 200) {
      Alert.alert('Success', 'Profile picture updated successfully');
      // Optionally, refresh user information
      fetchUserInformation(session);
      setLoadingImage(false);
      setSelectedImage(uri);
    } else {
      Alert.alert('Error', 'Failed to update profile picture');
      setLoadingImage(false);
    }
  } catch (error) {
    setLoadingImage(false);
    console.error('Error uploading profile picture:', error);
    Alert.alert(
      'Error',
      'An error occurred while uploading the profile picture'
    );
  }
};

In simple steps we will explain to you what is happening in the code above.

Data Preparation: We create a data object containing the base64 image which we will send as a payload within the API call.
API Call: We make a PUT request to the backend API to update the user’s profile picture.
Note: Replace actionProvider.makeRequest with your actual API endpoint method (e.g., using fetch or axios). Since we have a hooks file where we make all of our API calls, we have placed our endpoint URL in this file so that we can import it wherever we need to make an API call.
Handling Responses: We check the response status and update the UI accordingly.

Step 5: Displaying the Profile Image

We update the UI to display the user’s profile image or a placeholder if none is set.

<View style={styles.profileImageContainer}>
  <TouchableOpacity onPress={pickImage} activeOpacity={0.8}>
    {loadingImage ? (
      <View
        style={[
          styles.profileImage,
          {
            justifyContent: 'center',
            alignItems: 'center',
          },
        ]}
      >
        <ActivityIndicator color={'#4096C1'} />
      </View>
    ) : selectedImage ? (
      <>
        <Image
          source={{ uri: selectedImage }}
          style={styles.profileImage}
          resizeMode='cover'
        />
      </>
    ) : (
      <Image
        source={require('@/assets/images/profile/profileImage.png')}
        style={styles.profileImage}
        resizeMode='contain'
      />
    )}
  </TouchableOpacity>
</View>

TouchableOpacity: Makes the image clickable, allowing users to change their profile picture which runs the pickImage function to show the media library.
Loading Indicator: Shows while the backend API call is made and the image is uploading.
Selected Image: Displays the user’s chosen profile picture.
Placeholder Image: Shown if no profile picture is set. This can be stored in a file inside your app like the public → assets → images → profile → profileImage.png folder.

Entire Code

Below we have posted the entire code. This way you can have a bird-eye view of the entire implementation and as well as follow the steps outlined above in a much more thorough way.

import AnimatedWrapper from "@/components/shared/animation";
import GlobalButton from "@/components/shared/Button";
import { Colors, globalStyle } from "@/constants/Colors";
import { useSession } from "@/providers/Auth/AuthProvider";
import React, { useCallback, useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  ImageBackground,
  TouchableOpacity,
  ScrollView,
  RefreshControl,
  Alert,
  ActivityIndicator,
} from "react-native";
import Subscription from "../../Subscription";

import * as ImagePicker from "expo-image-picker";
import actionProvider from "../../../../providers/actionProvider";
import { useToast } from "../../../../providers/useToast";

const HEIGHT = 80;

const index = () => {
  const { user, session, fetchUserInformation } = useSession();

  const [modalVisible, setModalVisible] = useState(false);

  const [loading, setLoading] = React.useState(false);
  const [loadingImage, setLoadingImage] = useState(false);

  const [selectedImage, setSelectedImage] = useState("");

  const { showToast } = useToast();

  useEffect(() => {
    // If user has a profile picture, set it
    if (user?.profilePicture) {
      setSelectedImage(user.profilePicture);
    }
  }, [user]);

  const onRefresh = useCallback(async () => {
    // Start refreshing
    setLoading(true);
    fetchUserInformation(session);

    // Simulate a network request or any async action
    setTimeout(() => {
      // Stop refreshing after 3 seconds
      setLoading(false);
    }, 3000);
  }, []);

  const pickImage = async () => {
    // Ask for permission to access the gallery
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== "granted") {
      Alert.alert(
        "Permission Denied",
        "Permission to access gallery was denied"
      );
      return;
    }

    // Launch the image picker
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
      base64: true, // Include base64 in the result
    });

    const completeBase64String =
      "data:image/png;base64," + result?.assets[0]?.base64;

    if (!result.cancelled) {
      setLoadingImage(true);
      uploadProfilePicture(completeBase64String, result?.assets[0].uri);
    } else {
      setLoadingImage(false);

      showToast("error", "Failed to update profile picture");
    }
  };

  const uploadProfilePicture = async (base64Image: string, uri: string) => {
    const endpoint = "user";
    const method = "PUT"; // Use PUT as per your requirement

    try {
      // Prepare the data object
      const data = {
        profilePicture: base64Image,
      };

      // Make the API request
      const response = await actionProvider.makeRequest(endpoint, method, data);

      if (response.status === 200) {
        Alert.alert("Success", "Profile picture updated successfully");
        // Optionally, refresh user information
        fetchUserInformation(session);
        setLoadingImage(false);

        setSelectedImage(uri);
      } else {
        showToast("error", "Failed to update profile picture");
        setLoadingImage(false);
      }
    } catch (error) {
      setLoadingImage(false);

      console.error("Error uploading profile picture:", error);
      showToast(
        "error",
        "An error occurred while uploading the profile picture"
      );
    }
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "white",
      }}
    >
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={loading}
            onRefresh={onRefresh}
            colors={["#4096C1"]} // Customize spinner colors
            tintColor="#4096C1" // Customize spinner color for iOS
          />
        }
        contentContainerStyle={{
          flex: 1,
        }}
      >
        <View style={styles.container}>
          <ImageBackground
            style={styles.innerContainer}
            source={require("@/assets/images/profile/profilePageImage.png")}
            imageStyle={styles.backgroundImage}
          >
            <View style={styles.profileImageContainer}>
              {/* This is the profile image section */}
              <TouchableOpacity onPress={pickImage} activeOpacity={0.8}>
                {loadingImage ? (
                  <View
                    style={[
                      styles.profileImage,
                      {
                        justifyContent: "center",
                        alignItems: "center",
                      },
                    ]}
                  >
                    <ActivityIndicator color={"#4096C1"} />
                  </View>
                ) : selectedImage ? (
                  <>
                    <Image
                      source={{ uri: selectedImage }}
                      style={styles.profileImage}
                      resizeMode="cover"
                    />
                  </>
                ) : (
                  <Image
                    source={require("@/assets/images/profile/profileImage.png")}
                    style={styles.profileImage}
                    resizeMode="contain"
                  />
                )}
              </TouchableOpacity>

              {/* This is the profile image section */}
            </View>
          </ImageBackground>
        </View>
      </ScrollView>
    </View>
  );
};

export default index;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
  },
  innerContainer: {
    height: 200,
    backgroundColor: Colors.button.backgroundButtonDark,
    borderBottomLeftRadius: 40,
    borderBottomRightRadius: 40,
    alignItems: "center",
    justifyContent: "flex-end",
  },
  profileImageContainer: {
    position: "absolute",
    bottom: -HEIGHT / 2,
    height: HEIGHT,
    width: HEIGHT,
    borderRadius: HEIGHT / 2,
    backgroundColor: "white",
    padding: 5,
    justifyContent: "center",
    alignItems: "center",
  },
  backgroundImage: {
    borderBottomLeftRadius: 40,
    borderBottomRightRadius: 40,
  },
  profileImage: {
    height: HEIGHT / 1.2,
    width: HEIGHT / 1.2,
    borderRadius: HEIGHT / 1.5,
  },
  infoContainer: {
    alignItems: "center",
    marginTop: 30,
    flex: 1,
  },
  greetingText: {
    fontSize: 20,
    fontWeight: "bold",
    fontFamily: globalStyle.font.fontFamilyBold,
    textAlign: "center",
  },
  planContainer: {
    marginVertical: 10,
    backgroundColor: "rgba(64,150,193,.20)",
    borderRadius: 5,
    paddingVertical: 5,
    paddingHorizontal: 20,
  },
  planText: {
    color: "#000000",
    fontFamily: globalStyle.font.fontFamilyBold,
  },
  buttonContainer: {
    marginHorizontal: globalStyle.container.marginHorizontal,
    bottom: 10,
  },
  premiumContainer: {
    marginTop: 30,
    width: "90%",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#EFF6FA",
    flexDirection: "row",
    paddingVertical: 15,
    paddingHorizontal: 10,
    borderRadius: 10,
  },
  premiumContent: {
    flexDirection: "row",
    alignItems: "center",
    flex: 0.8,
  },
  premiumIcon: {
    height: 30,
    width: 30,
  },
  premiumText: {
    fontFamily: globalStyle.font.fontFamilyBold,
    fontSize: 16,
    marginLeft: 15,
  },
  upgradeText: {
    fontFamily: globalStyle.font.fontFamilyBold,
    color: Colors.button.textDark,
  },
});

Conclusion

In this blog post, we’ve demonstrated how to implement an image picker in your Expo React Native application to allow users to upload and update their profile images. This feature enhances user engagement by adding a personalized touch to their profiles.

If there is anything unclear in this blog post, feel free to reach out to DETL and we will be happy to help you through the journey of implementing this.

Happy Coding!

How to create authenticated routes with the new Expo SDK 51 using Expo Router

DETL INC — Thu, 14 Nov 2024 15:36:54 +0000

In this blog post, we will be covering “how to create authenticated routes” with the new Expo SDK 51. This guide is meant to be straightforward for our fellow engineers and it is recommended that you follow along with either an existing expo project or create a new project.

We will skip the introduction of how to set up an expo project and jump straight to explaining what you need to do in order to create simple, yet powerful authenticated routes within your application. As a starter, make sure that your expo project version is "expo": "~51.0.28".

Once you have the correct expo version, your folder should look like the image below. The image below is of an internal company project I am working on, so don’t be thrown off by all the other folders but if you were to look at your expo folder structure and the image below, you’ll notice some similarities such as the “app” folder and the “providers” folder. I am not sure if the “providers” folder is created upon creating a new expo project; if not, then please create a “providers” folder.

We are mainly concerned with two folders in our expo project, the “app” folder and the “providers” → “Auth” folder. Ignore all the other folders in the above-posted image unless I specifically mention it in here. These two folders will allow us to create authenticated routes.

Our “app” folder contains “index.tsx” and “_layout.tsx”.

Our “index.tsx” file looks like the image above. When users open up the app, the first thing I present to them is the “onboarding” component. You can change that to whatever you want your users to see first when they first open up the app and they are not logged in. Whether it is the “login” screen or the “sign up” screen, you make that decision.

The main file we are concerned with when creating authenticated routes is the _layout.tsx file. Make sure you copy and paste the contents of this file exactly as it is and I will tell you what you can change. The explanation of the useEffect hook which handles the authentication routing is below.

useEffect Hook on line 38:
- The useEffect hook is used here to run the logic inside when any of the dependencies (isAuthenticated, segments, session, or isConnected) change. It ensures that the appropriate routing and authentication logic is executed based on the current state of the user.
const authState = segments[0] === "(auth)"; on line 39:
- The line const authState = segments[0] === "(auth)"; checks if the current route starts with "(auth)". This indicates that the user is in the authentication part of the app (which includes OnboardingFlow, help, etc.). This checks whether the user is currently trying to access the "(auth)" part in the app.

Handling Authentication:
- If the user is not authenticated (!isAuthenticated) and is currently trying to access an "auth" screen (like OnboardingFlow), the user is redirected to the login page.

if (!isAuthenticated && authState) {
  return router.replace("/login");
}

On line 48, if the user is authenticated and not in the “auth” group (meaning they’re in the main part of the app either login screen or signup screen), the code checks if onboarding is completed.
- If the user hasn’t completed onboarding (onboardingCompleted is false), they are redirected to the first onboarding screen "/(auth)/OnboardingFlow/screenOne".
- If onboarding is completed, they are redirected to the home screen ("/(tabs)/home").

else if (isAuthenticated == true && !authState) {
  if (onboardingCompleted) {
    return router.replace("/(auth)/OnboardingFlow/screenOne");
  } else {
    return router.replace("/(tabs)/home");
  }
}

This means that you can replace the following line to route to any authenticated pages you want

router.replace("/(auth)/OnboardingFlow/screenOne");

or you can simply just immediately route to the home page and avoid the “onboardingCompleted” check which I do in code.

Providers → Auth folder → AuthProviders.tsx

Here is an image of the AuthProvider.tsx and Auth folder which we will use to write our sign up sign in and sign out function. In the above _layout.tsx image you can see that we are wrapping our app with SessionProvider.

AuthContext and Context Provider Setup

Context is used to share the authentication state (logged in, logged out, onboarding, etc.) across different components in your app.

const AuthContext = createContext<AuthContextType>({
  signIn: async () => {},
  signOut: () => {},
  signUp: async () => {},
  session: null,
  isLoading: false,
  isAuthenticated: false,
  onboardingCompleted: false,
});

This creates the authentication context and its initial values.

Context Provider

export function SessionProvider({ children }: PropsWithChildren) {
  const [[isSessionLoading, session], setSession] = useStorageState("session");
  const [isLoading, setLoading] = useState(false);
  const [onboardingCompleted, setOnboardingCompleted] = useState(false);

The SessionProvider wraps your app, giving access to authentication states like session, isLoading, and onboardingCompleted.

Authentication Functions: Sign Up, Sign In, Sign Out

These functions handle the core logic for user sign-up, login, and logout processes.

Sign Up Function:

Firebase’s auth().createUserWithEmailAndPassword() creates the user account.
After user creation, you obtain a token (user.user.getIdTokenResult()), which can be passed to your backend API to create a corresponding user account in your database.
Errors are handled and appropriate messages are shown to the user.

const signUp = async (email: string, password: string) => {
  if (!email && !password) {
    showToast("warning", "Missing email and/or password");
    setLoading(false);
    return;
  }

  try {
    setLoading(true);
    const user = await auth().createUserWithEmailAndPassword(email, password);
    const token = await user.user.getIdTokenResult();

    const data = { email: email, uid: user.user.uid };
    const endpoint = "signup";
    const response = await actionProvider.makeRequest(endpoint, "POST", data, token.token);

    if (response?.success) {
      showToast("success", "Welcome! User created successfully.");
      setSession(token.token);
    } else {
      showToast("error", response?.message || "Error creating user.");
    }
  } catch (error) {
    handleSignUpError(error); // e.g., "auth/email-already-in-use"
  } finally {
    setLoading(false);
  }
};

Sign In Function:

Uses Firebase’s auth().signInWithEmailAndPassword() to sign in the user.
The session token is retrieved, and the user’s state is set accordingly.

const signIn = async (email: string, password: string) => {
  if (!email && !password) {
    showToast("warning", "Missing email and/or password");
    setLoading(false);
    return;
  }
  setLoading(true);

  try {
    const response = await axios.get("http://localhost:5000/api/v1/user");
    setOnboardingCompleted(!!response.data.data.completedQuestion);
    if (response.data.success) {
      setSession("your-session-token");
      showToast("success", "Successfully signed in!");
    }
  } catch (error) {
    console.log(error);
    showToast("error", "Failed to sign in");
  } finally {
    setLoading(false);
  }
};

Sign Out Function:

Clears the session by setting setSession(null).
Optionally calls auth().signOut() to remove Firebase authentication.

const signOut = async () => {
  setLoading(true);

  try {
    await auth().signOut();
    setSession(null);
    showToast("success", "Signed out successfully!");
  } catch (error) {
    showToast("error", "Failed to sign out");
  } finally {
    setLoading(false);
  }
};

Exposed Values in Context:

This is where the power of context lies: all the essential authentication state and functions are passed through the value prop, making them available throughout the app.

  return (
    <AuthContext.Provider
      value={{
        signIn,
        signOut,
        signUp,
        session,
        isLoading: isLoading || isSessionLoading,
        isAuthenticated,
        onboardingCompleted,
      }}
    >
      {children}
    </AuthContext.Provider>
  );

Providers → Auth folder → useStorageState.tsx

useStorageState is a custom hook designed to manage storage in mobile. It helps persist the user’s session across app restarts, which is critical for keeping users logged in after closing the app.

When a user signs in, their session token (or authentication token) is generated. This token needs to be stored securely and retrieved later when the app is reopened. useStorageState handles this.

Here is the code. You can remove the “web” checking part.

import * as SecureStore from "expo-secure-store";
import * as React from "react";
import { Platform } from "react-native";

type UseStateHook<T> = [[boolean, T | null], (value: T | null) => void];

function useAsyncState<T>(
  initialValue: [boolean, T | null] = [true, null]
): UseStateHook<T> {
  return React.useReducer(
    (
      state: [boolean, T | null],
      action: T | null = null
    ): [boolean, T | null] => [false, action],
    initialValue
  ) as UseStateHook<T>;
}

export async function setStorageItemAsync(key: string, value: string | null) {
  if (Platform.OS === "web") {
    try {
      if (value === null) {
        localStorage.removeItem(key);
      } else {
        localStorage.setItem(key, value);
      }
    } catch (e) {
      console.error("Local storage is unavailable:", e);
    }
  } else {
    if (value == null) {
      await SecureStore.deleteItemAsync(key);
    } else {
      await SecureStore.setItemAsync(key, value);
    }
  }
}

export function useStorageState(key: any): UseStateHook<string> {
  const [state, setState] = useAsyncState<string>();

  React.useEffect(() => {
    if (Platform.OS === "web") {
      try {
        if (typeof localStorage !== "undefined") {
          setState(localStorage.getItem(key));
        }
      } catch (e) {
        console.error("Local storage is unavailable:", e);
      }
    } else {
      SecureStore.getItemAsync(key).then((value) => {
        setState(value);
      });
    }
  }, [key]);

  const setValue = React.useCallback(
    (value: string | null) => {
      setState(value);
      setStorageItemAsync(key, value);
    },
    [key]
  );

  return [state, setValue];
}

useStorageState leverages Expo SecureStore to store and retrieve sensitive data, such as a user’s session token, securely. Secure storage is critical on mobile to protect user data from unauthorized access, especially when dealing with authentication tokens.

Conclusion

By using SessionProvider, expo-router, and hooks like useSegments, we've built a flexible routing system that ensures only authenticated users can access protected areas of our app. The key is using context to share authentication state and routing logic that redirects users to the correct screens based on their authentication and onboarding status.

This setup provides a robust way to manage routes and authentication in Expo, ensuring a secure and user-friendly flow for mobile apps.

If you need any help → email me at hello@detl.ca or simply connect with me on LinkedIn.

How to Implement Face ID and Touch ID in React Native Expo in your Onboarding flow, Login Screen and Settings Screen

DETL INC — Thu, 14 Nov 2024 15:14:41 +0000

At DETL, we specialize in crafting stellar software applications that seamlessly blend hardcore engineering with sleek design. Our mission is to deliver both mobile and web applications that provide exceptional user experience without compromising on aesthetics or functionality. In this blog post we will guide you through implementing Face ID and Touch ID authentication in your React Native Expo app’s onboarding flow, login screen and settings screen.

Introduction

Biometric authentication has become the standard in modern applications, offering users a quick, reliable and secure way to access their data. It is very important that engineers who are developing applications implement Face ID and Touch ID to enhance their apps user experience.

In this blog post we will cover the following

Required Packages to install: The essential packages you need to install.
Custom Hook Creation (useSetting.tsx): How to create a custom hook for managing biometric authentication.
Onboarding Implementation: Integrating Face ID and Touch ID in the onboarding screen.
Login Screen Integration: Implementing biometric login in your login screen.
Settings Screen Toggle: Allowing users to enable or disable biometric authentication from the settings screen.

1. Required Packages to install

Before we tell you how to implement Face ID or Touch ID, we will require you to first install the following packages.

expo-local-authentication: Provides access to biometric authentication capabilities. expo install expo-local-authentication
expo-secure-store: Allows you to securely store sensitive data like user credentials. expo install expo-secure-store
@react-native-async-storage/async-storage: A simple, unencrypted, asynchronous storage system. yarn add @react-native-async-storage/async-storage.
expo-checkbox: A customizable checkbox component. expo install expo-checkbox
Other Dependencies: Ensure you have expo-router, expo-font, and any other dependencies your project requires.

Install all dependencies together

expo install expo-local-authentication expo-secure-store expo-checkbox @react-native-async-storage/async-storage

2. Creating a Custom Hook: `useSettings`

To manage biometric authentication settings across your app, we’ll create a custom hook named useSettings. This hook will handle enabling/disabling Face ID and Touch ID, checking available biometric types, and storing the authentication status.

Creating the Hook

In your hooks directory, create a new file called useSettings.tsx and add the following code:

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as LocalAuthentication from 'expo-local-authentication';
import { useToast } from '@/providers/useToast';

interface BiometricAuthStatus {
  isFaceIDEnabled: boolean;
  isTouchIDEnabled: boolean;
}

export const useSettings = () => {
  const [biometricAuth, setBiometricAuth] = useState<BiometricAuthStatus>({
    isFaceIDEnabled: false,
    isTouchIDEnabled: false,
  });

  const [availableBiometrics, setAvailableBiometrics] = useState<LocalAuthentication.AuthenticationType[]>([]);

  const { showToast } = useToast();

  const checkAvailableBiometrics = async () => {
    try {
      const biometrics = await LocalAuthentication.supportedAuthenticationTypesAsync();
      setAvailableBiometrics(biometrics);
    } catch (error) {
      console.log(error);
    }
  };

  const enableBiometricAuth = async (biometricType: 'FaceID' | 'TouchID'): Promise<boolean> => {
    try {
      const isBiometricAvailable = await LocalAuthentication.hasHardwareAsync();
      if (!isBiometricAvailable) {
        showToast('error', 'Your device does not support biometric authentication.');
        return false;
      }

      const savedBiometric = await LocalAuthentication.isEnrolledAsync();
      if (!savedBiometric) {
        showToast('error', 'No biometric records found.');
        return false;
      }

      const result = await LocalAuthentication.authenticateAsync({
        promptMessage: 'Authenticate with biometrics',
        fallbackLabel: 'Enter password',
      });

      if (result.success) {
        setBiometricAuth((prevState) => {
          const updatedState = { ...prevState };
          if (biometricType === 'FaceID') {
            updatedState.isFaceIDEnabled = !prevState.isFaceIDEnabled;
            showToast(
              'success',
              `Face ID ${updatedState.isFaceIDEnabled ? 'enabled' : 'disabled'} successfully.`
            );
          } else if (biometricType === 'TouchID') {
            updatedState.isTouchIDEnabled = !prevState.isTouchIDEnabled;
            showToast(
              'success',
              `Touch ID ${updatedState.isTouchIDEnabled ? 'enabled' : 'disabled'} successfully.`
            );
          }
          // Save the updated status
          AsyncStorage.setItem('biometricAuthStatus', JSON.stringify(updatedState));
          return updatedState;
        });

        return true;
      } else {
        showToast('error', 'Authentication failed.');
        return false;
      }
    } catch (error) {
      console.log(error);
      showToast('error', 'An error occurred while enabling biometric authentication.');
      return false;
    }
  };

  const checkIfBiometricEnabled = async (): Promise<void> => {
    const biometricStatus = await AsyncStorage.getItem('biometricAuthStatus');
    if (biometricStatus) {
      const parsedStatus: BiometricAuthStatus = JSON.parse(biometricStatus);
      setBiometricAuth(parsedStatus);
    } else {
      setBiometricAuth({
        isFaceIDEnabled: false,
        isTouchIDEnabled: false,
      });
    }
  };

  useEffect(() => {
    checkAvailableBiometrics();
    checkIfBiometricEnabled();
  }, []);

  return {
    biometricAuth,
    enableBiometricAuth,
    checkIfBiometricEnabled,
    availableBiometrics,
  };
};

State Management: We use useState to manage the biometric authentication status and the available biometric types.
Check Available Biometrics: checkAvailableBiometrics checks what biometric authentication types are supported on the device.
Enable Biometric Authentication: enableBiometricAuth prompts the user to authenticate using biometrics and updates the state accordingly.
Persisting State: We use AsyncStorage to persist the biometric authentication status across app sessions.
Initialization: The useEffect hook initializes the available biometrics and checks if biometric authentication is enabled.

3. Implementing Face ID and Touch ID in the Onboarding Screen

Next, we’ll integrate biometric authentication options into the onboarding flow, allowing users to enable Face ID or Touch ID during onboarding.

Onboarding Screen Component

Create or update your onboarding screen component, for example, FaceID_TouchID.tsx:

import React from "react";
import { View, Image, Text, StyleSheet, TouchableOpacity } from "react-native";
import GlobalButton from "@/components/shared/Button";
import Header from "@/components/shared/Header";
import HeaderTitle from "@/components/shared/HeaderTitle";
import Subtitle from "@/components/shared/Subtitle";
import { Colors, globalStyle } from "@/constants/Colors";
import { useRouter } from "expo-router";
import { useSettings } from "@/hooks/settings/useSettings";
import * as LocalAuthentication from "expo-local-authentication";

const FaceID_TouchID = () => {
  const { biometricAuth, enableBiometricAuth, availableBiometrics } = useSettings();
  const router = useRouter();

  const isFaceIdAvailable = availableBiometrics.includes(
    LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION
  );

  const isTouchIDAvailable = availableBiometrics.includes(
    LocalAuthentication.AuthenticationType.FINGERPRINT
  );

  const isAnyBiometricAvailable = isFaceIdAvailable || isTouchIDAvailable;

  const handleEnableBiometricAuth = async (biometricType: 'FaceID' | 'TouchID') => {
    const success = await enableBiometricAuth(biometricType);
    if (success) {
      router.push("/(auth)/OnboardingFlow/NextOnboardingScreenAfterThisOne");
    }
  };

  return (
    <>
      <Header title="Enable Biometric Authentication" />
      <HeaderTitle title={`Easy Access\nBetter Support`} />
      <View style={styles.container}>
        {isAnyBiometricAvailable ? (
          <>
            {isFaceIdAvailable && (
              <Image
                source={require("@/assets/images/onboarding/FaceIDImage.png")}
                resizeMode="contain"
                style={styles.image}
              />
            )}
            {isTouchIDAvailable && (
              <Image
                source={require("@/assets/images/TouchID.png")}
                resizeMode="contain"
                style={styles.image}
              />
            )}
          </>
        ) : (
          <Text style={styles.notAvailableText}>
            Biometric authentication is not available on this device.
          </Text>
        )}
        {isAnyBiometricAvailable && (
          <Subtitle
            style={{ marginTop: 30 }}
            subtitle="Enable biometric authentication for quick, secure, and effortless access to your support whenever you need it."
          />
        )}
      </View>
      <View style={styles.buttonContainer}>
        {isAnyBiometricAvailable && (
          <>
            {isFaceIdAvailable && (
              <GlobalButton
                title={
                  biometricAuth.isFaceIDEnabled
                    ? "Face ID Enabled"
                    : "Enable Face ID"
                }
                disabled={false}
                buttonColor={Colors.button.backgroundButtonDark}
                textColor={Colors.button.textLight}
                showIcon={false}
                onPress={() => handleEnableBiometricAuth("FaceID")}
              />
            )}
            {isTouchIDAvailable && (
              <GlobalButton
                title={
                  biometricAuth.isTouchIDEnabled
                    ? "Touch ID Enabled"
                    : "Enable Touch ID"
                }
                disabled={false}
                buttonColor={Colors.button.backgroundButtonDark}
                textColor={Colors.button.textLight}
                showIcon={false}
                onPress={() => handleEnableBiometricAuth("TouchID")}
              />
            )}
          </>
        )}
      </View>
      <TouchableOpacity
        style={styles.skipButton}
        onPress={() => router.push("/(auth)/OnboardingFlow/screenThirteen")}
      >
        <Text style={styles.skipText}>
          {isAnyBiometricAvailable ? "Enable later" : "Skip"}
        </Text>
      </TouchableOpacity>
    </>
  );
};

export default FaceID_TouchID;

const styles = StyleSheet.create({
  container: {
    flex: 0.9,
    alignItems: "center",
    justifyContent: "center",
  },
  image: {
    height: 250,
    width: 250,
  },
  buttonContainer: {
    marginHorizontal: globalStyle.container.marginHorizontal,
    marginBottom: 10,
  },
  skipButton: {
    justifyContent: "center",
    alignItems: "center",
  },
  skipText: {
    textAlign: "center",
    fontFamily: globalStyle.font.fontFamilyBold,
    color: Colors.button.textDark,
  },
  notAvailableText: {
    textAlign: "center",
    fontFamily: globalStyle.font.fontFamilyMedium,
    color: Colors.button.textDark,
  },
});

Biometric Availability: We check which biometric types are available on the device.
Dynamic UI: The UI adapts based on the available biometrics, showing relevant images and buttons.
Handling Authentication: When the user taps “Enable Face ID” or “Enable Touch ID”, we call handleEnableBiometricAuth, which uses our custom hook to enable biometric authentication.
Navigation: Upon successful authentication, we navigate to the next onboarding screen which in this case we called NextOnboardingScreenAfterThisOne which is your next onboarding screen

router.push("/(auth)/OnboardingFlow/NextOnboardingScreenAfterThisOne");

4. Implementing Face ID in the Login Screen

We’ll integrate biometric authentication into the login screen, allowing users to log in using Face ID or Touch ID if they have previously enabled it.

Login Screen Component

Update your Login.tsx component as follows:

import React, { useState, useEffect, useRef } from "react";
import { View, Text, StyleSheet, ScrollView, Keyboard } from "react-native";
import * as SecureStore from "expo-secure-store";
import * as LocalAuthentication from "expo-local-authentication";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Feather } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";
import GlobalButton from "@/components/shared/Button";
import CustomTextInput from "@/components/shared/CustomTextInput";
import Header from "@/components/shared/Header";
import HeaderTitle from "@/components/shared/HeaderTitle";
import PasswordStrengthDisplay from "@/components/shared/PasswordStrengthDisplay";
import Checkbox from "expo-checkbox";
import { Colors, globalStyle } from "@/constants/Colors";
import { useSession } from "@/providers/Auth/AuthProvider";
import { useToast } from "@/providers/useToast";
import PsyvatarLogo from "@/assets/images/Logo";

const Login = () => {
  const { params } = useLocalSearchParams();
  const { showToast } = useToast();
  const { signIn, isLoading, signUp } = useSession();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [securePassword, setSecurePassword] = useState(true);
  const [isChecked, setChecked] = useState(false);

  const [isBiometricSupported, setIsBiometricSupported] = useState(false);
  const [biometricType, setBiometricType] = useState("");
  const [isBiometricEnabled, setIsBiometricEnabled] = useState(false);

  const emailRef = useRef(null);
  const passwordRef = useRef(null);
  const nameRef = useRef(null);

  const isInvalidRegister = name === "" || email === "" || password === "";
  const isInvalidLogin = email === "" || password === "";

  useEffect(() => {
    setTimeout(() => {
      if (params === "register") {
        nameRef?.current?.focus();
      } else {
        emailRef?.current?.focus();
      }
    }, 800);

    const getEmailFromStore = async () => {
      try {
        const storedEmail = await SecureStore.getItemAsync("userEmail");
        if (storedEmail) {
          setEmail(storedEmail);
          setChecked(true);
        }
      } catch (error) {
        console.log("Error fetching email from SecureStore", error);
      }
    };

    const checkBiometricSupport = async () => {
      const compatible = await LocalAuthentication.hasHardwareAsync();
      setIsBiometricSupported(compatible);

      if (compatible) {
        const savedBiometrics = await LocalAuthentication.isEnrolledAsync();
        if (savedBiometrics) {
          const types = await LocalAuthentication.supportedAuthenticationTypesAsync();
          if (
            types.includes(
              LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION
            )
          ) {
            setBiometricType("Face ID");
          } else if (
            types.includes(LocalAuthentication.AuthenticationType.FINGERPRINT)
          ) {
            setBiometricType("Touch ID");
          } else {
            setBiometricType("Biometrics");
          }
        }
      }

      const biometricEnabled = await AsyncStorage.getItem("biometricAuthStatus");
      if (biometricEnabled) {
        const parsedStatus = JSON.parse(biometricEnabled);
        setIsBiometricEnabled(
          parsedStatus.isFaceIDEnabled || parsedStatus.isTouchIDEnabled
        );
      }
    };

    getEmailFromStore();
    checkBiometricSupport();
  }, []);

  const handleRegister = () => {
    if (params === "register" && isInvalidRegister) {
      return showToast("warning", "One or more fields are missing");
    }
    signUp(email, password, name);
  };

  const handleLogin = async () => {
    if (params === "login" && isInvalidLogin) {
      return showToast("warning", "One or more fields are missing");
    }
    Keyboard.dismiss();

    const loginSuccess = await signIn(email, password);

    if (loginSuccess) {
      if (isChecked) {
        try {
          await SecureStore.setItemAsync("userEmail", email);
        } catch (error) {
          console.log("Error saving email to SecureStore", error);
        }
      } else {
        await SecureStore.deleteItemAsync("userEmail");
      }

      if (isBiometricEnabled) {
        try {
          await SecureStore.setItemAsync("userEmail", email);
          await SecureStore.setItemAsync("userPassword", password);
        } catch (error) {
          console.log("Error saving credentials to SecureStore", error);
        }
      }
    }
  };

  const handleBiometricLogin = async () => {
    try {
      const result = await LocalAuthentication.authenticateAsync({
        promptMessage: `Login with ${biometricType}`,
        fallbackLabel: "Enter password",
      });

      if (result.success) {
        const storedEmail = await SecureStore.getItemAsync("userEmail");
        const storedPassword = await SecureStore.getItemAsync("userPassword");

        if (storedEmail && storedPassword) {
          await signIn(storedEmail, storedPassword);
        } else {
          showToast("error", "No credentials found. Please log in manually.");
          setIsBiometricSupported(false);
        }
      } else {
        showToast("error", "Biometric authentication failed.");
        setIsBiometricSupported(false);
      }
    } catch (error) {
      console.log("Biometric authentication error:", error);
      showToast("error", "An error occurred during biometric authentication.");
      setIsBiometricSupported(false);
    }
  };

  const getButtonProps = () => {
    if (params === "login" && isBiometricEnabled && isBiometricSupported) {
      return {
        title: `Login with ${biometricType}`,
        onPress: handleBiometricLogin,
      };
    } else if (params === "login") {
      return {
        title: "Sign In",
        onPress: handleLogin,
      };
    } else {
      return {
        title: "Sign Up",
        onPress: handleRegister,
      };
    }
  };

  const { title, onPress } = getButtonProps();

  return (
    <>
      <Header logo={<Logo />} BackButton />
      <HeaderTitle
        title={`${params === "register" ? "Welcome!" : "Welcome Back!"}`}
      />
      <View style={styles.container}>
        <ScrollView
          style={styles.container}
          showsVerticalScrollIndicator={false}
        >
          {params === "register" && (
            <CustomTextInput
              keyboardType="default"
              label="Name"
              placeholder="Your name"
              leftIcon={
                <Feather
                  name="user"
                  size={Colors.button.iconSize}
                  color={Colors.button.iconColorDark}
                />
              }
              secureTextEntry={false}
              onChangeText={(text) => setName(text)}
              value={name}
              height={50}
              ref={nameRef}
              onSubmitEditing={() => emailRef?.current?.focus()}
            />
          )}
          <CustomTextInput
            ref={emailRef}
            keyboardType="email-address"
            label="Email address"
            placeholder="Enter your email"
            leftIcon={
              <Feather
                name="mail"
                size={Colors.button.iconSize}
                color={Colors.button.iconColorDark}
              />
            }
            secureTextEntry={false}
            onChangeText={setEmail}
            value={email}
            autoCapitalize="none"
            height={50}
            onSubmitEditing={() => passwordRef?.current?.focus()}
          />
          <CustomTextInput
            ref={passwordRef}
            value={password}
            keyboardType="visible-password"
            label="Password"
            placeholder="Enter your password"
            leftIcon={
              <Feather
                name="lock"
                size={Colors.button.iconSize}
                color={Colors.button.iconColorDark}
              />
            }
            rightIcon={
              <Feather
                name={securePassword ? "eye-off" : "eye"}
                size={Colors.button.iconSize}
                color={Colors.button.iconColorDark}
              />
            }
            rightIconPressable={() => setSecurePassword(!securePassword)}
            secureTextEntry={securePassword}
            onChangeText={setPassword}
            autoCapitalize="none"
            height={50}
            onSubmitEditing={() => Keyboard.dismiss()}
          />

          {params === "register" && (
            <PasswordStrengthDisplay password={password} />
          )}

          <View style={styles.rememberMeContainer}>
            <Checkbox
              style={styles.checkbox}
              value={isChecked}
              onValueChange={setChecked}
              color={isChecked ? "#4096C1" : undefined}
            />
            <Text style={styles.rememberText}>Remember me</Text>
          </View>
        </ScrollView>

        <View style={styles.buttonWrapper}>
          <GlobalButton
            title={title}
            onPress={onPress}
            disabled={isLoading}
            loading={isLoading}
            buttonColor={Colors.button.backgroundButtonDark}
            textColor={Colors.button.textLight}
            showIcon={false}
          />

       {params === "login" && isBiometricEnabled && isBiometricSupported && (
            <TouchableOpacity
              onPress={() => setIsBiometricSupported(false)}
              style={{
                margin: 10,
              }}
            >
              <Text
                style={{
                  textAlign: "center",
                  fontFamily: globalStyle.font.fontFamilyBold,
                  color: Colors.button.textDark,
                }}
              >
                Sign In manually
              </Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
    </>
  );
};

export default Login;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: globalStyle.container.marginHorizontal,
  },
  rememberText: {
    color: "#282545",
    fontWeight: "400",
    fontSize: 14,
  },
  rememberMeContainer: {
    marginVertical: 10,
    marginBottom: 0,
    flexDirection: "row",
    alignItems: "center",
  },
  checkbox: {
    margin: 8,
    borderRadius: 4,
  },
  buttonWrapper: {
    marginHorizontal: globalStyle.container.marginHorizontal,
    marginBottom: 15,
  },
});

Biometric Support Check: On component mount, we check if the device supports biometric authentication and if it’s enabled.
Biometric Login Handling: handleBiometricLogin manages the biometric authentication flow. If successful, it retrieves stored credentials and logs the user in.
Dynamic Button Rendering: Based on whether biometric login is available, we dynamically set the button’s title and onPress handler.
Storing Credentials: Upon a successful manual login, if biometric authentication is enabled, we securely store the user’s credentials for future biometric logins.
We have a button on the bottom of the file where we allow a user to toggle whether they want to sign in manually, which is a fail-safe approach in case biometric authentication doesn’t work.

5. Adding Biometric Authentication Toggle in the Settings Screen

To give users control over biometric authentication, we’ll add toggle switches in the settings screen, allowing them to enable or disable Face ID or Touch ID at any time.

Settings Screen Component

Update your SettingsScreen.tsx component as follows:

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Image,
  Modal,
  Linking,
} from "react-native";
import { Feather, FontAwesome } from "@expo/vector-icons";
import { SettingOption, SettingToggle } from "./components";
import { useSession } from "@/providers/Auth/AuthProvider";
import GlobalButton from "@/components/shared/Button";
import { Colors, globalStyle } from "@/constants/Colors";
import HeaderTitle from "@/components/shared/HeaderTitle";
import Subtitle from "@/components/shared/Subtitle";
import AnimatedWrapper from "@/components/shared/animation";
import { useRouter } from "expo-router";
import { useSettings } from "@/hooks/settings/useSettings";
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
import { useHandleApiError } from "@/hooks/settings/useHandleApiError";
import * as LocalAuthentication from "expo-local-authentication";

export const BASE_DELAY = 50;

export default function SettingsScreen() {
  const { signOut, deleteUserRecord, isLoading } = useSession();
  const { biometricAuth, enableBiometricAuth, availableBiometrics } = useSettings();

  const isFaceIDAvailable = availableBiometrics.includes(
    LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION
  );

  const isTouchIDAvailable = availableBiometrics.includes(
    LocalAuthentication.AuthenticationType.FINGERPRINT
  );

  // Set up biometric toggle based on availability
  let biometricLabel = "";
  let isBiometricEnabled = false;
  let toggleBiometricAuth = null;
  let biometricIcon = null;

  if (isFaceIDAvailable) {
    biometricLabel = "Face ID";
    isBiometricEnabled = biometricAuth.isFaceIDEnabled;
    toggleBiometricAuth = () => enableBiometricAuth("FaceID");
    biometricIcon = (
      <MaterialCommunityIcons
        name="face-recognition"
        size={20}
        color="#4096C1"
      />
    );
  } else if (isTouchIDAvailable) {
    biometricLabel = "Touch ID";
    isBiometricEnabled = biometricAuth.isTouchIDEnabled;
    toggleBiometricAuth = () => enableBiometricAuth("TouchID");
    biometricIcon = (
      <MaterialCommunityIcons name="fingerprint" size={20} color="#4096C1" />
    );
  }

  const router = useRouter();

  const [isPushEnabled, setIsPushEnabled] = useState(false);

  const togglePushNotifications = () => setIsPushEnabled(!isPushEnabled);

  const [modalVisible, setModalVisible] = useState(false);
  const handleApiError = useHandleApiError();

  const handleDelete = () => {
    setModalVisible(true);
  };

  const deleteAccount = async () => {
    try {
      const response = await deleteUserRecord();
      if (response.success) {
        setTimeout(() => {
          setModalVisible(!modalVisible);
        }, 500);
      } else {
        handleApiError(response);
      }
    } catch (error) {
      console.log(error);
    }
  };

  const cancelDelete = () => {
    setModalVisible(!modalVisible);
  };

  return (
    <View style={styles.container}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <AnimatedWrapper delay={BASE_DELAY * 1}>
          <Text style={styles.sectionTitle}>GENERAL</Text>
        </AnimatedWrapper>
        <SettingOption
          delay={BASE_DELAY * 2}
          label="Get Help"
          icon={
            <FontAwesome name="question-circle-o" size={20} color="#4096C1" />
          }
          onPress={() => router.navigate("/(auth)/help")}
        />
        <SettingOption
          delay={BASE_DELAY * 3}
          label="Contact Us"
          icon={<Feather name="mail" size={20} color="#4096C1" />}
          onPress={() => router.navigate("/(auth)/help/contact_us")}
        />
        <SettingOption
          delay={BASE_DELAY * 4}
          label="Subscription Details"
          subLabel="View current plan & upgrade"
          icon={<FontAwesome name="credit-card" size={20} color="#4096C1" />}
          onPress={() => console.log("Subscription Details Pressed")}
        />

        <SettingOption
          delay={BASE_DELAY * 5}
          label="Select/Change Therapist"
          subLabel="Select or change your therapist"
          icon={<Feather name="user" size={20} color="#4096C1" />}
          onPress={() => router.push("/(auth)/OnboardingFlow/selectAvatar")}
        />

        <SettingOption
          delay={BASE_DELAY * 5}
          label="Join Psyvatar community"
          subLabel="Join our discord community"
          icon={
            <MaterialCommunityIcons
              name="account-group-outline"
              size={20}
              color="#4096C1"
            />
          }
          onPress={() => Linking.openURL("https://discord.gg/dcBzhh5e")}
        />

        <AnimatedWrapper delay={BASE_DELAY * 6}>
          <Text style={styles.sectionTitle}>NOTIFICATIONS</Text>
        </AnimatedWrapper>
        <AnimatedWrapper delay={BASE_DELAY * 7}>
          <SettingToggle
            label="Push Notifications"
            subLabel="For daily updates and others."
            icon={<Feather name="bell" size={20} color="#4096C1" />}
            isEnabled={isPushEnabled}
            toggleSwitch={togglePushNotifications}
          />
        </AnimatedWrapper>
        {biometricLabel !== "" && (
          <AnimatedWrapper delay={BASE_DELAY * 8}>
            <SettingToggle
              label={biometricLabel}
              subLabel={`Enable or disable ${biometricLabel}`}
              icon={biometricIcon}
              isEnabled={isBiometricEnabled}
              toggleSwitch={toggleBiometricAuth}
            />
          </AnimatedWrapper>
        )}
        <AnimatedWrapper delay={BASE_DELAY * 9}>
          <Text style={styles.sectionTitle}>MORE</Text>
        </AnimatedWrapper>
        <SettingOption
          delay={BASE_DELAY * 10}
          label="Logout"
          icon={<Feather name="log-out" size={24} color="#4096C1" />}
          onPress={signOut}
        />

        <AnimatedWrapper delay={BASE_DELAY * 11}>
          <GlobalButton
            title="Delete Account"
            disabled={false}
            buttonColor={"red"}
            textColor={Colors.button.textLight}
            showIcon={false}
            onPress={handleDelete}
          />
        </AnimatedWrapper>
      </ScrollView>

      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Image
              resizeMode="contain"
              style={{
                width: 200,
                height: 200,
                marginHorizontal: "auto",
              }}
              source={require("@/assets/images/DeleteAccountImage.png")}
            />
            <HeaderTitle title="You sure?" />
            <Subtitle
              subtitle="We suggest that you log out but if you insist on deleting your account we will be here if you need any mental health support."
              style={{
                marginTop: -10,
              }}
            />

            <GlobalButton
              title="Delete"
              disabled={isLoading}
              buttonColor={"#FB6C6C"}
              textColor={Colors.button.textLight}
              showIcon={false}
              onPress={deleteAccount}
              loading={isLoading}
            />

            <TouchableOpacity onPress={cancelDelete}>
              <Text style={styles.cancelText}>Cancel</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    paddingHorizontal: 16,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: "600",
    color: "#4096C1",
    marginTop: 20,
    marginBottom: 10,
    fontFamily: globalStyle.font.fontFamilyMedium,
  },

  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.85)",
  },

  modalView: {
    width: "85%",
    backgroundColor: "white",
    borderRadius: 20,
    padding: 20,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  cancelText: {
    marginTop: 10,
    color: "#7B7B7A",
    fontFamily: globalStyle.font.fontFamilyBold,
    textAlign: "center",
  },
});

Biometric Toggle Setup: We check if Face ID or Touch ID is available and set up the toggle accordingly.
Dynamic Rendering: If biometric authentication is available, we render a SettingToggle component to allow users to enable or disable it.
Using Custom Hook: The enableBiometricAuth function from our useSettings hook is used to handle the toggle action.
UI Components: The settings screen includes various other settings options, and the biometric toggle is integrated seamlessly among them.

Integrating the Toggle Component

Ensure you have a SettingToggle component that accepts the necessary props:

// components/SettingToggle.tsx

import React from "react";
import { View, Text, StyleSheet, Switch } from "react-native";
import { globalStyle } from "@/constants/Colors";
import AnimatedWrapper from "@/components/shared/animation";

interface SettingToggleProps {
  label: string;
  subLabel?: string;
  icon?: JSX.Element;
  isEnabled: boolean;
  toggleSwitch: () => void;
  delay?: number;
}

export const SettingToggle = ({
  label,
  subLabel,
  icon,
  isEnabled,
  toggleSwitch,
  delay,
}: SettingToggleProps) => {
  return (
    <AnimatedWrapper delay={delay}>
      <View style={styles.optionContainer}>
        {icon && <View style={styles.optionIcon}>{icon}</View>}
        <View style={styles.optionTextContainer}>
          <Text style={styles.optionLabel}>{label}</Text>
          {subLabel && <Text style={styles.optionSubLabel}>{subLabel}</Text>}
        </View>
        <Switch
          trackColor={{ false: "#767577", true: "#4096C1" }}
          thumbColor="#f4f3f4"
          ios_backgroundColor="#3e3e3e"
          onValueChange={toggleSwitch}
          value={isEnabled}
          style={{ transform: [{ scaleX: 0.75 }, { scaleY: 0.75 }] }}
        />
      </View>
    </AnimatedWrapper>
  );
};

const styles = StyleSheet.create({
  optionContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#EDEDED",
    marginVertical: 15,
  },
  optionIcon: {
    marginRight: 15,
  },
  optionTextContainer: {
    flex: 1,
  },
  optionLabel: {
    fontSize: 16,
    fontWeight: "500",
    fontFamily: globalStyle.font.fontFamilyMedium,
  },
  optionSubLabel: {
    fontSize: 12,
    color: "#7C7C7C",
    fontFamily: globalStyle.font.fontFamilyMedium,
  },
});

Toggle Functionality: The Switch component is used to toggle biometric authentication on or off.
Dynamic Props: The component accepts dynamic props like label, subLabel, icon, isEnabled, and toggleSwitch.
Animation: An AnimatedWrapper is used for entry animations, enhancing the user experience.

Conclusion

Integrating Face ID and Touch ID into your React Native Expo app enhances security and provides a seamless user experience. By following this guide, you’ve learned how to:

Install and set up necessary packages.
Create a custom hook to manage biometric authentication settings.
Implement biometric options in your onboarding flow.
Enable biometric login in your login screen.
Add toggle switches in the settings screen to allow users to control biometric authentication.

At DETL, we believe in combining robust engineering with elegant design to create exceptional software solutions. Implementing biometric authentication is just one way to elevate your app’s user experience while maintaining high security standards.

Thank you for reading! If you’re interested in more tips and tutorials on building high-quality applications, stay tuned to our blog at DETL.

DEV Community: DETL INC

How to implement Image Upload with Expo Image Picker in React Native for a professional app launched app.

Introduction

Why Implement a Profile Image Picker?

Overview

Step 1: Installing Required Packages

Step 2: Importing Necessary Modules and Setting Up State

Step 3: Requesting Permissions and Picking an Image

Step 4: Uploading the Image to the Backend

Step 5: Displaying the Profile Image

Entire Code

Conclusion

How to create authenticated routes with the new Expo SDK 51 using Expo Router

Handling Authentication:

Providers → Auth folder → AuthProviders.tsx

AuthContext and Context Provider Setup

Context Provider

Authentication Functions: Sign Up, Sign In, Sign Out

Sign Up Function:

Sign In Function:

Sign Out Function:

Exposed Values in Context:

Providers → Auth folder → useStorageState.tsx

Conclusion

How to Implement Face ID and Touch ID in React Native Expo in your Onboarding flow, Login Screen and Settings Screen

Introduction

1. Required Packages to install

Install all dependencies together

2. Creating a Custom Hook: useSettings

Creating the Hook

3. Implementing Face ID and Touch ID in the Onboarding Screen

Onboarding Screen Component

4. Implementing Face ID in the Login Screen

Login Screen Component

5. Adding Biometric Authentication Toggle in the Settings Screen

Settings Screen Component

Integrating the Toggle Component

Conclusion

2. Creating a Custom Hook: `useSettings`