With the advancement of cross-platform Web and mobile development languages, libraries, and tools such as React , React Native , and Expo , the mobile app finds more and more applications in machine learning and other domains. The releases of TensorFlow.js for React Native  and TensorFlow Lite  allow us to train new machine learning and deep learning models or use pre-trained models for prediction and other machine learning purposes directly on cross-platform mobile devices.
Recently I published two articles  to demonstrate how to use Expo , React , and React Native  to develop multi-page mobile applications. In each article, I show how I leveraged TensorFlow.js for React Native  and pre-trained convolutional neural network models MobileNet and COCO-SSD for image classification and object detection on mobile devices.
In this article, similarly to , I develop a multi-page mobile application to demonstrate how to use TensorFlow.js  and a pre-trained deep natural language processing model MobileBERT , for reading comprehension on mobile devices.
Similarly to , this mobile application is developed on Mac as follows:
using Expo to generate a multi-page application template
Before beginning, you should have the latest node.js installed on your local computer/laptop, such as Mac.
1. Generating Project Template
To use Expo CLI to generate a new project template automatically, first, you need to install Expo CLI:
npm install expo-cli
Then a new Expo project template can be generated as follows:
expo init qna
The project name is qna (i.e., question and answer) in this article.
As described in , I choose the tabs template of Expo managed workflow to generate several example screens and navigation tabs automatically. The TensorFlow logo image file tfjs.jpg is used in this project, and it needs to be stored in the generated ./asserts/images directory.
2. Installing Libraries
The following libraries need to be installed for developing the reading comprehension mobile app:
expo-gl, provides a View that acts as an OpenGL ES render target, useful for rendering 2D and 3D graphics.
@tensorflow-models/qna, pre-trained natural language processing model MobileBERT  that can take a question and a related passage as input and returns an array of most likely answers to the question, their confidences, and locations of the answers in the passage (start and end indices of answers in the passage).
3. Developing Reading Comprehension Mobile Application Code
As described before, first, I used Expo CLI to generate example screens and navigation tabs automatically. Then I modified the generated screens and added a new Qna (question and answer) screen for reading comprehension. The following are the resulting screens:
Introduction screen (see Figure 2)
Reading comprehension (Qna) screen (see Figures 3)
References screen (see Figure 4)
There are three corresponding tabs at the bottom of the screen for navigation purposes. This article focuses on the Qna screen class (see  for source code) for natural language reading comprehension. The rest of this section discusses the implementation details.
3.1 Preparing TensorFlow and MobileBERT Model
The lifecycle method componentDidMount() is used to initialize TensorFlow.js, and load the pre-trained MobileBERT  model after the user interface of the Qna screen is ready.
Once the TensorFlow library and the MobileBERT model are ready, the mobile app user can type in a passage and a related question.
For convenience, the passage and question in  are reused as the default in this article for demonstration purposes.
Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. It is considered one of the Big Four technology companies, alongside Amazon, Apple, and Facebook. Google was founded in September 1998 by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University in California. Together they own about 14 percent of its shares and control 56 percent of the stockholder voting power through supervoting stock. They incorporated Google as a California privately held company on September 4, 1998, in California. Google was then reincorporated in Delaware on October 22, 2002. An initial public offering (IPO) took place on August 19, 2004, and Google moved to its headquarters in Mountain View, California, nicknamed the Googleplex. In August 2015, Google announced plans to reorganize its various interests as a conglomerate called Alphabet Inc. Google is Alphabet's leading subsidiary and will continue to be the umbrella company for Alphabet's Internet interests. Sundar Pichai was appointed CEO of Google, replacing Larry Page who became the CEO of Alphabet."
Who is the CEO of Google?
3.3 Finding Answers to Question
Once a passage and a question have been provided on a mobile device, the user can click the “Find Answer” button to call the method findAnswers() for finding possible answers to the given question on the passage.
In this method, the prepared MobileBERT model is called to take the provided passage and question as input and generate a list of possible answers to the question with their probabilities and locations (starting and ending indices of answers in the passage).
The mobile application in this article consists of a react native application server and one or more mobile clients. A mobile client can be an iOS simulator, Android emulator, iOS devices (e.g., iPhone and iPad), Android devices, or any other compatible simulator. I verified the mobile application server on Mac and mobile clients on both iPhone 6+ and iPad.
4.1 Starting React Native Application Server
As described in , the mobile app server needs to start before any mobile client can begin to run. Use the following commands to compile and run the react native application server:
If everything goes through smoothly, a Web interface, as shown in Figure 1, should show up.
Figure 1: Reactive application server.
4.2 Starting Mobile Clients
Once the mobile app server is running, we can start mobile clients on mobile devices.
Since I use Expo  for development in this article, the corresponding Expo client app is needed on mobile devices. The Expo client app for iOS mobile devices is available for free in Apple Store.
Once the Expo client app has been installed on an iOS device, we can use the camera on the mobile device to scan the bar code of the react native application server (see Figure 1) to use the Expo client app to run the mobile application.
Figure 2 shows the introduction screen of the mobile application on iOS devices (iPhone and iPad).
Figure 2: Introduction screen on iOS devices.
Figure 3 shows the screen of reading comprehension (passage, question, “Find Answer” button, and answers).
Figure 3: Qna screen on iOS devices.
The following are the output of the findAnswers() method call:
"text": "replacing Larry Page",
"text": "Pichai was appointed CEO of Google, replacing Larry Page",
"text": "Larry Page",
Figure 4 shows the screen of references.
Figure 4: References screen on iOS devices.
Similarly to , in this article, I developed a multi-page mobile application for reading comprehension (question and answer) on mobile devices using Expo , React JSX, React Native , TensorFlow.js for React Native , and a pre-trained deep natural language processing model MobileBERT .
I verified the mobile application server on Mac and the mobile application clients on iOS mobile devices (both iPhone and iPad).
As demonstrated in  and this article, such a mobile app can potentially be used as a template for developing other machine learning and deep learning mobile apps.
The mobile application project files for this article are available on Github .
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
3rd Party Cookies
This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.
Keeping this cookie enabled helps us to improve our website.
Please enable Strictly Necessary Cookies first so that we can save your preferences!