title: How to implement MediaPipe pose library in React Native Expo
body: <p>I am working on a module where I have to integrate pose detection in our mobile application. The mobile application is developed using the react native framework and the project is expo managed. We are working with the <strong>@mediapipe/pose</strong> (MediaPipe pose) library. The library was installed through the npm.
  Here is the code of the App.js file</p>
  <pre><code>import React, { useState, useEffect, useRef } from 'react'
  import { StyleSheet, Text, View, useWindowDimensions, StatusBar } from 'react-native'
  import { Camera } from 'expo-camera'
  import Canvas from 'react-native-canvas'
  import { drawConnectors, drawLandmarks } from '@mediapipe/drawing_utils'
  import { Pose } from '@mediapipe/pose'
  
  export default function App() {
  
    const [ permission, setPermission ] = useState(null)
  
    const cameraRef = useRef(null)
  
    const canvasRef = useRef(null)
  
    var camera = null
  
    const { width, height } = useWindowDimensions()
  
    useEffect(() =&gt; {
  
      (async () =&gt; {
        
        const { status } = await Camera.requestCameraPermissionsAsync()
        setPermission(status === 'granted')
  
      })()
  
    }, [])
  
    useEffect(() =&gt; {
  
      const pose = new Pose({
          locateFile: (file) =&gt; {
            return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;
          }
      })
      
      // pose.setOptions({
      //   modelComplexity: 1,
      //   smoothLandmarks: true,
      //   enableSegmentation: true,
      //   smoothSegmentation: true,
      //   minDetectionConfidence: 0.5,
      //   minTrackingConfidence: 0.5
      // })
  
      // const canvas = canvasRef.current
      // const context = canvas.getContext('2d')
      // context.fillStyle = 'red'
      // context.fillRect(100, 100, canvasRef.current.width, canvasRef.current.height)
  
    }, [])
  
    if(permission === null)
    {
      return &lt;View/&gt;
    }
  
    if(permission === false)
    {
      return &lt;View style = {{ justifyContent: 'center' }}&gt;
  
        &lt;Text style = {{ alignSelf: 'center' }}&gt;Permission not granted&lt;/Text&gt;
  
      &lt;/View&gt;
    }
  
    return (
      &lt;View style={styles.container}&gt;
        
        &lt;Camera style = {{ width, height, marginRight: 'auto', marginLeft: 'auto', left: 0, right: 0, zIndex: 9 }} ref = { cameraRef } ratio = '16:9' type = { Camera.Constants.Type.front }/&gt;
  
        &lt;Canvas style = {{ position: 'absolute', width, height, elevation: 1 }} ref = { canvasRef }&gt;
  
  
  
        &lt;/Canvas&gt;
  
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
    },
  });
  </code></pre>
  <p>Importing the libraries does not give any error, but calling the Pose constructor gives an error.
  Error</p>
  <pre><code>TypeError: undefined is not a constructor (evaluating 'new _pose.Pose')
  
  This error is located at:
      in App (created by ExpoRoot)
      in ExpoRoot
      in RCTView (created by View)
      in View (created by AppContainer)
      in RCTView (created by View)
      in View (created by AppContainer)
      in AppContainer
  at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
  at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
  at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
  at node_modules/react-native/Libraries/ReactNative/renderApplication.js:58:4 in renderApplication
  at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
  at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:202:4 in runApplication
  </code></pre>
  <p>Here is the link to the github project   [1]: <a href="https://github.com/HimanshuChahal/MediaPipe-Pose/tree/master" rel="nofollow noreferrer">https://github.com/HimanshuChahal/MediaPipe-Pose/tree/master</a></p>
  <p>Any help would be appreciated.
  Thanks.</p>