Free Course Image React Native for beginners

Free online courseReact Native for beginners

Duration of the online course: 5 hours and 26 minutes

4

StarStarStarStar

(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 - Introduction 08m
  • 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 App 18m
  • Exercise: Which CLI tool is recommended for beginners to create a React Native app?
  • Video class: React Native Tutorial #3 - Views, Text 09m
  • Exercise: _What is the purpose of the "style" prop in React Native?
  • Video class: React Native Tutorial #4 - Using State 09m
  • Exercise: What is the primary feature being introduced in this React Native tutorial?
  • Video class: React Native Tutorial #5 - Text Inputs 08m
  • Exercise: _What is the purpose of adding a text input field in React Native?
  • Video class: React Native Tutorial #6 - Lists 07m
  • Exercise: How is an array of people displayed in a React Native component?
  • Video class: React Native Tutorial #7 - Flat List Component 07m
  • 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 Components 07m
  • 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 - Alerts 04m
  • Exercise: What feature ensures user input is valid in the app?
  • Video class: React Native Tutorial #13 - Dismissing the Keyboard 04m
  • 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 Basics 18m
  • Exercise: What layout technique can help prevent content from being pushed off-screen in a React Native app?
  • Video class: React Native Tutorial #15 - Icons 07m
  • 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 App 08m
  • Exercise: What is the initial "Game Zone" app's primary function?
  • Video class: React Native Tutorial #17 - Custom Fonts 11m
  • 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 Styles 05m
  • Exercise: What is the main purpose of creating a global style file in coding?
  • Video class: React Native Tutorial #19 - React Navigation Setup 05m
  • Exercise: _What is the purpose of using a stack navigator in React Native?
  • Video class: React Native Tutorial #20 - Stack Navigator 12m
  • Exercise: What is the first step to set up a stack navigator in an app?
  • Video class: React Native Tutorial #21 - Navigating Around 08m
  • 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 Screens 08m
  • Video class: React Native Tutorial #23 - Navigation Options 05m
  • 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 Navigation 12m
  • Video class: React Native Tutorial #25 - Custom Header Component 14m
  • Video class: React Native Tutorial #26 - Custom Card Component 09m
  • Video class: React Native Tutorial #27 - Using Images 11m
  • Exercise: _What is the correct way to import and use an image in React Native?
  • Video class: React Native Tutorial #28 - Background Images 04m
  • Video class: React Native Tutorial #29 - Modals 11m
  • 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 Yup 09m
  • Video class: React Native Tutorial #33 - Showing Form Errors 07m
  • Exercise: _What is the purpose of using yup and formik together in React Native?
  • Video class: React Native Tutorial #34 - Custom Button Component 06m
  • Video class: React Native Tutorial #35 - Wrap Up 02m

This free course includes:

5 hours and 26 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at App Development

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 5000 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 60 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate