Setup Tensorflow.js to React Native Expo project

expo init myLittleProject
cd myLittleProject

npm install @tensorflow/tfjs
npm install --save react-native-fs
npm install --save @react-native-community/async-storage

To test that everything is working replace App.js code temporary with this:

import React from 'react'
import { Text, View } from 'react-native'
import * as tf from '@tensorflow/tfjs'

class App extends React.Component {
  state = {
    isTfReady: false
  }

  async componentDidMount() {
    await tf.ready()
    this.setState({ isTfReady: true })
    console.log(this.state.isTfReady)
  }

  render() {
    return (
      <View style={{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
      }}>
        <Text>
      {this.state.isTfReady ? "Ready" : "Waiting"}
    </Text>
      </View>
    )
  }
}

export default App

https://github.com/tensorflow/tfjs/tree/master/tfjs-react-native

Using Own Model

Create metro.config.js to root folder and add following content there (you might need to add some assetExts or something else but first check errors):

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    assetExts: ['bin', 'txt', 'jpg', 'ttf', 'png'],
    sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx'],
    blacklistRE: blacklist([/platform_node/])
  },
};

Model is trained somewhere else and it's saved using tf.save('file://model') It creates a directory with model.json and weights.bin inside it.

Then this model can be used in React Native (Expo) project following way:

import React from 'react'
import { Text, View } from 'react-native'
import * as tf from '@tensorflow/tfjs'
import { bundleResourceIO } from '@tensorflow/tfjs-react-native'

class App extends React.Component {
   state = {
     isTfReady: false,
     model: false,
   }

   async componentDidMount() {
     await tf.ready()
     this.setState({ isTfReady: true })

     const modelJSON = require('./assets/model/model.json');
     const modelWeights = require('./assets/model/weights.bin');
     const model = await tf.loadLayersModel(bundleResourceIO(modelJSON, modelWeights));
     model.summary();
     this.setState({ model })
   }

   render() {
     return (
       <View style={{
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center'
       }}>
         <Text>
           TF: {this.state.isTfReady ? "Ready" : "Waiting"}
         </Text>
         <Text>
           MODEL: {this.state.model ? "Ready" : "Waiting"}
         </Text>
       </View>
     )
   }
}

export default App

Blog

Setup Tensorflow.js to React Native Expo project

Lankinen

Using Own Model

Join Our Newsletter. No Spam, Only the good stuff.

Related