Tfjs: [tfjs-react-native] and managed Expo workflows

[robsco-git]

With, @tensorflow/[email protected], tfjs-react-native is using react-native-fs for the bundleResourceIO function. To the best of my knowledge, managed Expo workflows do not work with react-native-fs, instead, the recommended path is to use expo-file-system. Attempting to run a managed Expo app results in this error at runtime: TypeError: null is not an object (evaluating 'RNFSManager.RNFSFileTypeRegular').

To work around this, I forked the repo, and changed the bundle loading code into a stub. I published this code to NPM, installed it and ran it successfully in the context of a managed Expo workflow. I managed to get the example realtime demo working.

Based on the README, it appears that managed Expo workflows are within the set of project types supported by tfjs-react-native, hence this issue.

[tafsiri]

Yep will be looking into an alternative that will work with the managed workflow. Thanks for reporting.

[jgough99]

@robsco-git I am having exactly the same issue so I am excited to see you have published a work around. However I am struggling to get tfjs-react-native-expo-fix to work with my project since I am getting many errors. Could you give some advice on how to use this fix please? Does it need to be imported? Do you still need to install the non-fixed tensoflow? Many thanks.

[MichaelMcNeil]

@jgough99 same. @robsco-git what's the workflow to run with your fix rn?

[tafsiri]

This was autoclosed by a PR, but the release including it should come out shortly.

[MichaelMcNeil]

@tafsiri thank you! I was a little mixed up after re-testing when I saw this closed. Looking forward to it!

[tafsiri]

0.2.2 is out on NPM https://www.npmjs.com/package/@tensorflow/tfjs-react-native @robsco-git @jgough99 @MichaelMcNeil, give it a whirl and let me know if it doesn't solve the issue.

[robsco-git]

@tafsiri I've just had a chance to try it out and it appears to be working well on both Android and iOS in our managed Expo workflow! Thanks a million.

One thing I did have to do was to add a null check for imageTensor as (at least in our component) imageTensor appears to be requested after the component has unmounted (when navigating away) with results in an [Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'input.height')]. Here is what the code looks like for reference:

const handleCameraStream = async images => {
  const loop = async () => {
    const imageTensor = images.next().value;
    if (imageTensor) {
      const pose = await posenetModel.estimateSinglePose(imageTensor, {
        flipHorizontal,
      });
      setPose(pose);
      tf.dispose([imageTensor]);
    }
    requestAnimationFrame(loop);
  };
  loop();
};

I moved the platform check for flipHorizonal out of the inner loop and we are using a function component.

[tafsiri]

Yes, once the component is unmounted the generator will be exhausted and this is expected behaviour. Another way to not have the null check is to cancel the requestAnimationFrame of this parent component. This is how i handled it in the updated demo https://github.com/tensorflow/tfjs/blob/master/tfjs-react-native/integration_rn59/components/webcam/realtime_demo.tsx#L126