TIL Testing React Native in the DOM

As I’ve been learning React Native, I’ve started to get frustrated having to continually wait for rebuilds on my phone and in general having to switch between screens. Now don’t get me wrong testing on a phone while building a mobile app is super critical as it shows you exactly how something will look in a users hands. That being said any mobile dev can attest to how frustrating testing incremental builds can be. So in case you’re looking for a super easy way to test in the browser I present you React Native Dom.

First let’s start off by creating a new project using create-react-native-app. For anyone who’s new to React Native development but has used React before, this should look super familiar. In React, we use create-react-app to create React applications that come with some awesome default settings to get you developing quickly. create-react-native-app is no different.

Let’s go ahead and install it first.

yarn global add create-react-native-app@1.0.0

Once it’s finished installing, go right ahead and create your new project

create-react-native-app food-tracker

Once your app is finished being created, go ahead and run yarn start You should be presented with the following screen with instructions on how to connect to your phone

Before we can install react-native-dom we need to also have the react-native command line tool. This tool is also used to generate react applications but it isn’t as beginner friendly as create-react-native-app However, we do still need this tool to be React Native developers so let’s go ahead and install it.

yarn global add react-native-cli

Once it’s installed we can now add react-native-dom to our project.

yarn add react-native-dom -D

This will add react-native-dom to your dev dependencies hence the -D

Once this installed, we can now use the build in scaffolding

react-native dom

This command will add some a dom folder to your project and several new files. Your file structure should now look like this:

In your terminal, run the following command:

react-native run-dom
Somethings not quite right

Uh oh! Something went wrong!

This is a pretty easy fix. If you look closely at the error in the new terminal window that was opened, you will notice that an index.js file is missing.

When you install using the react-native tool an index.js file is created for you that doesn’t get created with create-react-native-app. In your project folder, create a file called index.js with the following code.

Note: On line 3 the string 'food-tracker' must match the name of the app you created in the beginning. If you’re working off of an existing project, it will be the name of the project folder.

If you still have Metro running, you will need to close the window that looks like this:

Once, you have done this go ahead and re run react-native run-dom

And there we have it — React Native in the browser.

I highly recommend checking out https://rntester.now.sh/ as it contains a demo of React Native Dom with the build in components included with React Native. Using this side by side with the React Native Docs is super helpful