React Native - Complete Guide + E-Commerce + Interview Q&A

Create a fresh Expo project, then explore core components, such as view, text, status bar, image, text input, and scrollview, as building blocks powering a React Native app.

Explore core components in React Native, the fundamental building blocks that render native UI on iOS and Android, plus how native and community components extend capabilities.

Understand the view component in React Native, a container mapping to native views that supports styles, accessibility, flexbox, and touch handling; display text with the text component and nest views.

Explain the view component as the basic building block of the React Native UI, acting as a container for components and enabling nesting, with strings not allowed as direct children.

Master inline styling in React Native by using the style attribute on a text component with camelCase properties like fontSize and backgroundColor, noting that dimensions are unitless density-independent pixels.

Apply inline styling in React Native using the style attribute and a JavaScript object. Use camelCase properties like backgroundColor and fontSize, and separate multiple properties with commas.

Learn to organize React Native styling by using style objects and the stylesheet.create method, applying styles via style attributes and the styles object for cleaner, reusable code.

Prefer stylesheet.create for React Native styling to get valid value suggestions, optimize by sending a single stylesheet to the native platform, and improve maintainability, reuse, and style inspection.

Learn the basics of event handling by configuring an event listener on text and other components, passing a function without parentheses, and displaying an alert when pressed.

Learn how binding a function with on press in React Native can trigger on render when parentheses are used, causing an alert on load and no output on subsequent clicks.

Learn how to pass parameters to a React Native event handler by binding onPress to a single display words function, using an arrow function and conditional logic.

Explore the button component in React Native, using the title property and onPress to display a message, and learn to enable or disable it across iOS and Android simulators.

Explore how the color property styles a button in React Native, highlighting iOS text color versus Android background color, and learn styling options to control text color.

Explore how state serves as a component memory, tracking changes and what to display in React Native. Increment a counter with useState, starting at zero and updating on each press.

Decrement counter state with a decrement button and a decrement value function that updates the counter minus one, and learn why using two functions for one state is not ideal.

Update the counter with a single function that takes a value to decide increment or decrement. Call the update counter in the on press handlers with the appropriate parameter.

Use a callback in the useState setter to update state based on the previous state, ensuring the most up-to-date value during asynchronous updates in React and React Native.

Update state using the previous state in React Native to handle asynchronous updates. Learn why the callback form of the useState setter preserves the latest state during updates.

Learn to manage array state in React Native by initializing a todo array, rendering with map, and safely updating it with the spread operator or a callback to add tasks.

Learn to manage an object as state with use state by copying the previous object, updating age with spread, and adding email, then display values with Object.entries.

Explore how the use state hook returns a state value and a setter function, sets initial state, and updates state with spread operator for objects or a previous state callback.

Explore the switch component in React Native, wiring a boolean state with onValueChange to toggle on/off, and conditionally enable or disable a text input.

Customize the switch component in React Native by adjusting thumb color, track color, and iOS background color, using on/off logic and style transforms like scale x and scale y.

Learn to control a React Native switch component's state with a boolean value via value and onValueChange, and customize its appearance using trackColor and thumbColor properties.

Learn to use the React Native image component to display images from external URLs and local assets, set height and width with style, and render assets via require.

Explore image resize modes in React Native, including center, stretch, contain, repeat, and cover, using a 150x150 container with flex and border to compare outcomes and default behavior.

Explore image styling in React Native, using blur radius to adjust blur, defaultSource as iOS placeholder, and fade duration for Android with a sample png asset.

Explore how the React Native image component uses local images via require and remote images via URI, and review resizeMode options—cover, contain, stretch, repeat, center—and blurRadius.

Learn to implement the React Native text input component for forms and search bars, style it, and track user input with useState using value and onChangeText.

Explore key props of the text input component, including placeholder hints, secure text entry for masking passwords, and keyboard type for numeric input.

Explore autocorrect on by default in React Native text input, disable it by setting autocorrect to false, apply autoCapitalize options like words, and enable multiline with styling.

Explore how to use the text input component in React Native, including keyboard type options, secure text entry for passwords, and multi-line inputs with height styling.

Shows how to import ScrollView from React Native and replace the view with scroll view to enable vertical scrolling of images and text.

Implement a horizontal scroll view in React Native by configuring a view inside the scroll view, styling with flex row and a gap, and resizing images to 200 by 200.

Enable paging on the ScrollView to snap between full-screen views using dimensions.get window, and note that for large data sets FlatList is recommended.

Create an address book app in React Native using text inputs for name, phone, and email, managing state with an address data object, and rendering entries from the address book.

Learn to style a React Native address book by using a fixed 75% height view, a scroll view for addresses, added images, and bold, spaced text with a row layout.

Introduce delete functionality for address book records, controlled by a switch. When enabled, display a delete button per item and filter the array to remove the selected item.

Explore the FlatList component in React Native, compare its performance with ScrollView for large lists, and implement data, renderItem, and keyExtractor for smooth scrolling.

Implement lazy loading in FlatList by loading more items when the end is reached, with a header and a footer loader and a 2-second delay.

Explore the section list component, grouping data like a contact book, comparing it to flat list, using sections property, render section header, and sticky headers for grouped items.

Explain the differences between flat list and section list, when to use each for ungrouped or grouped data, and how data and keyExtractor work.

Explore the core navigation types in mobile apps—stack, tab, drawer, and file-based navigation for Expo—understanding patterns and how to handle navigation actions.

Master expo router's file-based routing in React Native by creating routes from the app directory, enabling cross-platform navigation across Android, iOS, and web.

Learn how to implement file-based routing with expo router in a JavaScript project by configuring expo app, app.json, and app directory, then run on web to show the root route.

Explore Expo Router as a file-based navigation system for React Native, inspired by Next.js, and learn how folders and files define nested routes and reset project.

Navigate between routes in mobile apps using Expo router's link component, linking settings and details from home. See basic routing work without a layout, with underscore layout covered next.

Explore configuring route layouts with underscore layout.js in the app directory, apply custom layouts to nested routes, and share a header and other UI across screens.

Use underscore layout files as shared UI for child routes, providing a navigation structure; learn how layout differs from regular files and centralize navigation with stack, tab, or drawer components.

Explore stack navigation in React Native and learn to customize headers, titles, and back buttons through global and per-screen options using a root layout and stack component.

Customize the back button globally for all screens by rendering a custom header left component in screen options, wiring navigation.goBack, and removing it on the index page.

Customize the header and back button on an individual screen by overriding options, set the detail title and green background with yellow tint, and use navigation.popToTop to return home.

Customize the header and back button from within a screen using the use navigation hook and navigate.setOptions to the settings screen, with a green yellow background and red header tint.

Explore how the stack navigator manages screens and supports forward and backward navigation. Hide headers, differentiate go back and pop to top, and customize the back button with header left.

Explore tab navigator patterns in React Native using the Expo router, build a bottom tab bar, configure a tab layout, and create multiple tab pages with automatic tab buttons.

Customize bottom tab navigation in React Native by styling tab buttons, adding icons with Expo vector icons, and configuring per-tab options such as title, icon, and colors.

Set the default tab by designating the first screen in the tabs component or index file, and customize appearance in Expo Router via screen options, including hiding tabs with href.

Implement drawer navigation using React Navigation drawer with a slide-out hamburger menu across the app, wrapped in gesture handler route view, and expo install React Native Gesture Handler and Reanimated.

Customize the drawer globally or per item in the Expo router by adjusting label style, font weight, and size, and set the drawer position to right with font awesome icons.

Explore configuring the draw in React Native by setting the draw position to the right and adding icons to draw items with the draw icon property.

Explore nested navigation by embedding a stack navigator inside a tab navigator, adding a blogs stack with index and login screens, and wiring a login link in the draw menu.

Learn how to robustly handle errors in React Native, from try-catch local error handling to global error handlers and error boundaries, display user-friendly messages, and manage API errors.

Understand the three error types in React Native: syntax, runtime, and logical errors, and how the framework handles them, with examples of syntax issues, runtime crashes, and illogical results.

Use a try-catch block to wrap code and prevent crashes, show a user-friendly error message, and leverage the finally block for code that runs always in React Native.

Explore handling unexpected runtime errors in React by building an error boundary as a class component with getDerivedStateFromError and componentDidCatch, wrapping the UI to prevent crashes.

Demonstrate handling API errors with try-catch, fetch, and response.ok checks to gracefully recover from network failures, timeouts, and invalid data in an e-commerce app.

Display user friendly error messages for API failures by managing two states (result and error), validating data as an array, and handling errors in the view, including invalid data format.

React Native uses ErrorUtils as a global error handler to catch uncaught exceptions and fatal errors. Set up the global handler with useEffect and test by throwing errors.

Distinguish runtime, syntax, and logical errors; use try-catch and error boundaries in React Native; implement generic UI messages, server-side error logging, and global error utils for graceful recovery.

Explore platform specific modules in react native to manage ios and android differences, enabling push notifications with fcm and apn, permissions, and hardware interactions for a seamless cross-platform experience.

React Native uses a platform module to detect the running platform and render the message accordingly. The example shows Android on mobile and web.

Explore platform specific styles in React Native by applying conditional styling and platform.select to tailor font sizes and colors for iOS and Android.

Learn to implement platform specific extensions by creating files outside the app directory for iOS, and configure the app to load the correct profile component via the metro bundler.

Explore setting up Firebase, a Google Cloud toolkit for authentication and Firestore to perform CRUD operations via http, including creating a Firebase project, configuring a web app, and testing endpoints.

Explore the fetch API for browser http requests like get, post, put, and delete using promises for clean, readable code. Learn syntax, response handling with then, and JSON parsing.

Learn how to use fetch to post json data to a Firestore NoSQL endpoint, creating new records, handling responses, and errors with a complete example and verification in the database.

Create a React Native user form for name and email, manage state with useState, and save the data to Firestore on button click, with immediate verification.

Add real-time form validation in a React Native post data flow by disabling the submit button when name or email is blank and showing red validation messages.

Use the fetch API to perform a get request and retrieve user data from the users endpoint, display total records, and update the UI for the next lecture.

Fetch records via the get API, transform the response into a list of objects with id, name, and email, and display them in the React Native FlatList on screen load.

Learn to update records with a patch request in React Native, using the Firestore document id, sending updated fields, and observe full-document replacement before partial updates.

Update a Firestore record partially by specifying the property to update in the endpoint, such as name, using the update masked fields path to change only that field.

Wiring an edit button in a React Native app to populate a form enables dynamic record updates. Build a patch query from object keys and refresh the list after update.

Implement delete operation in React Native using HTTP DELETE to remove a user by id from Firestore, with error handling, per-record delete button, and a success alert.

Add a delete button to each list item to remove its record from the database using its id, and then refresh the list by calling the get users function.

Discover axios, a promise-based HTTP client for JavaScript and Node.js that runs on client and server sides, with automatic JSON parsing and features like cancellation and timeouts.

Create a reusable Axios instance to standardize base URLs and headers for all requests, simplifying CRUD operations in your React Native e-commerce app.

Convert fetch-based CRUD operations to axios by adding a post function using the axios instance, posting to /users with the body data, and handling JSON responses.

Fetch data with axios using the get method, rename the function to axios_getusers, and rely on response.data since axios returns json.

Compare fetch and Axios syntax, implement Axios patch to update a user using the same endpoint and body data, handle responses and errors, and reset edit mode after updating.

Learn to implement delete operations in a React Native CRUD app using Axios. Compare Axios with fetch, handle errors, and replace the delete function to enable seamless user removal.

Learn how React Native uses a flexbox-based layout to build responsive mobile screens, covering flexDirection, justifyContent, alignItems, flex, padding, and margin for header, content, and footer.

Learn to build a sample React Native layout with header, content, and footer using flex; set styles, apply flex values (1, 3, 1), and understand proportional space distribution.

Explore how flex direction dictates element placement in React Native layouts, from column to row, row reverse, and column reverse, then use flex wrap and gap for spacing.

Understand the flexbox CSS layout model for one-dimensional alignment, spacing, and distribution of items. Master the main flex container properties: display flex, flex-direction, align-items, justify-content, align-content, and flex-wrap.

Explore how justify content distributes space around and between elements to improve UI layout, covering flex-start, flex-end, center, space-around, space-between, and space-evenly.

Explore how to align and distribute spaces in flex layouts for placement, using align content and align items with justify content, flex wrap, and single versus multi-line examples.

Compare align content and align items in a flex container, and describe how justify content with space between places first and last items at the ends while distributing others evenly.

Explore gestures like tapping, swiping, pinching, and dragging to create natural mobile experiences using Pressable and Touchable components, plus React Native Gesture Handler for pan and rotation.

Explore tap and press gestures in React Native by building a Pressable button that updates a counter and comparing it with TouchableOpacity for visual feedback.

Learn how to make a component draggable with a pan gesture for drag-and-drop, scrolling, and camera panning using React Native gesture handler and reanimated.

Explore pinch gesture in React Native to zoom in and out of documents, images, and maps, using a shared scale value and an animated style in a gesture detector.

Learn to implement a rotation gesture that updates a shared rotation value and applies a rotation transform in radians via a rotation animated style using the gesture decorator for rotate.

Learn to combine multiple gestures, like pan, drag, and pinch, on one element using the gesture dot simultaneous method, then apply the combined gesture to the animated view style.

Learn how to use Expo camera and Expo image picker to capture and select images from the local library, with image picker offering a simpler way to access photos.

Install and configure the Expo image picker, set camera and photo permissions, and update app.json with plugins and a camera permission message for future camera usage.

Launch the camera with expo image picker by pressing a button in app.js, using an async click image handler that calls launchCameraAsync and returns data; Android works, iOS needs permissions.

Learn to manage iOS camera permissions in React Native using the Expo image picker use camera permissions hook, handle status undetermined, denied, and granted, and launch the camera when granted.

Explore Expo image picker camera options, including allows editing, aspect ratio, camera type, quality, and video settings, and configure launch camera async with options.

Extract the image uri from the camera launch result and store it in state. Render the image below the button with the image component using that uri.

Launch the image library to open the device photos, select an image, and render it in your app using launch image library async and related options.

Enable multiple image selection in the image library async to allow up to three images and display them by mapping the assets array to image uris in a scrollable view.

Set a dynamic selection limit for the image picker using a numeric input, parsing input to a number, and updating the UI while handling empty input gracefully.