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!

Image for post
Image for post

Let’s get started!

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

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

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

Image for post
Image for post

A Blank Canvas

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

Image for post
Image for post

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

Image for post
Image for post

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)

Image for post
Image for post

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

Image for post
Image for post
Xcode -> Open Developer Tool -> Simulator
Image for post
Image for post

Now we can run npm start to start the Metro Bundler

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post
Success!

To open the developer tools just hit cmd + d

Image for post
Image for post

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