Real-Time Face Detection in React Native: Lessons from Shipping an AI App

Measure distance with a face-to-frame ratio

You don't need depth sensors to know whether someone is too far away. The ratio of the detected face box to the frame size is a reliable proxy:

const MIN_FACE_RATIO = 0.20;
const MAX_FACE_RATIO = 0.35;

const ratio = face.bounds.width / frameWidth;

if (ratio < MIN_FACE_RATIO) setFaceStatus('TOO_FAR');
else if (ratio > MAX_FACE_RATIO) setFaceStatus('TOO_CLOSE');
else setFaceStatus('OK');

Those two numbers took real device testing to settle on. Below 0.20 the face occupies too few pixels for landmarks to be stable. Above 0.35 the frame starts cropping the jaw and hairline — exactly the features you need for proportion measurements. Your ideal window depends on what you're measuring, so tune it on real hardware rather than trusting a value from a blog post (including this one).

Handle multiple faces explicitly

If two people are in frame, which one is the user? There's no good answer, so don't guess:

if (faces.length === 0) setFaceStatus('NO_FACE');
else if (faces.length > 1) setFaceStatus('MULTIPLE_FACES');

Picking the largest face seems clever until someone scans themselves with a friend leaning in and gets their friend's results.

Don't make the user guess how long to hold still

Once conditions are met, users need to know the app is working and roughly how long to stay put. A circular progress indicator filling over the capture window solves it, and it doubles as a natural stabilisation period — the frame gets steadier while the ring fills.

Keep the interval handle in a ref and clear it on unmount and on focus loss, or you'll leak timers when users navigate away mid-scan:

const intervalRef = useRef<NodeJS.Timeout | null>(null);

useEffect(() => () => {
  if (intervalRef.current) clearInterval(intervalRef.current);
}, []);

Attach auth once, not on every call

Uploading face images demands authentication, and you don't want each screen remembering to add a header. Do it once in an axios interceptor:

const apiClient = axios.create({ baseURL: API_BASE, timeout: 10000 });

apiClient.interceptors.request.use(async (config) => {
  const token = await AsyncStorage.getItem('token');
  if (token) {
    config.headers = { ...config.headers, Authorization: `Bearer ${token}` };
  }
  return config;
});

Every request is authenticated by default, and adding a new endpoint can't accidentally ship an unauthenticated upload.

Take the permission strings seriously

Apple reads these. Vague camera descriptions get apps rejected, and reviewers are specifically alert to face data. Write them for a human being who wants to know what happens to their face:

This app uses the camera to capture facial images for AI-based face analysis, such as estimating facial symmetry, jawline structure, and visual appearance metrics. The captured images are processed only for providing personalized analysis results to the user.

Say what you capture, why, and what you do with it. Vague strings like "needs camera access" are a rejection waiting to happen.

Back the description with actual behaviour: no permanent face-image storage on the device, HTTPS only, and images used solely for analysis. If your privacy policy and your code disagree, the code is what matters.

Things I'd tell myself before starting

• Test on cheap Android phones early. Real-time detection is fine on a flagship and reveals every performance problem on a three-year-old mid-range device.
• Every failure state needs its own message. "Scan failed" tells the user nothing. "Move a little closer" gets them to a successful scan.
• The New Architecture and Hermes are worth enabling for a camera-heavy app — the frame processing path benefits directly.
• A validation gate beats a better model. I could have spent that time tuning analysis. Refusing bad input was worth more.

The takeaway

Real-time face detection in React Native is very achievable in 2026 — Vision Camera does the heavy lifting. The engineering that determines whether your app feels trustworthy isn't the detection itself. It's the rules you write around it: what you refuse to capture, what you tell the user when you refuse, and what you do with the image afterwards.

FaceSculpt AI is live on Google Play and the App Store.

Read the full case study

Building something similar? Get in touch and tell me about it.