Creating a multi-platform application is even easier with React Native Web, which lets us build and deploy to the web and mobile platforms alike.
Over the years, building web applications that are mobile friendly has become easier with the advent of media queries and the introduction of service workers. Using media queries, we could make web applications become different shapes when viewed on mobile devices. Service workers, with their powerful features, present web applications with powers only native applications have been known to possess — push notifications, background sync, etc.
We’ll be building a simple application that displays user information from a random API using React Native components like ScrollView, Text and Image.
To follow this tutorial, you’ll need to have Node> 6.0 installed. You’ll also need a package manager NPM (this comes packaged with Node) or Yarn (follow the installation guide here).
To bootstrap your application using Create React App, run the following command:
Run the following command to install the project’s development dependencies:
The babel-plugin-module-resolver is a plugin that resolves your project modules when compiling with Babel. We’ll use this package to alias react-native to react-native-web when setting up the project config.
To build and run our application, we’ll be using Expo. Expo is an open-source toolchain built around React Native for building Android and iOS applications. It provides access to the system’s functionality like the Camera, Storage, etc.
Install the expo-cli by running the following command:
The next step is to install expo locally, alongside React Native and React Native Web. Run the command below to install the packages:
After downloading the packages needed to run and build the application, the next step is to setup the configuration files. Create a file called in the root of your project and update it with the following:
Create a file named . This file is used to configure parts of your application that don’t belong in the code like the application , , , etc. You can find the options available for the file here.
Let’s update the file to include commands for running our application on Android and iOS emulators. Also, we’ll include the field referencing the file. This file will act as the entry file for the expo-cli. Open the file in a file editor of choice:
Run to run the application and visit http://localhost:3000 to view the application.
Our application is a simple demo that displays users via the random user API. Using the API, we’ll get display a name and avatar of the returned users through some of the components provided by React Native. Within the directory, create a file named . Open this file using an editor and update it with the snippet below:
In the snippet above, the component renders a component that houses the component’s elements. Currently, the component displays an ; this will be replaced by the user list when the call to the API is complete.
We create styles for the elements using the StyleSheet component. This allows us to style the component using properties similar to CSS properties.
Let’s create a method that gets random users from the Random User API. This method will be called during the lifecycle. Update the component to include the method:
We can easily make requests using the native Fetch API. Results from the request are parsed and added to state. When the request is complete, we’ll hide the by setting to false.
The holds the logic for the application. We’ll update the default view created by Create React App to suit that of our application by adding logic to display native components.
Create a new file named in the root of your project. This file will be similar to the file. The root file will act as the entry file for expo, and the file exists for Create React App builds. Update both files with the snippet below:
In the snippet above, we register our App component using the AppRegistry. The AppRegistry is the entry point of React Native applications.
Creating User Item
Each user item will be displayed using a component. The View component is an important building block that supports layout using flexbox, styling and accessibility. The View component of each item will be within a SwipeableFlatList. Each item will display the user’s avatar, name and email. Create a file called within the folder and update it with the code below:
To display the avatar of each user, we make use of the Image component. The component takes a prop which acts the which we are used to on the web. The component can be styled further as we have using property.
Next, we’ll create the to display each .
Creating Users List
The FlatList component is one that is performant in its list rendering methods. It lazy-loads the items within the list, and only loads more items when the user has scrolled to the bottom of the list. The SwipeableFlatList is a wrapper around the FlatList provided by React Native Web, which makes each item within the list swipeable — so each item will reveals a set of actions when swiped.
Let’s create the for the users returned from the API. Import the component from the package and update the render function to display the list. Create a file called and update the file with the following:
- : this prop represents the data that will be fed to each item within the list. The prop is usually an array.
- : if true, it triggers on a bounce animation on the first item in the list, signifying that it has hidden actions within.
- : this prop sets a maximum swipeable distance for each item.
- Finally, the prop takes a function that renders an item; this function will be passed an prop that contains the data to be displayed.
Let’s update the file to include the new . Open the file and update it with the following:
Now if you visit http://localhost:3000 on your browser, you should see a list of users, similar to the screenshot below:
If you can’t see users listed, go through the tutorial again to see what you’ve have missed along the way.
We’re using a SwipeableFlatList component which means each user item is swipeable, so let’s add actions that you can swipe to reveal. What’s the need of a SwipeableFlatList if it doesn’t reveal anything.
Adding Actions to Item
Each item within the list will be provided a set of actions that will be revealed when swiped to the left. The actions set will use the TouchableHighlight component encompassed by the View component. The TouchableHighlight component is used when we require viewers to respond to touches, more or less acting like a button. Create a file named in the folder. Open the file and copy the following contents into it:
The TouchableHighlight component takes an callback that is triggered when the component is clicked. Each callback triggers an display. Styles are also applied to the encompassing View component and other components on the page.
To include the actions on each user item, update the component to include the prop, which also takes a function.
Now when you swipe left on any user item it reveals two actions. It should be similar to the screenshot below:
Now that we’ve successfully fetched users and displayed them using native components, let’s liven the application by setting a header. Using the SafeAreaView component, we’ll create an area with defined boundaries. This will act as the header for our application. Create file called and update it with the code below:
Now let’s add the component to the component. This will display a simple header at the top of the application. Update the file to include the component:
After the application refreshes the header will be added to the top of the application.
Looks great, doesn’t it? It won’t be winning any awards, but it might win a lot of prospective react-native-web users. We’ve been able to achieve a lot of functionality after writing minimal code.
Let’s see the various methods we can use to test the application on mobile.
Testing on Mobile
To test the application on mobile, the expo-cli provides various method to test the application mobile. The first is using a URL generated after running the application. This URL can be visited on your mobile browser to test the application.
Run the command within your project folder to run the application using expo. Expo typically starts your application on port , so visit http://localhost:19002 to view the expo dev tools. Within the dev tools you can send a link as an SMS or email to your mobile phone.
You can select any of the three connection options — an external tunnel, LAN or Local connection. For the local connection, your mobile phone and work PC have to be connected to the same network, but the tunnel works regardless.
The next option for testing on a mobile device is using a emulator. Using Android studio or Xcode, you can boot emulators for their respective platforms. Download and install the tool for the platform of choice — Xcode for iOS or Android studio for Android. After installation, run or to start the application on any of the emulators.
Deploying the Application
We’ll be deploying our application to the Android Play store. To achieve this, we’ll need to update the to include Android specific properties. Open the file and update the file to include the field:
The field is a unique value that will represent your package in the app store. You can read more on the package-naming convention here. After updating the file, run the command.
This command will present you with a prompt, asking you to provide a keystore or to generate a new one. If you have an existing keystore, you can select this option or let expo generate one for your application.
After completion, a download link will be generated for your application. Clicking on this link will trigger a download for your APK.
To deploy the downloaded APK to the Android Play Store, visit the Play Console to create an account. After creating an account, you’ll be required to pay a registration fee of $25 before proceeding. After completing the registration process, visit this page and follow the steps to upload your application to the Play Store.