Augmented reality (AR) is a technology that blends computer-generated images with the real world. Building AR applications with React Native has become popular due to its cross-platform capabilities, vast community support, and a variety of libraries that enable developers to create immersive AR experiences.
This article will review how to build a custom AR face mask using DeepAR and use the face mask in a React Native application. See the full code for this post here on GitHub.
This tutorial assumes a basic understanding of React Native and the necessary development tools. Knowledge of DeepAR is not required.
We’ll build a simple React Native app that loads an AR face mask from DeepAR, as shown:
There are several AR frameworks that you can choose from to add AR filters and effects to your React Native application. Some options include:
react-native-deepar packageThese are just a few of the options available. In this article, we’ll use the DeepAR platform to create, edit, and add an AR face mask to our React Native application.
DeepAR is a framework for creating augmented reality applications. DeepAR offers various products that allow developers to create immersive experiences with AR, such as:
Some of the key DeepAR features include face filters, effects, masks, AR beauty and makeup filters, Realtime Emotion Detection, and more. Though not free, DeepAR allows you to create free applications that can be used by up to 10 people.
First, you’ll need to create a DeepAR Account and then create a new free project:
Next, you’ll be required to link an app. We’ll create an Android and iOS app. Add the desired app and bundle ID/app ID, which will also be updated in our Android and iOS React Native apps to match:
You should be provided with a license key, which we’ll use to deploy our DeepAR apps:
We’ll use the DeepAR Studio to build and render a custom face mask in our React Native app. You can use it to create or test customized AR filters.
First, install DeepAR Studio directly from the DeepAR Developer Portal. Once the installation setup is complete, create a new project:
You’ll be directed to the editor, where you’ll create your AR face mask:
Next, click the Root section under the hierarchy editor then click Add component. Select Mesh Render as your component:
Then, set your mesh to Face and on the material select Duplicate. This will add default material under Assets:
Clicking on the material added allows you to modify different properties of the face mask:
We’ll add a custom texture to the face mesh. A texture is an image or a painting that you want to place on top of the model/mesh.
First, import your custom texture by clicking the Add button under Assets. Import your resources. This will add the resources under textures:
You’ll then add the new texture as the surface material of the AR face mask. Click the material you added, then set the Shader to MatCap:
Then, set the color texture to the imported texture. This paints the face mask according to the texture you added:
Once you’re done setting your desired properties, you can open a live preview of your mask:
If you’re satisfied with the output, export the face mask. The file should be saved with a .deepar file extension:
Since we intend to store the filter in online storage and fetch it over the internet, we’ll use Supabase to store the asset. You can use any storage platform you want for the asset if Supabase isn’t for you; you might even want to go ahead and use the asset locally in your React Native application.
If you do use Supabase, create public storage, then add the exported file. You can then use the URL you obtain to fetch the asset in your app.
With that, you’re ready to use your face mask in your React Native application.
First, create a React Native application using the command below:
npx react-native@latest init reactdeepar
Next, add the following dependencies in your package.json file, then run Yarn to install them:
"react-native-deepar": "^0.11.0", "rn-fetch-blob": "^0.12.0"
The react-native-deepar package offers a React Native wrapper for DeepAR, and we’ll use the rn-fetch-blob package to fetch our custom face mask over the internet.
Update your App.tsx file with the code snippet below. Replace <YOUR-SUPABASE-FILE-URL> with the URL of the file stored on Supabase and <YOUR-API-KEY> with your app-specific DeepAR license key:
// Add imports
import {useEffect, useRef, useState} from 'react';
import {
Dimensions,
Linking,
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import DeepARView, {
IDeepARHandle,
Camera,
CameraPermissionRequestResult,
ErrorTypes,
CameraPositions,
} from 'react-native-deepar';
import RNFetchBlob from 'rn-fetch-blob';
const App = () => {
const deepARRef = useRef<IDeepARHandle>(null);
const [permsGranted, setPermsGranted] = useState(false);
const getPermissions = async () => {
const cameraPermission = await Camera.requestCameraPermission();
const isCameraAllowed =
cameraPermission === CameraPermissionRequestResult.AUTHORIZED;
if (isCameraAllowed) {
setPermsGranted(true);
} else {
Linking.openSettings();
}
};
useEffect(() => {
getPermissions();
}, []);
const loadEffect = () => {
RNFetchBlob.config({
fileCache: true,
})
.fetch('GET', '<YOUR-SUPABASE-FILE-URL>')
.then(res => {
deepARRef?.current?.switchEffectWithPath({
path: res.path(),
slot: 'mask',
});
});
};
const renderPhotoButton = () => {
return (
<>
<View style={styles.button}>
<TouchableOpacity onPress={loadEffect} style={styles.effectButton}>
<Text style={styles.effectText}>Load Effect</Text>
</TouchableOpacity>
</View>
</>
);
};
const renderDeepARView = () => {
if (permsGranted === false) {
return null;
}
return (
<>
<DeepARView
ref={deepARRef}
apiKey="<YOUR-API-KEY>"
videoWarmup={false}
position={CameraPositions.FRONT}
style={styles.deepARView}
onError={(text: String, type: ErrorTypes) => {
console.log('onError =>', text, 'type =>', type);
}}
/>
{renderPhotoButton()}
</>
);
};
return (
<SafeAreaView>
<View style={styles.container}>{renderDeepARView()}</View>
</SafeAreaView>
);
};
export default App;
This code does the following:
switchEffectWithPath method from DeepAR. This method expects a path where the asset will be stored, and a slot, which is a unique name for your face maskDeepARView with your API key. You can display the face mask by clicking the button in the UITo run the project on Android or iOS, follow the steps in this article’s GitHub repository. When you run your application and load the effect, your AR face mask displays as shown below:
In this tutorial, we discussed the various options for AR in your React Native application. We explored DeepAR and some of its products and features. We then created a custom DeepAR face mask using DeepAR studio and used the face mask in our React Native app. The complete code used in this article is available on GitHub.
The face mask built in this article is simple and standard, but DeepAR is flexible and allows you to create more complex masks. Hope you found this article helpful, happy coding!
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build a React Native Turbo Module for Android to access device info like model, IP, uptime, and battery status using native mobile APIs.
Learn how to measure round-trip time (RTT) using cURL, a helpful tool used to transfer data from or to a server.
React.memo prevents unnecessary re-renders and improves performance in React applications. Discover when to use it, when to avoid it, and how it compares to useMemo and useCallback.
Learn how React’s useCallback hook boosts performance by memoizing functions and preventing unnecessary re-renders with practical examples and best practices.
