Duration of the online course: 5 hours and 26 minutes
4
(9)
Build your first mobile app with React Native in this free course—learn components, navigation, forms, and styling, then practice with real mini projects.
In this free course, learn about
React Native fundamentals, prerequisites, and the Expo-based dev workflow
Creating apps and using core components: View, Text, TextInput, style prop
Managing state and handling user input for interactive UI
Rendering lists via map vs FlatList, including performance benefits of FlatList
Making pressable UI with Touchable components (e.g., TouchableOpacity)
Building a Todo app with component separation (TodoItem, AddTodo) and alerts
Dismissing the keyboard via touch handling to improve UX
Flexbox layout basics and techniques to avoid content being pushed off-screen
Using Expo vector icons, importing images, and adding background images
Loading custom fonts with Expo Fonts and organizing reusable global styles
Setting up React Navigation: stack navigator, headers/titles, screen options
Navigating and passing data between screens; drawer navigation concepts
Using modals for overlay dialogs and custom UI components (header, card, button)
Building forms with Formik + Yup validation and displaying form errors
Course Description
Start building real mobile apps with React Native and gain the confidence to move from idea to a working interface on iOS and Android. This beginner-friendly, free online course focuses on the fundamentals that matter in practice: how a React Native app is structured, how screens are built from reusable components, and how to turn static layouts into interactive experiences.
You will begin by setting up your first project the approachable way and learning the core building blocks such as views, text, and styling. From there, you will create dynamic UIs with state and user input, including text fields and responsive behaviors. As your skills grow, you will handle real-world patterns like rendering lists efficiently, making items pressable with touchable components, and improving the user experience with alerts and keyboard dismissal.
To connect everything into a usable app, you will learn layout techniques with Flexbox, enhance interfaces with icons, custom fonts, images, and background images, and organize visual consistency using global styles. You will also move beyond single-screen prototypes by setting up navigation, using stack and drawer patterns, customizing headers, and passing data between screens to support real workflows.
Practice is integrated throughout with guided mini projects that mirror what you would build on the job, including a to-do experience and a review-style app with cards and modals. You will also work with forms using Formik and validation with Yup, helping you create cleaner, more reliable input flows and clearer error feedback. By the end, you will have a solid foundation to continue into more advanced topics and start building your own React Native apps with better structure, usability, and confidence.
Course content
Video class: React Native Tutorial #1 - Introduction08m
Exercise: _What is the recommended prerequisite knowledge for starting the React Native tutorial by The Net Ninja?
Video class: React Native Tutorial #2 - Creating a React Native App18m
Exercise: Which CLI tool is recommended for beginners to create a React Native app?
Video class: React Native Tutorial #3 - Views, Text09m
Exercise: _What is the purpose of the "style" prop in React Native?
Video class: React Native Tutorial #4 - Using State09m
Exercise: What is the primary feature being introduced in this React Native tutorial?
Video class: React Native Tutorial #5 - Text Inputs08m
Exercise: _What is the purpose of adding a text input field in React Native?
Video class: React Native Tutorial #6 - Lists07m
Exercise: How is an array of people displayed in a React Native component?
Video class: React Native Tutorial #7 - Flat List Component07m
Exercise: _What is the main difference between using a map method and a flat list component to output a list in React Native?
Video class: React Native Tutorial #8 - Touchable Components07m
Exercise: What component allows making list items pressable without using buttons?
Video class: React Native Tutorial #9 - Todo App (part 1)12m
Exercise: What is the primary goal of the described mini project?
Video class: React Native Tutorial #10 - Todo App (part 2)08m
Exercise: What is the main purpose of creating a separate 'to-do item' component?
Video class: React Native Tutorial #11 - Todo App (part 3)13m
Exercise: _What is the purpose of the "add to do" component in React Native?
Video class: React Native Tutorial #12 - Alerts04m
Exercise: What feature ensures user input is valid in the app?
Video class: React Native Tutorial #13 - Dismissing the Keyboard04m
Exercise: _What is the purpose of wrapping the entire component with a touchable without feedback component in React Native?
Video class: React Native Tutorial #14 - Flexbox Basics18m
Exercise: What layout technique can help prevent content from being pushed off-screen in a React Native app?
Video class: React Native Tutorial #15 - Icons07m
Exercise: _What is the library that comes along with a new React Native project using Expo, which allows us to add icons out of the box?
Video class: React Native Tutorial #16 - Starting the Reviews App08m
Exercise: What is the initial "Game Zone" app's primary function?
Video class: React Native Tutorial #17 - Custom Fonts11m
Exercise: _What is the method used to load custom fonts in a React Native app using Expo Fonts?
Video class: React Native Tutorial #18 - Global Styles05m
Exercise: What is the main purpose of creating a global style file in coding?
Video class: React Native Tutorial #19 - React Navigation Setup05m
Exercise: _What is the purpose of using a stack navigator in React Native?
Video class: React Native Tutorial #20 - Stack Navigator12m
Exercise: What is the first step to set up a stack navigator in an app?
Video class: React Native Tutorial #21 - Navigating Around08m
Exercise: _What method do we use to navigate to a different screen in a React Native app using React Navigation?
Video class: React Native Tutorial #22 - Passing Data Between Screens08m
Video class: React Native Tutorial #23 - Navigation Options05m
Exercise: _What property do we need to add inside each screen to add a title to the header in a stack navigator in React Native?
Video class: React Native Tutorial #24 - Drawer Navigation12m
Video class: React Native Tutorial #25 - Custom Header Component14m
Video class: React Native Tutorial #26 - Custom Card Component09m
Video class: React Native Tutorial #27 - Using Images11m
Exercise: _What is the correct way to import and use an image in React Native?
Video class: React Native Tutorial #28 - Background Images04m
Video class: React Native Tutorial #29 - Modals11m
Exercise: _What is a modal in React Native?
Video class: React Native Tutorial #30 - Formik Forms (part 1)14m
Video class: React Native Tutorial #31 - Formik Forms (part 2)09m
Exercise: _What is the purpose of the "add review" function in the React Native app?
Video class: React Native Tutorial #32 - Validation with Yup09m
Video class: React Native Tutorial #33 - Showing Form Errors07m
Exercise: _What is the purpose of using yup and formik together in React Native?
Video class: React Native Tutorial #34 - Custom Button Component06m
Video class: React Native Tutorial #35 - Wrap Up02m