Curriculum

48 Topics
Introduction to the course
What is React Native?
Native cross-platform & hybrid developer roles
Meet a cross-platform developer
React Native Development Environment Overview
React Native with Expo
How is React Native used in the real world?
React Native Code
What is Expo?
What are React Native Components?
Building a component
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
Practical Styling
Module summary: Introduction to React Native
Course syllabus
How to be successful in this course
Additional resources
Benefits of React Native
Building React Native apps with Expo
Additional resources
Exploring building a component
Exercise: Your first React Native component
Solution: Your first React Native component
Additional resources
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
Additional resources
Styling using StyleSheet
Exercise: Style a component
Solution: Style a component
Additional resources
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
Meet and greet

39 Topics
Rendering large lists using FlatList component
Using the FlatList component
FlatList Methods
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
Using TextInput Methods
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
Additional resources
Explore the SectionList Component
Exercise: Render a large list using SectionList
Solution: Render a large list using SectionList
Additional resources
TextInput Component and its Features
Exercise: Create a TextInput Component
Solution: Create a TextInput Component
Tips and Tricks to handle the virtual keyboard
Additional resources
Common props of TextInput component
Exercise: Create a login page
Solution: Create a login page
TextInput Methods
Additional resources
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

35 Topics
What is the Pressable Component?
Using Pressable Component
Displaying Images in React Native
Using Image Component
Styling an Image within the app
Passing props to the Image Component
Setting Background Images
What are hooks ?
Using useColorScheme hook
Using useWindowDimensions hook
Using other community hooks
Module summary: Pressable Images and Hooks in React Native
Exploring Pressable
Exercise: Create a clickable text area with Pressable
Solution: Create a clickable text area with Pressable
Additional resources
Exploring the Image Component
Exploring props to the Image Component
Exercise: Displaying Images in your app
Solution: Displaying Images in your app
Additional resources
Exploring the useColorScheme hook
Explore the useWindowDimensions hook
Exploring other community hooks
Exercise: Hooks in React Native
Solution: Hooks in React Native
Additional resources
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

41 Topics
What is React Navigation?
Setting up React Navigation
Using the Stack.Navigator
Approaches to Passing Props to Screen
Moving to a New Screen
Moving Between Screens
Going Back to Previous Screen
Configuring a Header Bar
What is Tab Navigation?
Tab Navigation Example
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
Passing props to Screen
Exercise: Set up Routes
Solution: Set up Routes
Additional resources
Navigating to a Screen
Exercise: Moving between screens
Solution: Moving between screens
Additional resources
Exploring Tab Navigation
Exercise: Configure Tab Navigation
Solution: Configure Tab Navigation
Additional resources
Exploring Drawer Navigation
Exercise: Configure Drawer Navigation
Solution: Configure Drawer Navigation
Additional resources
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

10 Topics
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
Next steps
Final course quiz: React Native
Peer review: Little Lemon newsletter sign-up
What challenges did you encounter when creating your app?

  Write a Review

React Native

Go to Free Course