📱Expo React Native example

How to use PoseTracker in a react native application ?

Base on the schema on How does it work ? You need to call our URL https://app.posetracker.com/pose_tracker/tracking through a WebView.

Base on this here is a tutorial to use PoseTracker in a Mobile App :

Start a new Expo project

npx create-expo-app my-app
cd my-app
yarn install

Install dependencies for the webview

npx expo install expo-camera react-native-webview

Start and run the project on your Phone or a Simulator

For this part we recommend to use your phone with Expo Go App as described in Expo Documentation. Because we will need to access a camera with a human to track.

yarn start

// Then open the app on Expo GO

Integrate PoseTracker

Define your App.js and set your API_KEY :

How does it works ?

  • First we have the WebView :

<WebView
        javaScriptEnabled={true}
        domStorageEnabled={true}
        allowsInlineMediaPlayback={true}
        mediaPlaybackRequiresUserAction={false}
        style={{
          width: width,
          height: height,
          zIndex: 1
        }}
        source={{ uri: posetracker_url }}
        originWhitelist={['*']}
        injectedJavaScript={jsBridge}
        onMessage={(event) => {
          const info = JSON.parse(event.nativeEvent.data)
          webViewCallback(info)
        }}
      />

That use posetracker_url who's build with PoseTracker params.

🟧 Important point : Data exchange between PoseTracker and your Application 🟧

We use what you are sending throw injectedJavaScript to send back data to our App. So we create a bridge between PoseTracker API frontend and YOUR actual App with :

injectedJavaScript={jsBridge}

// This is a basic js bridge
// We need a bridge to transit data between the ReactNative app and our WebView
// The WebView will use this function define here to send info that we will use later
const jsBridge = `
 (function() {
   window.webViewCallback = function(info) {
     window.ReactNativeWebView.postMessage(JSON.stringify(info));
   }
 })();
`

Then we use your bridge to send you some information, and here we handle it with:

onMessage={(event) => {
  const info = JSON.parse(event.nativeEvent.data)
  webViewCallback(info)
}}
        
const handleCounter = (count) => {
  setRepsCounter(count)
}

const handleInfos = (infos) => {
  setCurrentPoseTrackerInfos(infos)
}

//This is the function pass to the WebView to listen info from the WebView
const webViewCallback = (info) => {
  switch (info.type) {
    case 'counter':
      return handleCounter(info.current_count)
    default:
      return handleInfos(info)
  }
}

You can find all the informations returned by PoseTracker here.

Result

You can find source files here

Last updated