5 Things to Help React Native Beginners
As a recent grad from Flatiron’s software engineering Bootcamp I thought it would be no better time to reflect on my capstone project. I remember being in Mod1 and seeing the Mod5 projects and being totally blown away thinking how will I ever be able to do that?! Fast forward 3 short months later, it was my turn to create my very first solo project.
I wanted to bring my past experience as a fashion designer to my new world of coding. I created an app called The Thread. It gives users the capability to scan their clothing tag to receive information about what they wear (like where the item comes from, fiber content, and care instructions). I wanted the user to be able to take photos so I needed to make a mobile app. I was just coming from Mod4 and just learned React so it was a big leap to learn React Native. I pretty much learned as I went and spent the weekend before my capstone project reading the React Native documentation. (which is very clear and easy to understand, so I highly recommend taking the time to read through it 😊 ).
I ended up building my own project using React Native, Expo CLI, Redux, Hooks, styled-components, and Ruby on Rails. In this article, I’m going to focus on React Native to provide somethings you should know before starting your first mobile app. I hope you enjoy!
*Disclaimer this is written in mind that you already know React*
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
TabNavigator(most common) - Tabs on the bottom of the screen or on the top below the header
DrawerNavigator- Panel of options on the left edge of the screen that is usually hidden until the user swipes to the right
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 🤓
- 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.
- 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.
- 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.
- 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!
