Skip to main content

Getting Started

Prerequisites​

react-native-mlkit-face-detection is an Expo Module. And is compatible with both the Managed and Bare workflows.

Managed Workflow​

react-native-mlkit-face-detection is compatible with the Expo Managed Workflow out of the box. No additional setup is required!

Workflow​

To use the module, you'll need to install and configure the expo package. See the expo docs for instructions.

Basic Usage​

1. Installation​

Add the package to your project using your favorite package manager:

yarn add @infinitered/react-native-mlkit-face-detection

2. Setting Up the Context​

Wrap your app with the FaceDetectionProvider component.

// App.tsx

import {
  FaceDetectionProvider,
} from "@infinitered/react-native-mlkit-face-detection";

function App() {
  return (
    <FaceDetectionProvider>
      {/* rest of your app goes here */}
    </FaceDetectionProvider>
  );
}
tip

By default, the face detection is automatically initialized and loaded into memory when created, which can have a significant impact on the performance of your app. The Advanced Usage guide has instructions on how to defer this initialization.

tip

You can set custom options for the face detector by passing them to the options prop. More info available on the Options page.

3. Detecting Faces in Photos​

Once the provider is in place, use the useFacesInPhoto hook. This hook will allow you to detect faces in any photo by simply passing the image's URI.

::: warning The useFacesInPhoto hook requires a local URI to the image file. Remote URLs are not supported. :::

import { useFacesInPhoto } from "@infinitered/react-native-mlkit-face-detection";

function FaceDetectionComponent() {
  // imageUri must be a local file URI
  const { faces, error, status } = useFacesInPhoto('local_uri_of_your_image_uri');

  if (error) {
    return <Text>Error: {error}</Text>;
  }

  return (<View>
    {faces.map((face) => (
      <View key={face.trackingId}>
        <Text>{JSON.stringify(face)}</Text>
      </View>
    ))}
  </View>)
}

Now, you're set to incorporate face detection into your application! Check out our Advanced Usage guide for more information.