Getting started in React Native

What is React Native? React Native is a Javascript framework for building native mobile apps using React. Why React Native? Imagine being able to create an app for both iOS and Android using one code base! Have you ever used mobile versions of Facebook? Instagram? AirBnB? These apps are written using React Native!

Let’s get started!

An easy way to get started coding in React Native is using expo-cli. To install it, we run:

npm install -g expo-cli

After it’s installed we can start a new project by typing

expo init NameOfProject

For this tutorial, I will be using the blank managed workflow template

A Blank Canvas

Lets take a look at what we have now that we initialized a new project.

Our file structure looks very similar to a React project. Let’s look inside the App.js file

Take a look at line 3. We imported StyleSheet, Text, and View.

We can think of View the same way we think of html Div tags. Text is where we want to display text. StyleSheet is where we style the component.

View style={styles.container}. We are creating an object with different attributes to style the component. It looks very similar to CSS but please note this isn’t CSS.

Great. But what does it look like?

For this guide, we’ll be simulating an iOS app on Mac. To do this we’ll install Xcode from the app store. (It will take a while to install. Go get some coffee)

After you have it installed. Open it and navigate to simulator

Xcode -> Open Developer Tool -> Simulator

Now we can run npm start to start the Metro Bundler

If we click “Run on iOS simulator” it will install expo client on the simulator and run the app.


To open the developer tools just hit cmd + d

Fullstack Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store