React Native Tutorial for Beginners

Explore how React Native enables a single JavaScript codebase to build Android and iOS apps, offering cross-platform development, live updates, and strong community support for beginners.

Learn to set up a React Native development environment by installing node.js and Android Studio. Create and run your first project on an emulator or device.

Learn to create a React Native app from scratch using Expo and native workflows, install dependencies, scaffold a blank project, and run on Android emulator or iOS simulator.

Learn to create a React Native beginner project, run on Android or iOS simulators, and build with basic reusable components, importing and styling text and view components.

Learn how to use the text component in React Native by importing it, rendering text, and applying styling properties such as font size, color, and background.

Explore how to create and customize buttons in React Native, handle onPress events, display alerts, and manage button states such as disable and color to build interactive apps.

Learn how to replace hardcoded text with dynamic values using the useState hook in a React Native app, changing name and age via a button press and external function.

Use state with text input in React Native to capture name and age, updating the display in real time with styled inputs, placeholders, and keyboard configurations.

Learn to build and render dynamic lists in React Native using state and the map function, assign unique keys, style items, and enable scrolling with a scroll view.

Explore how to display lists efficiently in react native by comparing FlatList and ScrollView, focusing on performance and rendering only visible items.

Learn to make any component clickable in React Native with touchable wrappers, render a flat list, and handle onPress to display item names in the console.

Apply and compare styling methods in react native, including inline styles, multiple style objects, and external stylesheet files, to build scalable, real-life app styling.

Learn to implement alerts in a React Native app that checks user age from text input and shows a two-option drink eligibility alert, allowing 'you can drink' or not.

Display images in a React Native app using the image component. Import assets and show visuals from one to six with a button press.

Learn to implement customizable alerts in React Native with multiple buttons, while collecting name, age, and gender via text inputs and displaying or logging results on submit.

Learn to dismiss the on-screen keyboard in a React Native text input by tapping anywhere outside, using a table without feedback and invoking keyboard.dismiss.

Learn to build a custom button in React Native with styling, replacing the built-in button, and capture a name via text input to show an alert with that name.

Learn to use useEffect to run code when state updates in a React Native component, illustrated by a counter that increments on button press and warns when it exceeds 30.

Learn to use the flex property to divide the screen into parts within a view component and control distribution. See how flex values set ratios and how non-flex items behave.

Learn to implement a modal in a React Native app, open it from the main screen, enter name and age, display the data on the modal, and close it.

Create reusable React Native components by writing a new component file, importing it, and using it across screens; run npm start to see predefined and custom components work together.

Explore using props to pass data between React Native components, build a reusable menu, and create a text input that displays the entered name via props.

Learn how to pass multiple props between components in a React Native app, create text inputs for name and age, render a display component, and conditionally alert based on age.

The lecture introduces the sweet button switch that renders boolean values, demonstrates setting up state, and toggles colors for true and false with on-change behavior.

Learn to build a three-switch settings screen in React Native, toggle location, my, and storage booleans, update the text and styling, and note the possibility of a reusable switch component.

Learn how to build a reusable custom switch component in React Native, import and use it across your app to reduce redundancy and save time.

Create a custom button component in React Native, style it in a separate file, and reuse it with props; build a custom switch and manage state to log actions.

Create a React Native activity indicator that appears on button press, toggling a state for three seconds to simulate loading and then show an alert.

Learn to display grouped data in React Native using SectionList, with section headers and items, and compare it to a flat list.

Create a reusable custom list component in React Native by passing data to render varied item types, reducing repetitive code and boosting usability.

Learn to use the breathable core component wrapper to detect interaction counts when wrapping a button or component, and track presses with state to update visuals.

Learn to implement a refresh control in a scroll view for pull-to-refresh, showing an activity indicator under the status bar, and update the list with API data.

Learn to build an iOS‑only review component anchored to the keyboard as an input accessory, coordinating with a text input and a clear text button to erase content.

Explore how to use the next component's props to style text, including color (hex values), font family and weight, font style, letter spacing, alignment, decoration, and transform options.

Learn how to style the React Native View component with flex, padding, margin, borders, colors, border radii, and opacity to create responsive layouts.

Explore image props for the React Native image component, including resize modes (cover, contain, stretch, repeat, center) and styling options like border color, border radius, opacity, and distinct color.

Explore how touchable components provide Android ripple feedback on press, with IRIS devices showing a different response and note the effect does not work on iOS.

Learn to use the native Android toast API in React Native to display messages. Implement default toasts, gravity positioning (top, center, bottom), and gravity with offset on Android devices.

Detect the device color scheme and apply adaptive themes in a React Native app, and style two inputs for name and age to switch with light and dark modes.

Learn how to use the platform API in React Native to detect the device type, OS, and hardware details like brand, model, and API level.

learn to create a simple fade in and fade out animation in React Native using the Animated library and timing, controlling a view's opacity with two buttons.

learn to apply native device colors in a React Native app using the platform color component, aligning label colors with iOS and Android schemes for a consistent user experience.

Demonstrates building a React Native android drawer layout that slides from left or right, containing login, account info, settings, and sign out, with open, close, and swipe controls.

Build a simple Android drawer in a React Native app, using two text inputs for name and age, and display the entered information by managing state.

Explore the style transform property in React Native to transform components in 2D and 3D, including scaling, translating, rotating, and skewing, with practical examples.

Map the hardware back button in React Native for Android devices using a back handler and useEffect, displaying a confirmation alert before exiting the app.

Learn to implement an action sheet in a React Native app, with three options: generate a random number, a destructive button, and a cancel option, using button indices and simulator testing.

Build a React Native app for iOS using text input, a pressable button, and alerts with long-press options to clear text or cancel.

this lecture demonstrates implementing a prompt in a React Native app to collect a user’s name, manage submit or cancel, and display the result.

Learn how to implement haptic feedback in a React Native app using the vibration API, including on/off controls and a multi-step pattern that repeats, for Android and iOS.

Build a React Native app that uses vibration on press and long press, shows alerts, and manages a text input with state—demonstrated on a physical device via Expo.

Learn to use the community slider in a React Native beginners tutorial, including installation, import, state mapping, value changes, and min/max values, styling, and applying to distance or price scenarios.

Build a React Native app with a text input for your name, an age slider with min and max values, and a submit button that shows a welcome alert.

learn to use the React Native Elements avatar component to display rounded profile pictures in chat-like apps, import from React Native Elements, set image sources, and style with containers.

Learn to integrate badges in a React Native project to convey online status, alerts, and unread messages using avatars, with four status types: primary, success, warning, and error.

Learn to use the react-native-elements button for flexible styling, including container, title, and icons, with solid, clear, and outline types, loading states, and on-press actions.

Explore how to build checkboxes and radio buttons in React Native using native elements and prebuilt components, manage state with onPress, and render hobby lists with map and flat list.

Import the input component from react native elements to replace standard text inputs, with placeholders, icons, secure text, and container styling for email and password fields.

Learn to implement checkboxes and radio buttons in a React Native form. Manage name input and single-choice gender selection with an alert on submit.

learn to use a native overlay component in React Native, manage name and age inputs, toggle visibility, and customize the overlay with styling for a flexible, full-screen or backdrop experience.

Explore creating pricing cards with free and premium packages in a React Native app, including titles, prices, features, and enroll or buy buttons, with basic alert feedback.

Learn to implement a floating action button in React Native that stays fixed on screen with side placement and icon, enabling press actions to display user input via alert.

Explore building an expandable speed dial floating action button in React Native, manage open state, customize icons, and add multiple actions with React Native Elements.

Learn to build a social icons component in React Native, creating share buttons for Facebook, Twitter, WhatsApp, GitHub, and more using a social networking library, with styling and onPress handlers.

Build a Netflix-style poster card in React Native with an image, overlaid play button, and optional title and plot text; learn to handle onPress events to preview or play content.

This lecture teaches building a bottom sheet in React Native, with an input and three actions—submit, clear, and cancel—handling visibility, alerts, and Android-specific styling.

Learn to implement React Navigation with stack and bottom navigators in a React Native app, creating home, category, product, and product info screens and handling back navigation.

Learn to implement a login flow in react native with email and password inputs and hardcoded credentials, navigate to product categories, and reset the navigation stack to disable back navigation.

Learn to set up a React Native project and customize screen headers across home and product category screens, including default titles, back button visibility, header styles, and global header options.

Learn to pass parameters between screens during navigation in a React Native app by submitting registration data on the register screen and displaying it on the account details screen.

Demonstrate passing a registered user's name and avatar from the register screen to the product categories screen header, displaying the avatar and name in the header.

This lecture shows building a react native app with home and product category screens, passing name and image between screens, and updating the profile picture via a prompt.

Set up a bottom tab navigator in React Native by installing the navigation library, creating home, user, and product screens, and wiring a navigation container with multiple tabs.