Kadi Kraman
Expo
Intermediate React Native
4 hours, 18 minutes CC
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
CloseCourse Details
Published: November 2, 2021
Topics
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
Table of Contents
Introduction
Section Duration: 17 minutes
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.
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.
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
Kadi provides a brief overview of TypeScript including what TypeScript is, static code analysis, custom types, and checking type errors. TypeScript is not required for React Native, plain JavaScript will work, but is recommended for the added type checking.
Kadi walks through a quick introduction to the TypeScript code needed to complete this workshop including the tsconfig file, declaring types, optional types, the "or" type, declaring a mixed array, and the no return type void. Typing React components and typing React component props are also covered in this segment.
Students are instructed to complete the TypeScript Playground by implementing the given pet type.
Kadi walks through the solution to the TypeScript exercise.
Navigation
Section Duration: 33 minutes
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.
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.
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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
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.
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
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.
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.
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.
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
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.
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.
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
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.
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.
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
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