Introduction to the course
Native cross-platform & hybrid developer roles
Meet a cross-platform developer
React Native Development Environment Overview
How is React Native used in the real world?
What are React Native Components?
What are View and Text Components?
Using the View and Text Components
What is the ScrollView Component?
Using the ScrollView Component
Styling Components using StyleSheet
Module summary: Introduction to React Native
How to be successful in this course
Building React Native apps with Expo
Exploring building a component
Exercise: Your first React Native component
Solution: Your first React Native component
Explore the View and Text Components
Exercise: Build a React Native screen
Solution: Build a React Native screen
Explore the ScrollView Component
Exercise: Build a scrollable component
Solution: Build a scrollable component
Exercise: Style a component
Solution: Style a component
Knowledge check: Introduction to React Native
Self review: Your first React Native component
Knowledge check: React Native Components
Self review: Build a React Native screen
Self review: Build a scrollable component
Knowledge check: Views Text and Scrollable components
Self review: Style a component
Module quiz: Introduction to React Native
Rendering large lists using FlatList component
Using the FlatList component
Render large lists by sections using SectionList
Using the SectionList component
What is the TextInput component?
Configure the TextInput Component
Virtual Keyboard on Mobile Apps
Handling the Virtual Keyboard
Passing props to TextInput Component
Module summary: Lists and Text Input in React Native
Explore the FlatList Component
Exercise: Render a large list using FlatList
Solution: Render a large list using FlatList
Explore the SectionList Component
Exercise: Render a large list using SectionList
Solution: Render a large list using SectionList
TextInput Component and its Features
Exercise: Create a TextInput Component
Solution: Create a TextInput Component
Tips and Tricks to handle the virtual keyboard
Common props of TextInput component
Exercise: Create a login page
Solution: Create a login page
Self Review – Render a large list using FlatList
Knowledge check: Render large lists with FlatList
Self review: Render a large list using SectionList
Knowledge check: Render large lists with SectionList
Self review: Create a TextInput Component
Knowledge check: Accept user input
Self review: Create a login page
Knowledge check: Props and methods in TextInput
Module quiz: Lists and Text Input in React Native
What is the Pressable Component?
Using Pressable Component
Displaying Images in React Native
Styling an Image within the app
Passing props to the Image Component
Setting Background Images
Using useColorScheme hook
Using useWindowDimensions hook
Using other community hooks
Module summary: Pressable Images and Hooks in React Native
Exercise: Create a clickable text area with Pressable
Solution: Create a clickable text area with Pressable
Exploring the Image Component
Exploring props to the Image Component
Exercise: Displaying Images in your app
Solution: Displaying Images in your app
Exploring the useColorScheme hook
Explore the useWindowDimensions hook
Exploring other community hooks
Exercise: Hooks in React Native
Solution: Hooks in React Native
Self review: Create a clickable text area with Pressable
Knowledge check: Pressable Component
Self review: Displaying Images in your app
Knowledge check: Images in React Native
Self review: Hooks in React Native
Knowledge check: Hooks in React Native
Module quiz: Pressable Images and Hooks in React Native
Share your app with images
What is React Navigation?
Setting up React Navigation
Using the Stack.Navigator
Approaches to Passing Props to Screen
Going Back to Previous Screen
Customizing your tab navigator
What is Drawer Navigation?
Drawer Navigation Example
Module summary: React Navigation
Installation and Setup of React Navigation
Creating and Configuring Native Stack Navigator
Exercise: Moving between screens
Solution: Moving between screens
Exercise: Configure Tab Navigation
Solution: Configure Tab Navigation
Exploring Drawer Navigation
Exercise: Configure Drawer Navigation
Solution: Configure Drawer Navigation
Self review: Set up Routes
Knowledge check: Introduction to React Navigation
Self review: Moving between screens
Knowledge check: Moving between screens
Self review: Configure Tab Navigation
Knowledge check: Tab Navigation
Self review: Configure Drawer Navigation
Knowledge check: Drawer Navigation
Module quiz: React Navigation
Course Recap: React Native
Solution walk-through: Little Lemon newsletter sign-up
Congratulations you have completed React Native!
About the final project assessment
Exercise: Little Lemon newsletter sign-up
Solution code: Little Lemon newsletter sign-up
Final course quiz: React Native
Peer review: Little Lemon newsletter sign-up
What challenges did you encounter when creating your app?