The Best React Native Course 2026 (From Beginner To Expert)

Master using the console.log method in JavaScript to output messages in the browser console, illustrated with simple examples like hello world and basic arithmetic.

Explore how JavaScript comments improve readability and document code, using single-line // comments and multi-line /* */ comments to describe variables, prevent execution, and organize to-do notes.

Discover JavaScript data types, including numbers, strings, booleans, objects and arrays, and learn how the typeof operator works with examples.

Discover how to create JavaScript variables with var, let, or const, and follow naming rules like no leading digits, no reserved keywords, and using the assignment operator to store values.

Explore variables in JavaScript with var, let, and const, learn how to declare and store data, update values, and log results with console.log, understand which values should stay constant.

Discover how JavaScript executes code from top to bottom in a single threaded, synchronous manner, with line by line execution and practical console.log examples showing variable updates.

Learn JavaScript numbers and arithmetic operators, including addition, subtraction, multiplication, division, modulus, and the increment and decrement operators, with hands-on console examples using x and y.

Learn how to create strings in JavaScript using single or double quotes, template literals with backticks, escape characters, newlines, and the length property.

Explore template strings using backticks to create multi-line strings, embed variables with ${var}, include quotes inside, compare with the old concatenation method, and perform simple calculations.

Learn essential JavaScript string methods in the best React Native course, including zero indexing, charAt, at, slice, substring, replace, and case conversion with toUpperCase and toLowerCase, through practical examples.

Learn to work with JavaScript objects in React Native: create objects with properties, access data by dot and bracket notation, and add, delete, update, and freeze properties.

Explore how JavaScript arrays organize lists, access by zero-based indexes, modify elements, push items, check length, and verify with Array.isArray.

Explore booleans in JavaScript and understand true and false. Learn about equality operators, truthy and falsy values, and testing values with boolean and console.log.

Explore JavaScript comparison and logical operators, distinguishing double equals from triple equals, and practice equals, not equals, greater than, less than, and their type-aware variations.

Master logical operators in JavaScript, including and, or, and not, with true/false and console.log examples. Apply left-to-right evaluation to login scenarios using email and password or email or phone number.

Master conditional logic using if, else, and else if with hour-based messages and console.log, applying truthy and falsy values to drive outcomes.

Learn how to define and call JavaScript functions using the function keyword, name, parentheses, and a code block; pass parameters and return results for reusable tasks.

Build the foundation of a React Native app by mastering core components like text, view, image, and buttons, and apply styling with stylesheet and Felixbox for responsive layouts.

Explore the init code of a new React Native project, detailing imports, view and text components, and the style sheet, including flex, alignItems, justifyContent, and save area view.

Learn to use the React Native Text component to display and style text with alignment, font size and weight, color, nested styles, onpress interaction, and line limits.

Learn how to clean up React Native code by using style sheet to define and apply styles with JavaScript objects, replacing inline styles with named styles like titleText and redText.

Render images in React Native by importing local assets or using remote URIs; style with width, height, borderRadius for circles, and blurRadius for blur effects.

Discover how to build buttons and touchables in React Native, using pressable and touchable opacity to handle on press and on long press with interactive images and text.

Learn to make a React Native screen scrollable by wrapping images in a ScrollView, toggle vertical and horizontal indicators, and apply a red content container style.

Explore platform-specific rendering in React Native by using the Platform module to tailor text, color, and layout for Android and iOS, including ternary expressions and center alignment.

Create loaders in React Native by importing the activity indicator from React Native, use a large size, and customize colors with the color property for Android and iOS.

Learn how the view component acts as a wrapper for other components, enabling layout and styling with height, width, background color, and centered content using flexbox.

Discover how margin creates space outside a view and how padding adds space inside it, with examples of top, bottom, left, right, and horizontal and vertical margins.

Explore flexbox in React Native and how it builds responsive layouts across screen sizes, using flex values to partition space among colored views.

Learn flex-direction in React Native, switching between column and row layouts and their reverses, and use justify content and align items to control alignment and spacing.

Learn to use flex wrap in a React Native container: switch to wrap, add views without shrinking, and apply align content center to center them on screen.

Explore absolute and relative positioning in React Native by adjusting top and left values, and learn that relative is the default while absolute can move elements independently.

Explore how React Native dimensions determine width and height across devices, using percentage, Dimensions API, and responsive libraries like React Native size matters to create consistent layouts.

Learn to implement responsive UI in React Native using the react-native-size-matters library, applying scale and verticalScale to normalize width and height across devices.

Learn to use the useState hook in a React Native app, initialize local state to 20, and update it with setState via increase or decrease functions.

Learn to import and render the modal component from React Native to display content above the screen, control visibility with the useState hook, and apply slide or fade animation types.

Learn to use Expo vector icons in React Native to render icons, customize color and size, handle onPress, and compare icons with PNG images for performance.

Explore using the image background component to render a background image in React Native, with local assets via require or remote URI, and place centered UI inside.

Learn to implement and control text input in React Native by using placeholder, keyboard type, secure text entry, and multiline options, and by managing value with onChangeText and useState.

Create a React component using a functional approach, structure UI in separate files under src/components, and export it for use across screens with a React Native style sheet.

Transform Figma designs into fully functional React Native screens by applying core UI principles, adding animations, and building responsive, multi-screen experiences for Android and iOS.

Design and implement the ui screens using the Figma design, install the Figma app, and set up a React Native project with expo blank template to build the first screen.

explore when to use png versus svg for react native apps, showing how svg provides scalable graphics and smaller file sizes for logos and icons.

Finish the intro screen by replacing the png with an svg logo, centering content on a white background, and rendering a sun image with absolute bottom-right positioning in React Native.

Build a modular React Native UI by creating a reusable user avatar component. Assemble a header, social, and send button, render the section five times with responsive avatars using react-native-size-matters.

Create a circular back button with a chevron icon in header beside the user avatar, using Expo vector icons or SVG, and style header as a row with space-between.

Build a social section in a React Native app by creating a circular send button, social circle components, and dynamic icons, with precise styling and borders.

design a social container by styling a view with border radius 14 and a figma-sourced background color, add a social title, and create a reusable component with props for items.

Build a reusable social icon component for the contact us screen by passing titles and icons as props. Learn basics of props, expo vector icons, and simple TypeScript typing.

Move from the contact us screen to building a meditation home screen by creating a new screen component, rendering it in app.tsx, and styling text, padding, margins, and colors.

Build dynamic top tabs in a React Native app by creating a reusable TopTabs component, rendering multiple tabs live and recorded, and managing the active state with useState and onPress.

Learn to build a meditation card component in react native, featuring an image background with a dark overlay, title and icon overlays, and responsive styling using absolute positioning and props.

Render a two-column list in React Native with FlatList by importing dummy data and rendering items as cards; configure data, keyExtractor, renderItem, and column styles.

Make the flatlist reusable by adding props for image URL, title, and date, and use a TypeScript interface for the meditation card to render data from the data file.

Create the payment screen header with a back button and 'payment' text in a row, applying padding and spacing, and prepare for the payment method card.

Create a reusable payment method card component in react native, render it on the payment screen, import an svg icon, and implement styling for selected and unselected states.

Add a selected prop to the payment method card in React Native, enabling conditional styling and a check mark when chosen, with dynamic title and icon via props.

Build a horizontal, scrollable payment list in React Native with SVG icons for cash, Visa, MasterCard, and PayPal using a flatlist, and enable selection via onPress.

Create a bank card box component in React Native, render it in the payment screen, and style it with an icon, Mastercard title, and supporting subtitle.

Create and render a reusable add button in React Native, styling a bordered white button with rounded corners, padding, and an inline plus icon, using TouchableOpacity for interactivity.

Learn how to add animations to a React Native app using the Lottie React Native library, install setup, download a JSON animation, and render it with LottieView in payment screen.

Wrap flatlist in a container for layout control and place colors in a styles folder for a design system. Build four screens and reusable components with props and text inputs.

Build multiple screens in a React Native app by creating gold, tomato, and purple screens, styling with styles.container and text, rendering them in app.tsx, and navigating between screens.

Install React Navigation Native and stack navigator for expo, create a main stack navigator with named screens, wrap it in a navigation container, and navigate with useNavigation and navigate.

Create a multi-screen app using react navigation stack, define screens with unique names, wrap them in a navigation container, and manage headers and initial routes for smooth navigation.

Learn how to pass data between screens in React Native using the useRoute hook, accessing route params and the current screen name to customize navigation flows.

Learn to build and customize bottom tab navigation in a React Native app using React Navigation, including creating three tabs, adding titles and icons, and styling active and inactive colors.

Create a new Expo React Native app using the blank template with TypeScript, name the project, and open it in VS Code. Run the app on iOS.

Learn to build and use mock APIs to power a bookstore app, creating a custom endpoint with fields like name, author, cover, price, and seller email.

Learn to make your first http request with axios in a React Native project, creating an async fetch function, performing a get request, and formatting the response with JSON.stringify.

Store fetched data in local state with the useState hook and render it using FlatList in a React Native app, displaying item names, prices, and cover images.

Learn to get data by id with an async get request, append the id to the endpoint URL, and handle errors with try-catch blocks to navigate to a detail screen.

Explore try catch for error handling, using try and catch blocks to manage HTTP request errors, console log errors, and respond to not found and network errors.

Learn to perform http delete requests in a React Native app, deleting data by id through an endpoint, with async try/catch, success alerts, and error handling.

Use post request with Axios in React Native to create data in the database by sending author, cover, price, and seller email to the API endpoint.

Learn how to implement a put request to update data in a database, using id-based targeting, with full updates and clear distinctions from patch.

Refactor a React Native project by creating a src structure with screens, components, and http/config, moving API calls to config, and building a home screen that renders a parks list.

Create a book card component in React Native, featuring image, book name, author, price, and delete/edit icons, styled with a row layout, shadows, and iOS/Android compatibility.

Explore props in React and React Native to pass data from parent to child, destructure props, and render reusable book cards with title, price, author, and image URI.

Export API functions, add on success and on error callbacks with null-safe calls, and pass response data and errors to the home screen to fetch and render parks data.

Learn to fetch a list of boxes with useState and useEffect, and render them in a FlatList using keyExtractor and renderItem, mapping backend keys to image, author, and price.

Learn to delete an item from a React Native list by wiring a delete button to an on delete item handler, performing an HTTP delete by id, and refetching list.

Create a rounded add button with a plus icon on the home screen, and open a slide-in modal to add a new box, with a close icon.

Build a reusable custom text input for a React Native ad box, wiring four inputs: box name, cover, author name, and price, using useState for state and props for value.

Create a save button component inside the add box screen, styled with the app's primary color and centered bold text, with onPress closing the screen.

Implement a create book flow in React Native by passing body from four inputs (book title, author name, cover URL, price), handling success or error, and refetching list after creation.

Learn to implement edit functionality for a book in a React Native app by wiring on edit, opening a modal with a pre-filled form, and calling create or update APIs.

Fix a bug in the park management app by correcting selecteditem from an empty object to null, enabling proper create and edit flows for adding and updating parks.

Explore Redux basics: learn how the global store holds state, how actions carry type and payload, and how reducers update the state for actions like login or add todo.

Learn how Redux provides global state management across all screens by using actions and reducers, solving inconsistent data, and applying Redux to a simple app and an e-commerce app.

Install redux and react-redux, create a first reducer and a store, define an initial state with total likes, and use a selector to access the global state.

learn to create a Redux store (redux toolkit), connect it to a React app with a provider, and access global state across screens using useSelector for total likes and username.

Learn to manage global state with actions and useDispatch, create action creators, connect actions to reducers, and dispatch updates to increase likes across the app.

Learn how to use a Redux payload to pass a dynamic amount for increasing total likes. Create an action and reducer case that updates likes by action.payload.

Learn how to use multiple reducers in a store by creating a settings reducer, combining reducers with the combine reducers function, and accessing state through the correct reducer keys.

Learn how to define the Redux store state with a TypeScript RootState type using ReturnType of the route reducer, and apply it across settings, data, and home screens.

Recap Redux fundamentals, create actions and reducers, configure the store, connect Redux to the app, and practice changing the user role on the settings screen with a dispatch button.

Migrate from redux to redux toolkit by removing legacy redux code and setting up a new store with configure store, then wrap the app with a provider.

Create a Redux Toolkit reducer and actions with createSlice, manage a data slice and initial state, and dispatch updates to total likes in a React Native app.

Create an e-commerce app from scratch by initializing a new Expo project with a blank TypeScript template, naming it smart e-commerce, and running it on Android, iOS, or web.

Plan a scalable src folder structure with screens, components, config, data, constants, and assets, then organize auth, settings, home, card, orders, and my account screens for team collaboration.

We build a reusable text component in React Native named AppText, supporting bold and medium variations, customizable style, responsive font sizes via react-native-size-matters, and TypeScript typings.

Export const AppColors, a colors object, defining primary, white, light gray, disable gray, blue gray, mid gray, and black for consistent app styling.

Create a reusable safe area view component for React Native to protect the UI from the status bar on Android and iOS, rendering children with customizable styles via props.

Implement flash messages in a React Native app using the react-native-flash-message library, showing messages on press with customizable type, color, and position.

Create an app button component in React Native using TouchableOpacity with onPress, activeOpacity 0.8, styling via a style array, including app colors primary and a disabled gray state.

Create a reusable app text input component in React Native by defining props (value, onChangeText, placeholder, secureTextEntry, keyboardType, style) and styling it to match the login screen.

Create a sign in screen by loading the app logo from assets through a centralized images paths file, then add email and password inputs and login and sign up buttons.

Duplicate the sign in screen to create sign up screen, add a username input, adjust labels to create new account and sign in, and prepare the auth stack for navigation.

Set up stack navigation in expo by installing react navigation native, create an auth stack with sign in and sign up screens, and wrap the app in a navigation container.

Create a home screen with three tabs (home, cart, profile), implement the bottom tabs navigator, and build a main app stack combining an auth stack with the bottom tabs.

Style bottom tabs by hiding the header and applying an active tint color. Add home, card, and profile icons with Expo vector icons, and adjust label margins and Android height.

Create a reusable home header component in React Native, render it on the home, card, and profile screens, and style it with a centered layout and white logo.

Choose and integrate custom fonts to enhance your app's UI, from selecting fonts on Google Fonts to loading them with useFonts and wiring them through a fonts.ts file.

Prepare product data by downloading the resources file named product and paste it into src/data, then render this data in the app; next, we will build the product card component.

Create a React Native product card component with image, title, price, and add to cart button. Render on the home screen and pass data via props for dynamic content.

Implement the add to cart button as a circular touchable opacity element, absolute-positioned at the top-left with 28 by 28 scale, z-index one, primary background, and centered cart icon.

Create a global shadow for the app in shared styles, with iOS shadow properties and Android elevation, then apply it to the product card via the spread operator and props.

Define props for a reusable React Native component, including image URL, title, price, and on press, and create an IProductCard interface in TypeScript to render product data.

Render data in a two-column flatlist on the home screen, using product data with item keys, image URL, title, and price, plus an add-to-cart action.

Build an empty cart component in a React Native app, showing an icon and message when the cart is empty, with a start shopping button that navigates home.

Build a cart item component in React Native that shows image, title, price, and quantity with increase, decrease, and delete actions on the cart screen.

Build a plus minus quantity control for a cart item with icon buttons and styled text, and prepare on press handlers and Redux Toolkit integration in upcoming steps.

Learn to create a reusable cart item component by passing title, price, image URL, and quantity as props, and wire delete, increase, and decrease handlers via a TypeScript interface.

Create a totals view in the cart screen of a React Native app, displaying order total, taxes, and shipping. Use a separator and price formatting to present a clean total.

Render a cart list with flatlist, map each item by id, image URL, title, and price via spread operator, then navigate to checkout with a continue button and dummy totals.

Create a React Native checkout screen with a header, shadowed inputs, and three fields—full name, phone, detailed address—navigating to the checkout screen, with Yup validation via Hook Form.

Create a React Native profile screen with a reusable profile section button and three options: my orders, language with localization, and logout, styled with touchable elements and icons.

Build the my orders screen by creating dummy order data and an order item component, then render the data with a flatlist and navigate to it.

Install Redux Toolkit and React Redux, create and export a configure store, define root state type, and wrap the app with a Redux provider to prepare for cart reducers.

Create a Redux Toolkit cart slice to manage cart state with an empty items array, four actions (add item, remove item, remove product, empty cart), and store integration.

Learn to implement a robust add to cart action in React Native, dispatching actions, preventing duplicates by updating quantity and sum, and typing the cart state with TypeScript.

learn to implement remove item from cart in a react native app by filtering state items, dispatching a remove action, exporting the action, and updating quantity and price logic.

Implement and test a remove product from cart action in a React Native app, using a filter to delete items, dispatching actions, and wiring up delete and empty cart behaviors.

Use reduce to sum cart item prices with an accumulator and initial value, then compute the order total with taxes and shipping and render items or an empty cart.

Learn to move from traditional useState form handling to React Hook Form in a React Native app, achieving better form state management, validation, and performance while reducing code complexity.

Leverage react hook form library to build an App Text Input controller using a controller with control, name, rules, and render props to manage input state and log form data.

Style the input to show a red border and render a dynamic error message from the error object only when a validation error occurs.

Create validation schemas with Yup for full name, phone number, and detailed address, enforcing required fields, min lengths, and a digits-only regex, integrated with React Hook Form via Yup resolver.

Learn to build a typed React Native form by creating a TypeScript interface for a text input, leveraging React Hook Form values, and using Yup to infer form data types.

Learn to add validation to login and sign-up screens using yup schemas and react-hook-form, enforcing username, email, and password rules with a controller and resolver, before Firebase.