📸 React Native Face Direction

A React Native library built on top of react-native-vision-camera and react-native-worklets-core, providing a drop-in <FaceCameraView /> component with real-time face detection and direction tracking (left, right, front).

🚀 Features

• Detect faces in real time using VisionCamera Frame Processors
• Provides status: no_face, one_face, multiple_face
• Returns direction: left, right, front (only for single face)
• Reports count of detected faces
• Simple <FaceCameraView /> component you can render directly

📦 Installation

yarn add react-native-face-direction
yarn add react-native-vision-camera react-native-worklets-core
cd ios && pod install

⚠️ Make sure your app already has React Native properly set up with VisionCamera.
On Android, no extra step needed besides Gradle sync. Just ensure minSdkVersion ≥ 24.

⚙️ Babel config

module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
'react-native-worklets-core/plugin', // ✅ required for frame processors
'@babel/plugin-proposal-optional-chaining',
],
};

If you’re using react-native-builder-bob:
const path = require('path');
const { getConfig } = require('react-native-builder-bob/babel-config');
const pkg = require('../package.json');
const root = path.resolve(__dirname, '..');
module.exports = getConfig(
{
presets: ['module:@react-native/babel-preset'],
plugins: [
'react-native-worklets-core/plugin',
'@babel/plugin-proposal-optional-chaining',
],
},
{ root, pkg }
);

🔑 Permissions

iOS → Info.plist
NSCameraUsageDescription
We use the camera to detect faces and directions.

Android → AndroidManifest.xml

🖼 Usage

import React, { useCallback } from 'react';
import { StyleSheet, View } from 'react-native';
import { FaceCameraView, type FaceResult } from 'react-native-face-direction';

export default function App() {
const handleFaceResult = useCallback((result: FaceResult) => {
console.log('Face Result:', result);
// {
// status: 'one_face',
// count: 1,
// faces: [
// { x: 0.1, y: 0.2, width: 0.3, height: 0.3, direction: 'front' }
// ]
// }
}, []);

return (



);
}

const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: 'black' },
});

📊 Returned Result

type FaceResult = {
status: 'no_face' | 'one_face' | 'multiple_face';
count: number;
faces: Array<{
x: number;
y: number;
width: number;
height: number;
direction?: 'left' | 'right' | 'front';
}>;
};

🧪 Example App

This repo includes an example app to test the library locally.

Run on iOS:
yarn bootstrap
cd example/ios
pod install
cd ..
yarn ios

Run on Android:
yarn bootstrap
yarn android

This will launch the example app where you can test <FaceCameraView /> directly.

🛠 Development

This library is built using react-native-builder-bob.