Intermediate React Native

4 hours, 18 minutes CC
Intermediate React Native

Course Description

Go beyond the basics of React Native. You’ll learn how to persist data across app launches, various ways of handling images and SVG, adding app icons and splash screens, animations, and gestures. By the end of this course you’ll have a great foundation for building production-ready apps for the iOS and Android app stores!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: November 2, 2021

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 17 minutes
  • Introduction
    Kadi Kraman introduces the course by providing course resources, some personal background, prerequisites for the course, and a brief introduction to the course website. Setup instructions for the course project and a brief overview of installing dependencies are also provided in this segment.
  • Build iOS App
    Kadi demonstrates running the project in Xcode, the steps necessary to start a React Native build for an iOS application, and answers student questions regarding why CocoaPods is used as the dependency manager and if native modules need to be configured separately. An overview of the project layout and a demonstration of a build error are also covered in this segment.
  • Build Android App
    Kadi demonstrates the steps necessary to start a React Native build for an Android application in Android Studio and discusses how Android dependencies are managed behind the scenes with Gradle. A walkthrough of how to configure a virtual device emulator in Android Studio is also provided in this segment.

TypeScript

Section Duration: 14 minutes

Navigation

Section Duration: 33 minutes
  • Bottom Navigation Setup
    Kadi discusses creating a bottom navigation tab for the emotion tracker app, installing the navigation library React Navigation v6, additional native code for Android applications, installing iOS dependencies, and rebuilding each application. Removing a test file and editing the tsconfig file is also covered in this segment.
  • Creating Bottom Navigation
    Kadi live codes a bottom navigation bar for both the iOS and Android applications including connecting a style sheet, creating a History, Home, and Analytics screen, and implementing the navigator in the App.tsx file with a Navigation Container. Student questions regarding why the export is const instead of default, if there is a limit to the amount of navigation items or tab bar items, and if you can stack navigation bars are also answered in this segment.
  • View & Text
    Kadi walks through creating a MoodPicker component to display a horizontal list of emojis on the Home screen using View and Text. Style sheets are created for both the Home screen and the Moodpicker component to apply appropriate stylings.
  • Pressable and useState
    Kadi demonstrates using Pressable and useState to set a selected mood to the current option. Pressable is a Core Component wrapper that can detect and explicitly style various stages of press interactions on any of its defined children.
  • Styling
    Kadi demonstrates using the previously mentioned Pressable and useState to set conditional styling for the selected mood emoji and creates the emoji container with title and a choose button. A student's question regarding if it's better to use margin or a reusable spacer component is answered and a theme file is created to hold constant stylings to help with React Native using inline styling in this segment.

JavaScript Libraries

Section Duration: 45 minutes
  • Props & useCallback
    Kadi walks through creating a new type for a mood option timestamp, using useState to store the timestamp variable, and creating a useCallback hook to handle the selection of a new mood. Implementing the Choose button, deselecting the selected state, and a student's question regarding the use of useCallback are also covered in this segment.
  • JavaScript Libraries
    Kadi discusses React Native's ability to utilize JavaScript Libraries, walks through using date-fns to format the recorded timestamps into easily readable dates, and styles the recorded mood timestamps. Not all JavaScript libraries are compatible with React Native such as libraries that rely on the browser environment and interact with the browser window or CSS.
  • React Context
    Kadi demonstrates using React's built in React Context to handle global state as an alternative to redux and allow the moodList to be accessible by any component. If the app is wrapped in a Provider, then the data within the Provider will be available to consume from anywhere in the app. Student questions regarding how to handle timezone changes and if the AppContext type is an interface are also covered in this segment.
  • Persisting Data & Async Storage
    Kadi walks through physically storing data on a device using the React Native library Async Storage to get, set, and delete items from the store. Async Storage can only store things that are serializable, this means that it cannot store functions, classes, or references.
  • Scalability Q&A
    Kadi answers a student's question regarding what are important things to consider when trying to build a scalable app.

Images

Section Duration: 44 minutes
  • Adding Local Images
    Kadi walks through adding a local image by importing the image path using require, creating a toggling thank you page, and making the images adaptive to screen size. React Native will automatically choose the correct image, from the file sizes provided, for the screen's pixel density.
  • Network Images
    Kadi demonstrates how to render an image from a URL, overlay content on top of an image using a View container, and overlay content using ImageBackground. Network images using the Image component needs to be given explicit image sizes in order to render properly.
  • Vector Icons for Nav
    Kadi walks through using the react-native-svg library to render scalable vector graphics for crisp images on any screen size without having to create multiple versions. Vector images also allow for the color of the image to be dynamically changed.
  • Navbar Icons & Screen Title
    Kadi live codes setting the vector images according to the route name for each navigation bar item, setting active and inactive colors, and removing the tab bar labels. How to set a title that is different that the route name is also covered in this segment.
  • Images & Nav Q&A
    Kadi answers student questions regarding how to enlarge or animate a tab icon on click, how to handle high resolution network images, why require code isn't used directly in the image source, and if import syntax can be used instead of require to load images. Tips on how to quickly convert and clean up svg files and other types of navigation are also covered in this segment.

Fonts

Section Duration: 23 minutes
  • Custom Fonts
    Kadi walks through how to add custom fonts, apply fonts to Text elements, and add the font to the theme.ts file. For React Native, always make sure the font files are named after the PostScript name to ensure they work on both iOS and Android.
  • Fonts Q&A
    Kadi answers student questions regarding if there are media queries to size up fonts for tablet display and how to set global styles. A brief description of useWindowDimention is also provided in this segment.

Animation & Gestures

Section Duration: 46 minutes
  • Layout Animation
    Kadi walks through using Layout Animation to animate the mood list when an item is removed, adding the delete mood button functionality, and changing the mood list to a ScrollView. Reversing the mood list so new history entries are added to the top of the list is also covered in this segment.
  • Reanimated 2 Setup
    Kadi briefly discusses React Native's Animated API, some history of Reanimated 2, demonstrates installing Reanimated 2, and Android and iOS only setup steps. A brief discussion of Reanimated 2's useAnimatedStyle, useSharedValue, and useDerivedValue hooks are also provided in this segment.
  • Reanimated 2 Animations
    Kadi walks through how to use Reanimated 2's ReanimatedPressable and withTiming to smoothly shift a green box on press. A walkthrough of showing a disabled state on the choose button is also provided in this segment.
  • Gestures
    Kadi demonstrates using Reanimated 2 together with react-native-gesture-handler to implement swipe-to-delete UI for the mood history. Wrapping the whole MoodItemRow component in a PanGestureHandler allows tracking gesture events within a designated area.

Icons

Section Duration: 22 minutes
  • iOS App Icon
    Kadi walks through adding an app icon to the iOS version of the project, provides pre generated icon size variations, and demonstrate the resulting icon change. To add an app icon to iOS the image needs to be 1024 x 1024px.
  • Android App Icon
    Kadi walks through adding an icons to the Android version of the application using Android Asset Studio, resizing the icon, and changing the icon background color. A student's question regarding if Android Studio has to be installed to set the app icon is also covered in this segment.
  • iOS Splash Screen
    Kadi walks though creating a splash screen in Xcode to show users while the application is being loaded for the iOS version of the application. Setting a custom background color, manually hiding the splash screen with
  • Seamless Transition
    Kadi demonstrates using the react-native-splash-screen library to help hide the flash of a white page between the splash screen and JavaScript finishing loading. Fixes for both versions of the applications are provided in this segment.
  • Android Splash Screen
    Kadi walks through creating a splash screen for Android by creating a splash image layout, a drawable-xxdpi folder to hold the image, and setting the background color. The look and feel of the launch screen can be previewed in Android Studio by opening the launch_screen.xml file.
  • Data Visualization Overview
    Kadi live codes an analytics page to display a pie chart of previously selected moods, converting the data into the correct format, and automatically grouping the data from a key value on an object. Passing the converted data into Victory Pie will generate the corresponding pie chart. Properties to create a matching themed chart are also provided in this segment.

Wrapping Up

Section Duration: 10 minutes
  • Wrapping Up
    Kadi wraps up the course by providing a brief overview of the material covered, suggestions to try out more animations, haptic feedback, sound, and different types of charts. Student questions regarding if React Native could be used for game development, what testing libraries and authentication strategies there are, if onclick actions can be added to SVG tags, and if there are any deployment tools are discussed in this segment. If Kadi has used any webviews or linking for payments and if the path for upgrading React Native with new versions of Android and iOS is improving are also covered in this segment.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now