React Native Step By Step for Beginners | E-commerce App

Install node on mac using Homebrew, verify with node -v, and install watchman to aid debugging.

Download and unzip VS Code for Mac, then launch it to get coding started. You'll begin with a fresh project since no files are present yet.

Install Android Studio to create an emulator and run code in VS Code; download for Apple or Intel chips, accept licenses, and finish setup to launch the emulator.

Create and run an Android emulator in Android Studio, install Android SDK tools, detach and start the emulator, and prepare to run a React Native app with npm run android.

Create a new expo app named react native e-commerce from a blank template, initialize the project with npx create expo app, then open and explore files in VS Code.

Understand package.json by examining project name, version, entry point app entry.js, scripts, dependencies, and dev dependencies, including babel and the private flag.

Explore Babel, a JavaScript compiler, and how its configuration enables React Native code to run on modern and older devices, with caching via API dot cache and app.json.

Configure the app.json file to set the project name, slug, and orientation. Specify the app icon path assets/icon.png, select light mode, and note the splash screen and iOS tablet support.

Run react native app on android or ios start metro bundler, then inspect app.js to see a functional component that imports status bar, stylesheet, text, and view and returns JSX.

Learn how export default works in a React Native functional component, including how to export, import from React Native, and when to use curly braces in imports.

Discover how alignItems, justifyContent, and flex control layout in React Native by centering text within a view, exploring horizontal and vertical alignment, and using flex:1 to allocate space.

Explore how flex, view, and text work in React Native, using flex values like 1 and 0.5, background colors, and alignment properties such as flex-start, flex-end, space-between, and justify content.

Explore how flex direction controls layout in React Native, showing the default column arrangement and how switching to row changes alignment using view and text components with style properties.

Learn how to structure layouts in React Native by using parent and child views, applying column or row flex directions, nesting views, and placing text content inside.

Explore how flex and nested views control space and alignment in React Native, using flex values like 1, 0.5, and 0.3, with center alignment via align items and justify content.

Learn how to separate styles in React Native by moving inline styles into a StyleSheet using StyleSheet.create, and reference named objects like container, top box, and bottom box.

Create your first React Native component by defining a function that returns JSX with view and text, then render it inside the main app component.

Organize a React Native app by separating components into a new source folder called components, name files using Pascal case like welcomeView.js, export default WelcomeView, and import it in app.js.

Learn to style a React Native ecommerce app by applying border radius, margins, padding, and color to views and text, adjusting font size to highlight content and create spacing.

Learn to build a reusable text style in React Native by creating a style object, passing color and margin top as props, for consistent typography.

Learn to implement clickable events with touchable opacity in React Native, handle on press, log taps, and add icons using Expo vector icons, including styling with margins, color, and size.

Build a responsive search bar in React Native by combining an icon and a TextInput, using a placeholder, and styling a row layout with flexDirection, height, margins, and alignment.

Demonstrates using SafeAreaView, wraps a text input for styling, adds a camera outline Ionicons, and styles a search button with flex centering and border radius.

Discover how to refactor a React Native welcome component by centralizing styling in a theme.js file with colors and sizes, and apply them across wrappers, borders, margins, and icons.

Create a React Native home carousel component that displays an image from assets using require with a relative path, styling width, height, resizeMode, and overflow hidden for rounded corners.

Understand how FlatList works in React Native by using a data array to render each item with a component, and rely on keyExtractor for a unique key.

Learn to write concise arrow function returns in React Native using flat arrows for one-line JSX, with or without braces and explicit return for UI display.

Make flatlist render dynamic data by passing an item prop and displaying item.title. Use a key extractor with item.id to improve caching and rendering performance.

Learn to display images with React Native's FlatList by wiring image data, a key extractor, and horizontal paging, including sizing with dimensions, resizeMode, and styling for responsive image carousels.

Learn to fix scrolling issues in a React Native slider by enabling snap to center and adjusting the deceleration rate to fast for smoother, faster snapping.

Refactor the code by moving the welcome and home carousel into a new screens/home screen.js, creating a clean home screen with safe area view, imports, and groundwork for navigation.

Create a header with text and an icon inside a home heading component, using touchable opacity and styled with style sheets and theme sizes; refactor styles into separate files.

Install and configure React Navigation native and stack navigator, register home and dummy screen in a navigator container, and navigate between screens with useNavigation and nav.navigate.

Install the ES7 react native snippet plugin to generate a functional component, rename the dummy screen to product list screen, and ensure correct imports.

Learn to display images with FlatList in a React Native e-commerce app, using SafeAreaView and a local product list, with a renderItem function mapping item.id to image paths.

Learn to display images in a React Native column using the image component with source from item.path, wrap it in a view, and apply width and height styles.

Learn to display images correctly in a two-column React Native layout by styling with StyleSheet, handling restarts when changing columns, and applying proper image containers and margins.

Learn to create an image grid with text captions in a React Native e-commerce app, applying image sizing, borders and border radius, and dynamic data for titles and prices.

Learn to separate style objects into a dedicated product card component and style file for a React Native e-commerce app, using theme colors and item props for a reusable UI.

Install and load custom fonts in a React Native Expo app using the useFonts hook to load Roboto regular and bold, and surface a splash screen while fonts load.

Learn how hooks and callbacks control font loading and splash screen behavior in a React Native app, using useCallback, onReady, and splash screen hide logic.

Learn how to load fonts with useFonts and update fontFamily to Roboto bold, while handling dependencies and a splash screen, then simulate image and data loading with a loading screen.

Explore managing state with useState and triggering effects with useEffect in React Native, including a loading flag, initial true, and timed updates with cleanup to prevent memory leaks.

Demonstrate loading state and conditional rendering in a React Native e-commerce app by showing a loading text, then rendering products after a simulated data fetch using useEffect.

Discover how useEffect with dependencies controls invocation to run once with empty dependencies, preventing crashes and enabling smoother page transitions and loading indicators in a React Native e-commerce app.

Install the Lottie React Native SDK, add a jsons folder, download a lottie json, and configure a lottie view with the correct path, width, height, and autoplay.

install and configure bottom tab navigation in a react native app using react navigation bottom tabs. create the navigator and set up the home screen with icons and theme colors.

Create a profile screen and cart screen within a bottom tab navigator, configure icons, and apply basic styling and screen options to demonstrate navigation and UI setup in React Native.

Learn to manage tab focus in a React Native e-commerce app by using a focused prop and a ternary operator for icons, reflecting focus on home, cart, and profile.

Create a dedicated home product hook to fetch data, manage loading and error states, and modularize code with a hooks folder for a cleaner home product list screen.

Learn how to build a skeleton for calling a hook in a React Native e-commerce app using promise and resolve with useEffect, simulating network requests and handling loading and errors.

Replace the loading icon with a lottie animation, fetch home product data, and render a flat list showing each item's title and price, reusing the product card component.

Master how to implement a scroll view on the home page, manage safe area, and avoid nesting scroll views with flatlist to prevent performance issues, preparing for a better solution.

Refactor a React Native home screen by replacing the scroll view with a FlatList, handle loading and errors, and use React fragments to render multiple components inside the list.

Learn to make list items clickable with touchable opacity, navigate to a product detail screen, and access passed item data with the use route hook to show title and price.

Understand useRoute by examining the route object in React Native, including key, root name, and params like item, and how mobile routing differs from web URLs.

Explore displaying and styling images in a React Native e-commerce app by reusing card component styles, applying extra styles through style arrays, and centering images for a polished UI.

Create a dedicated product.style.js, import theme colors and sizes, center the image, and lay out the title and price in a responsive row with spacing.

Install the React Native stock star rating plugin, import and configure the rating input, and manage a five-star rating with useState, styling, and a 4.9 rating display.

Style the product title and price in the e-commerce app with font size and font family inside style objects, then load Roboto fonts in app.js to render them correctly.

Learn to build a rating row in React Native by adding plus and minus buttons with touchable opacity, arranging elements in a row, and applying spacing and styling.

Discover how to implement a useState counter in a React Native e-commerce app, using a utils product helpers module for increment and decrement with per-page state and on-press events.

Learn how a count state variable acts as value getter and updates via a set function with plus minus operations, with React Native handling the changes for your e-commerce app.

Add a description section with a title and text to display product details. Style the description with a wrapper, margins, font sizes, Roboto weights, bold and regular, and justified text.

Show location text with an icon in a flex row, using justify content space-between, padding, and background color, leveraging ionic and material icons for a dynamic e-commerce app.

Create a cart row UI in a React Native ecommerce app, featuring a favorite, buy, and add-to-cart buttons with vector icons, touchable opacity, and responsive styling.