Kadi Kraman
Expo
Intermediate React Native, v2
4 hours, 44 minutes CC
Course Description
Ship production-ready iOS and Android apps with React Native and Expo. Grok creating user onboarding, state management with Zustand, and advanced UI techniques, including full-screen modals and deep linking. Implement native features like image selection and quick actions. Package and deploy your app to stores with proper metadata, splash screens, and icons!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: September 11, 2024
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 begins the course by sharing her extensive experience in the React community and describing the requirements and the application that will be built from scratch. The course website provides bash commands and code snippets for each exercise. At the end of each section a link to the GitHub repo is available with a code checkpoint.
Kadi creates a new Expo Go project for the Plantly application, a plant watering reminder app. The Expo CLI scaffolds a blank TypeScript project. Workflows for testing on Android, iOS, and simulators are demonstrated.
Navigation
Section Duration: 50 minutes
Kadi discusses router options in React Native applications. The Expo Router is installed. A _layout.tsx file is added, and a Stack is used to create a default home page.
Kadi codes a bottom tab navigation for the application. The tabs toggle between the Home and Profile pages. Custom icons are added. A top-level theme file is also created.
Kadi simplifies the imports for the top-level theme file by creating a path alias. Then, a layout group is introduced to allow additional views hidden from the bottom tabs. An onboarding screen is created, and the main application redirects to the onboarding screen if the user still needs to finish the onboarding process.
Kadi introduces Zustand, a Redux-like state management library. A userStore component is created to manage the user's state. A hasFinishedOnboarding property is added to the store
Kadi implements a persistent state with the async-storage package. The user's onboarding state will be saved and retrieved from storage each time the application is run.
Advanced UI Techniques
Section Duration: 1 hour, 29 minutes
Kadi creates a custom button from the Pressable component because it's more flexible than using the TouchableOpacity component. When the button is pressed, its background darkens, and it emits haptic feedback.
Kadi adds a linear gradient to the onboarding screen. The imported LinearGradient component is passed properties for the start, end, and colors to include in the gradient. Since the colors toward the top of the screen are darker, a StatusBar component is added to use a light status bar style explicitly.
Kadi creates a PlantlyImage component that serves as a wrapper around the built-in Image component. The image is added to the onboarding screen along with some heading and subheading text.
Kadi creates a full-screen modal to overlay the application when adding a new item. The modal is a top-level component. An icon button is added to the header to open the modal.
Kadi creates the new plant form in the full-screen modal. The form includes an input field for the plant name and the watering frequency. Tips for handling input and navigating virtual keyboards are also discussed in this lesson.
Kadi creates a store for the list of plants. After the new plant form is submitted, the plant is added to the store, which populates the list of plants on the home page. A PlantCard component that renders plants in the list is also added to the application.
Kadi uses the Expo ImagePicker component to allow the user to select a photo from their photo library for a plant. When a valid image is selected, it will appear at the top of the new plant form.
Kadi explains that photos selected from the device are saved in a temporary cache that does not persist. To fix this, the newly selected photo is moved to the application's storage. The Expo File System component has been added to the application to facilitate this.
Kadi introduces dynamic routes to allow users to view the details for an individual plant. The plantId is included in the route to indicate which plant has been selected. The plantId is exposed as a parameter through the useLocalSearchParams hook. The date-fns package is also added to the application for date/time formatting.
Development Builds
Section Duration: 1 hour, 21 minutes
Kadi explains that Expo Go allows mobile developers to get up and running quickly. However, not all native device capabilities are available in Expo Go. A development build must be used to create the entire native app experience.
Kadi demonstrates how to create development builds for both iOS and Android. The builds are generated into "ios" and "android" directories, respectively. The "npx expo run:ios" and "npx expo run:android" commands will package the build and deploy it to the simulator as a native application.
Kadi demonstrates how to generate iOS and Android builds using Expo Application Services (EAS). EAS is more convenient since it doesn't require the complex local tooling setup. Installable applications can be generated, signed, and distributed to testers through an array of tools and services.
Kadi adds a splash screen and application icons for both Android and iOS. Expo generates all the required versions and sizes for each platform. Auto-hiding of the splash screen can also be disabled to allow the application to retrieve authentication or persisted storage data before showing the application interface.
Kadi demonstrates how to install and use custom fonts. Expo provides utility packages for importing Google Fonts. The individual font files are packaged with the application. Since font naming conventions vary between iOS and Android, the Platform.select method is used to determine which font name to use in the component styling.
Kadi codes a "quick action" which is another native mobile application feature for adding a custom action item to the quick action menu. The quick action adds a new plant by deep-linking into the application's new plant form.
Kadi demonstrates deep linking, which allows users to link directly to an internal application page rather than enter through the home screen. When the destination page is part of a stack, the initialRootName property can give the back button a reference page to return to. Edge cases for viewing the incoming URL or conditional rendering the header are also discussed in this lesson.
Kadi demonstrates how to handle parameters passed in a deep link URL. These parameters are similar to URL parameters in a normal web URL. Parameters can also be passed from page to page within the application.
Deployment
Section Duration: 36 minutes
Kadi spends a few minutes demonstrating how to build and sign applications with Expo Application Services (EAS). A benefit of EAS is keystore management. The EAS CLI is free to use; however, build times are charged. Costs can be avoided by using the local build option.
Kadi discusses how a mobile application is deployed to the Android and iOS app stores. Developer accounts are required to create the app and upload a production build. Links and details instructions are provided on the course website.
Kadi reviews the metadata and image requirements for the app store. Both platforms require an extensive list of metadata along with several screenshots of the application. Test strategies are also discussed in this lesson.
Wrapping Up
Section Duration: 9 minutes
Kadi wraps up the course by sharing some resources for relevant React Native libraries and tips for building mobile applications. This lesson also discusses student questions about accessibility in mobile apps and strategies for managing client apps.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops