5 Things to Help React Native Beginners
By: Samantha Lurio
Tags: Software Development, Bootcamp, Beginner, Coding, React Native

1. React Native CLI vs Expo CLI

When setting up your mobile app there are two ways to get your app up and running, Expo CLI and React Native CLI. See React Native docs for setting up the development environment page.

Expo CLI is more beginner-friendly and only takes minutes to get your app up and running. However, React Native CLI is better for experienced mobile developers and has more options to customize native features as opposed to Expo CLI. Here is a great video outlining the advantages and disadvantages of both!

2. Core Components

Since there is no DOM on mobile we do not use any HTML elements like <div> tags for example. Instead, React Native uses built-in components. The basic ones to know off the bat are…

<View> pretty much acts as a <div>

<Text> equivalent to a <p> . It can display text.

<Image> like a <img>

<TextInput> similar to <input type = "text"> , this lets the user enter text

<ScrollView> like the view tag but is scrollable

Here is the full list of Native components. Don’t worry if these seem foreign, once you start using them they will seem like second nature!

3. Screens/ Navigating Between them

Mobile apps are made up of screens. React Navigation is the official library that allows navigation across screens. The library contains three types of navigators

StackNavigator - Used to transition between screens where each new screen is placed on top of a stack

Stack Navigation

TabNavigator (most common) - Tabs on the bottom of the screen or on the top below the header

Tab Navigation

DrawerNavigator - Panel of options on the left edge of the screen that is usually hidden until the user swipes to the right

Drawer Navigation

4. Styling

React Native does not use CSS, instead, you use Javascript to style your application. All core components accept a prop named style . The style names and values usually match how CSS works except the names are written in camel case ( ex. backgroundColor ).

It is best practice to use StyleSheet.create to define several styles as in the below code.

I personally find styled-components cleaner and easier to use. Styled-components is a CSS-in-JS library where you write CSS per component. Follow below for a short example.

Something also important to note about styling in React Native is Flexbox . FlexDirection defaults to column instead of row. Flex is a little bit more tricky.

Flex defines how your items will be filled in the space available. Space is divided based on each item’s flex property and only supports a single number. Read the official documentation here to get a better sense.

5. Helpful Resources

Lastly, I would not have been able to do half the things I did on my app if it was not for the resource below! I hope these help you as much as they did me.

React Native Docs - This is an obvious one, but I cannot stress enough to read the docs first 🤓

- This is an obvious one, but I cannot stress enough to read the docs first 🤓 Expo CLI Docs - I used Expo to run my app and am thankful I did! Their documentations are easy to follow and great for beginners. I also used Expo-Camera which was straight-forward to install and use. This article also helped me with setting up my camera.

- I used Expo to run my app and am thankful I did! Their documentations are easy to follow and great for beginners. I also used Expo-Camera which was straight-forward to install and use. This article also helped me with setting up my camera. React Native Beginner Tutorial - A Youtube tutorial by Mosh that I highly recommend. It is a great first look on React Native that was shared by my cohort friend Matt Ericksen. It was the first thing I did after reading the documentation.

- A Youtube tutorial by Mosh that I highly recommend. It is a great first look on React Native that was shared by my cohort friend Matt Ericksen. It was the first thing I did after reading the documentation. Running Your App on a Device with Local Backend - This is more specific but this one threw me for a loop and took me some time to figure out. This article gives a great step by step way to run your app on your mobile device.

- This is more specific but this one threw me for a loop and took me some time to figure out. This article gives a great step by step way to run your app on your mobile device. Form Template - Forms are a little different compared to React due to React Native’s built-in components. This is a great template for a sign-in form or any form you want to make!

I hope this article helped clear any hesitation for anyone thinking about learning React Native. If you are interested here is my code from my capstone project. Please reach out to me if you want to discuss more, I am still learning and always am looking to bounce my thoughts/ideas off of someone!