React Native: Mobile App Development (CLI) [2026]

Learn to set up a macOS iOS React Native CLI development environment by installing homebrew, node, watchman, Xcode, and Cocoapods, then initialize and run a new project on iOS.

Set up android development environment on macOS for React Native CLI by installing JDK, Android Studio, configuring Java home and Android home, and running the app with npx react-native run-android.

Set up a Windows React Native CLI development environment by installing Chocolatey, Node, JDK, and Android Studio, then configure Android SDK, Android Home, and PATH, and run an Android emulator.

Navigate cross-platform React Native development for iOS and Android with Windows-focused guidance, a social media app project, and attached documentation, resources, and Q&A support.

Learn how code editors enable consistent React Native development by installing ESLint and Prettier in Visual Studio Code, configuring on save formatting, and maintaining code quality.

Explore JSX, a JavaScript XML syntax extension that lets you write HTML-like UI in JavaScript for React Native. The JSX transformer compiles JSX into React.createElement during the build, improving readability.

Learn to create new React Native projects from scratch using the CLI, set up iOS and Android builds, run the Metro bundler, and verify logs with dev tools.

Explore React Native CLI project setup, import text and safe area view components, and learn how safe area view keeps content visible on devices; preview ai assisted coding with Cursor.

Refresh your JavaScript syntax, optional, to solidify variable declarations, functions, data types, let and const, arrow functions, objects, arrays, destructuring, and APIs for a smoother React Native journey.

Explore the basics of JavaScript, including weak typing, object-oriented design, primitive versus reference types, and how runtime flexibility can introduce errors, with references to TypeScript and NodeJS.

Explore core JavaScript features like variables, functions, data types, booleans, and scoping in a hands-on project, using var declarations and console logs to call functions with arguments and reveal results.

Learn the basics of next generation JavaScript syntax by using let for variables and const for values that never change, avoiding var and understanding scoping and assignment errors.

Explore arrow functions as a shorter, more concise way to declare JavaScript functions and handle this keyword. See single-statement syntax and no-argument forms through practical examples.

Create and manipulate JavaScript objects with curly braces and key value pairs, using a person example to show properties and a greet function; compare arrow vs traditional functions for this.

Learn JavaScript arrays, defined with square brackets, supporting mixed data types and nested structures, then iterate with for...of and apply map, filter, and slice to transform and subset.

Explore why arrays and objects are reference types in JavaScript and how const can still be edited. Compare primitive types like numbers and how memory addresses govern updates.

Explore how the spread and rest operators in JavaScript enable immutable array and object copying, adding new values to copies, and merging function arguments into arrays.

Destructuring in JavaScript simplifies extracting data from arrays, objects, maps, and sets, including rest and spread patterns, enabling concise, readable code with practical examples.

Master asynchronous JavaScript with promises, async/await, and fetch for API calls, using GitHub user data examples to demonstrate handling success, failure, and errors.

Strengthen your JavaScript fundamentals with a refresher on syntax, variables, functions, data types, arrays, objects, destructuring, and APIs to build a solid foundation for React Native.

Explore styling in React Native to transform apps into visually stunning, responsive designs by mastering borders, margins, paddings, z-index, positioning, shadows, and text styles.

Explore borders in React Native by applying border width, color, and sides, customizing rounded corners with border radius, and choosing border styles such as solid, dotted, or dashed.

Explore how margins control spacing around elements in React Native to create clean layouts, and apply universal or side-specific margins with live changes in the Hello World app.

Learn how paddings create inside spacing and margins create outside space in React Native, including vertical and horizontal padding and concrete overrides.

Learn how React Native positions components with relative and absolute positioning, including left/right/top/bottom and zIndex for layering and basic animation.

Explore styling text in React Native by adjusting font size, color (including hex values), and font family such as Arial. Set font style, weight (100–900), line height, and text align.

Master borders, margins, padding, positioning, and text styles to build the foundation of design and styling in React Native, enabling stunning, functional, and responsive apps.

Explore the foundational concepts of React Native, starting with components as reusable building blocks and mastering event handling to create interactive, dynamic mobile apps.

Learn how a component in React Native represents a piece of UI. See how reusable components render UI, handle interactions, and enable testing and debugging across the app.

Learn how to create and apply a style sheet in React Native to style components, replace inline styles, and reuse styles for a consistent app design.

Explore the view component in React Native to structure layouts, create grids or stacks, style containers with style sheets, and organize nested components using flexbox.

Explore how props pass dynamic values to React Native components, define types with TypeScript, and set default values to customize reusable UI components.

Master event handling in React Native by wiring onPress on text components to a handlePress function, displaying alerts, and creating interactive interfaces with text inputs and swipe gestures.

Review how components enable reusable, modular app structures, apply styling and event handling to create responsive React Native interfaces, and prepare you for deeper development in this course.

Explore how React Native hooks enable state and lifecycle features in functional components, making apps dynamic and simplifying reusing state logic and testing components.

Learn how the useState hook in React Native manages component data, updates values on press, and triggers re-renders, including the initial value, setter function, and a simple click counter.

Understand how the use effect hook runs on triggers, tracking variable changes with a dependency array, to run actions like console logs when content updates.

Understand the useRef hook in React Native, which stores a persistent current reference to components, avoids re-renders, and enables focusing a text input via its current element.

Learn how use context enables global theme data sharing across components, avoiding prop drilling, and build a theme provider to toggle between dark and light modes with a contextual toggle.

This lecture demonstrates creating a custom hook useCounter in React Native to manage a counter with increment, decrement, and reset actions, highlighting reusability and encapsulation across components.

Master core hooks in react native, including useState, useEffect, useRef, useContext, and custom hooks, to manage state, side effects, and context with cleaner, scalable code.

Discover how class-based components differ from functional components with hooks, explore state, events, and lifecycle methods, and learn when to choose each tool for React development.

Learn how class-based components in React Native extend the React Component class, use constructor and super to initialize props and state, and render output with a lifecycle-ready structure.

Explore how React Native class-based components use state to drive behavior and rendering via onPress. Update state only with setState to trigger a re-render after a click reveals a name.

Learn to use React Native class-based lifecycle methods—componentDidMount, shouldComponentUpdate, getSnapshotBeforeUpdate, componentDidUpdate, and componentWillUnmount—to manage mount, update, and unmount.

Compare functional components and class-based components in React Native, focusing on state, props, and lifecycle methods. Learn how hooks like useState and useEffect replace lifecycle behavior for dynamic UI.

Explore class-based components in React, manage state and events, and leverage lifecycle methods, then compare with functional components and hooks to weigh trade-offs in React Native development.

Learn how to use the image component in React Native to display local and remote images, handle loading errors, and control sizing with resize modes like contain and stretch.

Explore how to build and customize the text input component in React Native, covering value handling with state, placeholders, password fields, and keyboard and return key options.

Explore implementing a ScrollView in React Native to display large data on mobile screens, with vertical and horizontal scrolling, indicators, content container styling, and onScroll handling.

Explore how the React Native switch component works as a toggleable on-off control, its Android and iOS styling, and a practical example using state, onValueChange, and keep me logged in.

Explore flexbox in React Native to build flexible, responsive layouts, and master flex properties, direction, and alignment to control size, position, and spacing.

Build a solid foundation in React Native by mastering essential components such as image, text, inputs, scroll view, buttons, switches, font icons, and flex box to create interactive user interfaces.