LOG  No Face detected!
... 
LOG  1 Face detected all good!
LOG  No Face detected!
... Nothing for a while and same pattern repeats

LOG  1 Face detected all good!
LOG  1 Face detected all good!
LOG  1 Face detected all good!
LOG  1 Face detected all good!
...

import React from 'react';
import { useState, useRef, useEffect } from "react";

import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { Dimensions } from "react-native";
import { Camera, CameraType } from 'expo-camera';
import * as FaceDetector from "expo-face-detector";

const useScreenDimensions = () => {
  const [screenData, setScreenData] = useState(Dimensions.get("screen"));
  useEffect(() => {
    const subscription = Dimensions.addEventListener(
      'change',
      ({window, screen}) => {
        setScreenData(screen);
      },
    );
    return () => subscription?.remove();
  });

  return {
    ...screenData,
    isLandscape: screenData.width > screenData.height
  };
};

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const [scanMessage, setScanMessage] = useState("Looking for a face...");
  const screenData = useScreenDimensions();
  const camera = useRef();
  const [cameraReady, setCameraReady] = useState(false);
  const CameraReady = async() => {
    setCameraReady(true);
  };
  
  const active = !(
    !cameraReady
  );
  
  const faceDetect = ({ faces }) => {
    const numberOfFaces = faces.length;

    if (numberOfFaces === 0 ){
      console.log("No Face detected!");
      setScanMessage("No Face detected");
      return true;  
    }

    console.log(numberOfFaces + " Face detected all good!");
    setScanMessage("Great, found your face!");
    return true;
  };

  return (
      <SafeAreaView>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        />
        <View>
          <View
            style={{
              ...styles.container,
              flexDirection: screenData.isLandscape ? "row" : "column"
            }}
          >
            <View style={styles.statusContainer}>
              <Text
                style={{
                  ...styles.statusText
                }}
              >
                {scanMessage}
              </Text>
            </View>
            
            
            <Camera
              type={CameraType.front}
              style={{
                ...styles.camera,
                width: screenData.isLandscape
                  ? screenData.height
                  : screenData.width,
                height: screenData.isLandscape
                  ? screenData.height
                  : screenData.width

                // , marginTop: imagePadding, marginBottom: imagePadding
              }}
              ratio={"1:1"}
              ref={camera}
               => CameraReady()}
               message }) => console.log("Mounting Error: " + message)}
               message }) => console.log("Face Detection Error: " + message)}
               ? faceDetect : undefined}
              faceDetectorSettings={{
                mode: FaceDetector.FaceDetectorMode.fast,
                detectLandmarks: FaceDetector.FaceDetectorLandmarks.all,
                runClassifications: FaceDetector.FaceDetectorClassifications.all,
                minDetectionInterval: 100,
                tracking: false
              }}
            />
          </View>
        </View>
      </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFF',
    color: '#000'
  },
  statusText: {
    textAlign: "center",
    alignSelf: "center"
  },
  statusContainer: {
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column",
    flex: 1
  },
  camera: {}
});

export default App;