Face Detection using React Native & Expo

Hi friends,

I am explaining about face detection from scratch using react native and expo.
First Create a new project named as FaceDetection.

create-react-native-app FaceDetection

Import the below classes from the expo

import { FaceDetector,Camera,Permissions,Constants } from ‘expo’;
Then, Ask for the camera permission
async componentWillMount() {

   const { status } =await Permissions.askAsync(Permissions.CAMERA);



Then, Open Camera and detect the face using the front camera. If face detected ‘handleFacesDetected’ function will be triggered.

return (

        <View style={styles.container}>






               mode: FaceDetector.Constants.Mode.fast,

               detectLandmarks: FaceDetector.Constants.Mode.none,

               runClassifications: FaceDetector.Constants.Mode.none,




handleFacesDetected = ({ faces }) => {


      this.setState({ faces });



Face detected you want to see the dimensions set the below code.

  <View style={styles.topBar}>
    <Text style={styles.textcolor}>x: {this.state.faces.length?this.state.faces[0].bounds.origin.x.toFixed(0) :0}</Text>
    <Text style={styles.textcolor}>y: {this.state.faces.length?this.state.faces[0].bounds.origin.y.toFixed(0) :0}</Text>

  <View style={styles.bottomBar}>
    <Text style={styles.textcolor}>Heigth: {this.state.faces.length?this.state.faces[0].bounds.size.height.toFixed(0) :0}</Text>
    <Text style={styles.textcolor}>width: {this.state.faces.length?this.state.faces[0].bounds.size.width.toFixed(0) :0}</Text>

But, If you want to mark your face in the camera you should write some styles.

renderFace({ bounds, faceID, rollAngle, yawAngle }) {

return (




{ perspective: 600 },

{ rotateZ: `${rollAngle.toFixed(0)}deg` },

{ rotateY: `${yawAngle.toFixed(0)}deg` },










<Text style={styles.faceText}>rollAngle: {rollAngle.toFixed(0)}</Text>

<Text style={styles.faceText}>yawAngle: {yawAngle.toFixed(0)}</Text>




renderFaces = () => 

    <View style={styles.facesContainer} pointerEvents="none">



Add the below line after camera Tag.

{ this.state.faces.length ? this.renderFaces() : undefined}

Finally write Style as below.

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#000',


  camera: {

    flex: 1,

    justifyContent: 'space-between',


  topBar: {

    flex: 0.2,

    backgroundColor: 'transparent',

    flexDirection: 'row',

    justifyContent: 'space-around',

    paddingTop: Constants.statusBarHeight+1,


  bottomBar: {

    flex: 0.2,

    backgroundColor: 'transparent',

    flexDirection: 'row',

    justifyContent: 'space-around',


  face: {

    padding: 10,

    borderWidth: 1,

    borderRadius: 1,

    position: 'absolute',

    borderColor: '#808000',

    justifyContent: 'center',

    backgroundColor: 'transparent',


  faceText: {

    color: '#32CD32',

    fontWeight: 'bold',

    textAlign: 'center',

    margin: 10,

    backgroundColor: 'transparent',


  facesContainer: {

    position: 'absolute',

    bottom: 0,

    right: 0,

    left: 0,

    top: 0,



    color: '#008080',



Git: Click Here

Expo Demo: Click Here

face detection

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: