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 email@example.com
Once it’s finished installing, go right ahead and create your new project
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
Once this installed, we can now use the build in scaffolding
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:
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
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