Please provide the following:
- SDK Version: 37
- Platforms(Android/iOS/web/all): all
Hello, I’m new to React Native and still learning React and JavaScript.
I’m practicing on Expo snack with FaceDetector API and managed to generate data about faces. However, I don’t know how to extract these data. My goal for now is to render the rollAngle data in a Text component.
Here is the code I use and tested with my cellphone:
import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import { Camera } from 'expo-camera';
import * as FaceDetector from 'expo-face-detector'
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [faces, setFaces] = useState([])
const faceDetected = ({faces}) => {
setFaces({faces})
console.log({faces})
}
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission !== true) {
return <Text>No access to camera</Text>
}
return (
//<View style={{ flex: 1 }}>
<Camera
style={{ flex: 1 }}
type='front'
onFacesDetected = {faceDetected}
FaceDetectorSettings = {{
mode: FaceDetector.Constants.Mode.fast,
detectLandmarks: FaceDetector.Constants.Landmarks.all,
runClassifications: FaceDetector.Constants.Classifications.none,
minDetectionInterval: 5000,
tracking: false
}}
>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<Text style= {{top:200}}> is {faces[0].rollAngle} </Text>
</View>
</Camera>
//</View>
);
}
In the snack console, I see results like this:
I also tried to replace faceDetected with the following code:
const faceDetected = (faces) => {
setFaces(faces)
console.log(faces)
}
console results look like this:
Either way, when I tried to render rollAngle, an error message showed up and said faces[0].rollAngle is undefined and is not an object.
Any suggestion is appreciated.
Thank you