Kadi Kraman
Expo
React Native, v3
4 hours, 35 minutes CC
Course Description
Use your React skills to build feature-rich, native mobile apps for iOS and Android using React Native and Expo. Learn to create UI components like custom buttons and scrollable lists, implement navigation between screens, and persist data using AsyncStorage. Apply your skills by building practical projects such as a shopping list app and a recurring reminder system with push notifications!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn 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: 4 minutes
Kadi introduces the course and provides an overview of the app which will have features such as a shopping list and reminders. She also provides information on the required setup, including having Node.js installed, and a phone (iPhone or Android).
Components & Styling
Section Duration: 1 hour, 6 minutes
Kadi walks through how to start a new React Native project using the Expo CLI and explains the options available, including choosing a template.
Kadi explains how to create a new project, navigate the project directory, and run the app using Expo Go on both iOS and Android devices. She also provides some debugging tips and mentions the benefits of using TypeScript in the project.
Kadi discusses the need for additional functionality in mobile apps and how community libraries and frameworks like Expo provide solutions for these requirements. She clarifies that Expo Go is used for learning and prototyping purposes, but development builds are recommended for production apps.
Kadi demonstrates how to set up linting using the Expo CLI and ESLint. She also discusses the benefits of using Prettier for code formatting and shows how to integrate it with ESLint.
Kadi introduces the basic components in React Native, such as View and Text, and explains their differences from web development. She also covers styling in React Native, including how to use inline styles and create a global theme file.
Kadi demonstrates how to create a delete button using touchable components in React Native. She explains that the built-in button element in React Native is not commonly used because it cannot be customized. She also shows how to add styling to the button, handle the onPress event, and display an alert confirmation with options for the user to delete or cancel.
Kadi explains that components allow for modularizing the app and making it easier to manage. She demonstrates how to create a shopping list item component, import it into the main app file, pass props to components, and use TypeScript to define the types of the props.
Kadi demonstrates how to add a "mark as completed" UI to a shopping list app. She uses conditional styling to apply different styles based on the completion status, including a grayed-out background, crossed-out text, and a grayed-out delete button. Kadi also shows how to update the existing components to use the new completion prop.
Kadi explains the benefits of using icons instead of text and introduces the expo icons library, which is built on top of the react native vector icons. She also demonstrates how to install the vector icons library and use it to add a delete icon button to a shopping list item.
Navigation
Section Duration: 37 minutes
Kadi discusses mobile navigation and introduces concepts such as bottom tabs, modals, and stack navigators. She mentions that React Native does not come with a built-in navigation library and recommends using expo-router, which is a file system-based navigation library.
Kadi explains the different types of navigation that can be done using ExpoRouter. She demonstrates stack navigation, where screens are rendered on top of each other and can be navigated back using gestures or buttons. She also shows how to navigate between screens using the link component and programmatically using the router.navigate function.
Kadi explains how to use modal navigation and bottom tab navigation in React Native using Expo Router. She also demonstrates how to render a screen as a modal on top of other content and how to convert stack navigation into bottom tab navigation.
Kadi explains how to nest navigators in React Native using React Navigation. She demonstrates how to convert a screen into a stack navigator by creating a folder and moving the screen file into it. She also shows how to hide unnecessary navigation headers and add navigation buttons using the Expo Router.
Input, Scrolling, and Lists
Section Duration: 28 minutes
Kadi demonstrates how to style text inputs and handle user input using the useState hook. She also explains how to control the keyboard type and behavior, and how to submit the input and update the app's state accordingly.
Kadi demonstrates how to make a scrollable view in React Native. She also shows how to make the header sticky using the stickyHeaderIndices property.
Kadi demonstrates using a FlatList component instead of a ScrollView for rendering large sets of items. Kadi also demonstrates the optimization benefits of using FlatList by showing how it only renders the items that are currently visible on the screen.
User Experience Enhancements
Section Duration: 34 minutes
Kadi demonstrates how to hook up the onDelete and onToggleComplete functions. She also explains how to update the UI based on the completion status of an item.
Kadi demonstrates how to use the Icons component and style it to be rendered in a row with the item name. Kadi also explains how to order the items in the list based on their completion status and last updated timestamp using a sorting function.
Kadi explains how to use async storage in React Native to persist data across app launches. She also demonstrates how to use the useEffect hook to retrieve data from async storage when the app loads, and how to update async storage when adding, deleting, or modifying data.
Kadi introduces layout animation, which is a simple way to animate the UI from its previous state to its current state. She also mentions more advanced animation options using the React Native Animated and React Native Gesture Handler libraries.
Device Interactions
Section Duration: 31 minutes
Kadi demonstrates how to install the library for haptics and shows how to use different haptic feedback patterns, such as medium impact and success notification, in response to user actions like deleting an item or completing a task.
Kadi discusses the difference between remote and local push notifications and the process of setting up remote push notifications. She also demonstrates how to ask for permission to send push notifications to the user and provide a code example for requesting permission.
Kadi demonstrates how to schedule a notification using the Expo Notifications API to schedule a local notification with a title and trigger time. She also explains the difference between foreground and background notifications and how to handle each.
Building a Recurring Reminder Component
Section Duration: 1 hour, 10 minutes
Kadi walks through how to build a counter feature in a React Native app. She demonstrates how to update the UI every second using useState, useEffect, and setInterval, and also discusses the importance of clearing the interval to avoid multiple intervals running simultaneously.
Kadi walks through using TypeScript to define the properties and types for the component. She also demonstrates how to use utility functions from date functions to calculate the countdown status based on a timestamp.
Kadi demonstrates how to style the container and text based on the status, such as adding a red background color for overdue items and white text color for overdue items. Kadi also updates the button text and adds some spacing between elements.
Kadi demonstrates how to store and retrieve data from async storage, and also shows how to cancel scheduled notifications. Kadi also discusses the use of useEffect and useState hooks to handle the fetching and updating of the countdown state.
Kadi demonstrates how to add a loading spinner while the app's initial state is being fetched.
Kadi demonstrates how to fetch data from AsyncStorage and display it in a scrollable list using FlatList. She also adds styling to the list items and includes a list empty component.
Kadi adds haptic feedback using the Expo Haptics library and confetti using the Confetti Cannon library to add a fun and celebratory effect when a certain action is triggered.
Wrapping Up
Section Duration: 1 minute
Kadi wraps up the course by summarizing the course topics and mentions the main components used to build apps, such as views, text, scroll views, and flat lists. She also discusses styling, navigation, data persistence, layout animations, and adding features like haptics and push notifications.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops