React Native

React Native

This course is part of multiple programs.

Instructor: Taught by Meta Experts

Access provided by L'Oréal

49,686 already enrolled

5 modules

Gain insight into a topic and learn the fundamentals.

397 reviews

Intermediate level

Recommended experience

Flexible schedule

4 weeks at 10 hours a week

Learn at your own pace

96%

Most learners liked this course

5 modules

Gain insight into a topic and learn the fundamentals.

397 reviews

Intermediate level

Recommended experience

Flexible schedule

4 weeks at 10 hours a week

Learn at your own pace

96%

Most learners liked this course

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

34 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is available as part of

When you enroll in this course, you'll also be asked to select a specific program.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 5 modules in this course

React Native is an open-source framework for building cross-platform applications (apps) using React and the platform’s native capabilities. In this course, you will move from the basics of React to a more advanced implementation using React Native. You’ll review a wide range of different React components and ways of styling them. And you’ll get to practice using different mobile methods of interactivity with React Native.

Some of the basics skills you will learn include: • Building a single-page React Native app and styling it using basic components • Building large lists and configuring user inputs within a React Native app • Using the Pressable component to build buttons and other clickable areas • Setting up an app with React Navigation and moving between screens You’ll gain experience with the following tools and software: • React • React Native • Front End development languages (HTML, CSS and JavaScript) • JSX • Code editing programs, such as Expo and Visual Studio Code This course is for learners who would like to prepare themselves for a career in mobile development. To succeed in this course, you will need foundational knowledge of React basics, internet navigation skills and an eagerness to code.

In this module, the basic structure and use of React Native is explored and demonstrated. You will learn to build a single page React Native app and style it using basic components such as View, Text and StyleSheet.

What's included

18 videos21 readings8 assignments

18 videos Total 75 minutes

Introduction to the course 4 minutes
What is React Native? 6 minutes
Native, cross-platform & hybrid developer roles 5 minutes
Meet a cross-platform developer 3 minutes
React Native Development Environment Overview 2 minutes
React Native with Expo 5 minutes
How is React Native used in the real world? 4 minutes
React Native Code 3 minutes
What is Expo? 5 minutes
What are React Native Components? 6 minutes
Building a component 4 minutes
What are View and Text Components? 3 minutes
Using the View and Text Components 5 minutes
What is the ScrollView Component? 4 minutes
Using the ScrollView Component 5 minutes
Styling Components using StyleSheet 4 minutes
Practical Styling 5 minutes
Module summary: Introduction to React Native 3 minutes

21 readings Total 349 minutes

Course syllabus 15 minutes
How to be successful in this course 10 minutes
Additional resources 5 minutes
Benefits of React Native 6 minutes
Building React Native apps with Expo 5 minutes
Additional resources 3 minutes
Exploring building a component 10 minutes
Exercise: Your first React Native component 30 minutes
Solution: Your first React Native component 30 minutes
Additional resources 5 minutes
Explore the View and Text Components 10 minutes
Exercise: Build a React Native screen 30 minutes
Solution: Build a React Native screen 30 minutes
Explore the ScrollView Component 15 minutes
Exercise: Build a scrollable component 30 minutes
Solution: Build a scrollable component 30 minutes
Additional resources 5 minutes
Styling using StyleSheet 15 minutes
Exercise: Style a component 30 minutes
Solution: Style a component 30 minutes
Additional resources 5 minutes

8 assignments Total 111 minutes

Module quiz: Introduction to React Native 30 minutes
Knowledge check: Introduction to React Native 15 minutes
Self review: Your first React Native component 9 minutes
Knowledge check: React Native Components 15 minutes
Self review: Build a React Native screen 9 minutes
Self review: Build a scrollable component 9 minutes
Knowledge check: Views, Text and Scrollable components 15 minutes
Self review: Style a component 9 minutes

In this module you will learn about the core components of React Native. You will learn to build large and performant lists with the FlatList and SectionList components. You will then learn to configure user inputs via keyboard using the TextInput component. By the end of this module, you will gain the knowledge to build large lists and configure user inputs within your React Native App.

What's included

12 videos18 readings9 assignments

12 videos Total 57 minutes

Rendering large lists using FlatList component 4 minutes
Using the FlatList component 4 minutes
FlatList Methods 5 minutes
Render large lists by sections using SectionList 4 minutes
Using the SectionList component 6 minutes
What is the TextInput component? 4 minutes
Configure the TextInput Component 5 minutes
Virtual Keyboard on Mobile Apps 5 minutes
Handling the Virtual Keyboard 5 minutes
Passing props to TextInput Component 5 minutes
Using TextInput Methods 6 minutes
Module summary: Lists and Text Input in React Native 4 minutes

18 readings Total 395 minutes

Explore the FlatList Component 15 minutes
Exercise: Render a large list using FlatList 30 minutes
Solution: Render a large list using FlatList 30 minutes
Additional resources 5 minutes
Explore the SectionList Component 20 minutes
Exercise: Render a large list using SectionList 30 minutes
Solution: Render a large list using SectionList 30 minutes
Additional resources 10 minutes
TextInput Component and its Features 20 minutes
Exercise: Create a TextInput Component 30 minutes
Solution: Create a TextInput Component 30 minutes
Tips and Tricks to handle the virtual keyboard 20 minutes
Additional resources 15 minutes
Common props of TextInput component 30 minutes
Exercise: Create a login page 30 minutes
Solution: Create a login page 30 minutes
TextInput Methods 15 minutes
Additional resources 5 minutes

9 assignments Total 126 minutes

Module quiz: Lists and Text Input in React Native 30 minutes
Self Review – Render a large list using FlatList 9 minutes
Knowledge check: Render large lists with FlatList 15 minutes
Self review: Render a large list using SectionList 9 minutes
Knowledge check: Render large lists with SectionList 15 minutes
Self review: Create a TextInput Component 9 minutes
Knowledge check: Accept user input 15 minutes
Self review: Create a login page 9 minutes
Knowledge check: Props and methods in TextInput 15 minutes

In this module you will learn about using the Pressable component to build buttons and other clickable areas. You will then learn about displaying and styling images within the app. Finally, you will explore some common React Native hooks that come handy during development

What's included

12 videos15 readings7 assignments1 discussion prompt

12 videos Total 45 minutes

What is the Pressable Component? 5 minutes
Using Pressable Component 5 minutes
Displaying Images in React Native 5 minutes
Using Image Component 2 minutes
Styling an Image within the app 3 minutes
Passing props to the Image Component 5 minutes
Setting Background Images 3 minutes
What are hooks ? 3 minutes
Using useColorScheme hook 4 minutes
Using useWindowDimensions hook 3 minutes
Using other community hooks 3 minutes
Module summary: Pressable, Images and Hooks in React Native 2 minutes

15 readings Total 325 minutes

Exploring Pressable 20 minutes
Exercise: Create a clickable text area with Pressable 30 minutes
Solution: Create a clickable text area with Pressable 30 minutes
Additional resources 25 minutes
Exploring the Image Component 15 minutes
Exploring props to the Image Component 30 minutes
Exercise: Displaying Images in your app 30 minutes
Solution: Displaying Images in your app 30 minutes
Additional resources 5 minutes
Exploring the useColorScheme hook 20 minutes
Explore the useWindowDimensions hook 15 minutes
Exploring other community hooks 10 minutes
Exercise: Hooks in React Native 30 minutes
Solution: Hooks in React Native 30 minutes
Additional resources 5 minutes

7 assignments Total 108 minutes

Module quiz: Pressable, Images and Hooks in React Native 30 minutes
Self review: Create a clickable text area with Pressable 9 minutes
Knowledge check: Pressable Component 15 minutes
Self review: Displaying Images in your app 9 minutes
Knowledge check: Images in React Native 15 minutes
Self review: Hooks in React Native 15 minutes
Knowledge check: Hooks in React Native 15 minutes

1 discussion prompt Total 3 minutes

Share your app with images 3 minutes

In this module you will learn all about navigating between screens using React Navigation. You will learn different types of navigation such as Stack, Tab and Drawer navigation, which are widely used in mobile apps. You will also learn about the core features of React Navigation. By the end of this module, you will be able to setup your app with React Navigation and move between screens.