Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Native & Expo: Build a Modern eCommerce App Fast 2025
Rating: 3.5 out of 5(5 ratings)
44 students

React Native & Expo: Build a Modern eCommerce App Fast 2025

Design and Develop a Full Stack Stunning eCommerce App with React Native, Expo, MongoDB, Express, Nativewind.
Created byRaghunadh Hital
Last updated 1/2025
English

What you'll learn

  • Learn to build a pixel-perfect eCommerce app frontend inspired by professional Figma designs using React Native and Expo.
  • Gain proficiency in using React Native’s core components and Expo libraries to craft modern, responsive interfaces.
  • Build seamless multi-screen navigation using React Navigation to enhance the app's user experience.
  • Add interactivity with animations, modals, and dropdowns to create a dynamic user experience.

Course content

1 section • 25 lectures • 5h 55m total length

  • Introduction11:50
  • App Setup for Development16:58
  • Ecommerce App Github Repository0:01
  • Setup Nativewind6:44
  • Setup Fonts21:02

    Delete the assets folder, install the provided assets (fonts, icons, images), then configure Rubik fonts and expo/tailwind to load fonts and hide the splash screen.

  • Setup Splash Screen4:00

    Configure a splash screen in a React Native Expo app using an asset image, resize mode contain, background color, and enable new architecture with auto status bar.

  • Developing Custom Components17:38

    Develop and reuse custom button and input components in a React Native and Expo eCommerce app. Create a shared components folder, define props, and enable dynamic widths and optional icons.

  • Developing Tab Navigational Bars34:46
  • Developing Login Screen15:09
  • Developing Password Screen7:55
  • Developing Register Screen10:34
  • Developing Reset and Email Sent Screens11:31
  • Developing On-Boarding Screens11:11
  • Developing Home Screen28:55

    Build the home screen by wiring header, search bar, and horizontally scrollable categories, then showcase top selling and new in products with a safe area aware layout.

  • Developing Categories Product Screen25:44
  • Developing Orders Screen27:39

    Build a three-screen orders experience in React Native and Expo, with an orders screen, a no orders screen, and an order tracking screen with a stepper and shipping details.

  • Developing Individual Product Detail Screen20:35
  • Developing Cart Screen8:32
  • Developing Checkout Screen8:52

    Learn to build a dynamic checkout screen in React Native with Expo Router, including header with back button, shipping address, payment method, cost breakdown, and a place order flow.

  • Developing Order Success Screen8:26
  • Developing Profile Screen6:21
  • Developing Address Screen4:50
  • Developing Favorites Screen9:03

    Develops the favorites and wishlist screens for a modern React Native Expo eCommerce app, including header navigation, safe area views, and interactive list items.

  • Developing Notifications Screen12:56
  • Developing Category Search, Filter Logic Screen24:12

    Develop a category search and filter logic screen for a React Native Expo ecommerce app, implementing dynamic search results and a filter drawer with sort, price, gender, and deals.

Requirements

  • Familiarity with JavaScript fundamentals, including ES6+ syntax, is recommended.
  • A foundational understanding of React concepts like components, props, and state will be helpful.
  • Prior installation of Node.js and npm is required to set up the development environment.
  • A willingness to explore React Native and build visually appealing apps!

Description

Are you ready to create a visually stunning and modern eCommerce app? In this course, you’ll learn how to design and develop a professional mobile app frontend using React Native and Expo. From translating Figma designs to building reusable components, this course provides everything you need to create a responsive, interactive, and user-friendly app.

This course is ideal for developers and designers who want to bring their ideas to life or start a career in mobile app development. Whether you’re a beginner or have prior experience, the step-by-step approach ensures you can follow along and build something amazing.

What Makes This Course Unique:

  • Figma-to-App Workflow: Learn how to take professional designs from Figma and implement them into code.

  • Focus on Frontend: This course focuses entirely on crafting a beautiful and functional UI, preparing you for future backend integration.

  • Hands-On Experience: Build real-world components such as product listings, cart interfaces, and navigation menus.

  • Modern Techniques: Utilize the latest React Native and Expo tools to create responsive layouts and engaging animations.

What You’ll Learn:

  • How to set up and configure your development environment with Expo and React Native.

  • Best practices for implementing professional UI/UX designs in your app.

  • Building reusable components for scalability and maintainability.

  • Creating interactive features like modals, dropdowns, and animations to enhance the user experience.

  • Using React Navigation to implement seamless navigation between pages.

  • Structuring your codebase for easy backend integration in the future.

Why Should You Take This Course?

  1. Practical Skills: Learn by doing! This course walks you through building a real eCommerce app, step by step.

  2. Career Opportunities: With React Native’s growing popularity, these skills are in high demand among employers and clients.

  3. Foundation for Full-Stack Development: While this course covers the frontend, it prepares you for backend integration, which will be added in future updates.

  4. Flexible Learning: Suitable for self-learners, students, and professionals at any stage of their career.

Who This Course is For:

  • Developers looking to expand their skills in mobile app development.

  • UI/UX designers who want to bring their Figma designs to life.

  • Beginners with basic knowledge of JavaScript and React who want to build their first professional app.

  • Entrepreneurs or freelancers who want to create their own eCommerce apps.

By the end of this course, you’ll have a fully designed, responsive eCommerce app frontend ready to impress users, clients, and employers.

Future Updates:

This course will be updated to include backend development, covering user authentication, database integration, payment gateways, and more. Stay tuned to take your app to the next level!

Take the first step in building your dream eCommerce app today. Enroll now and start creating!

Who this course is for:

  • Aspiring Mobile App Developers
  • Frontend Developers
  • UI/UX Enthusiasts
  • Entrepreneurs and Freelancers

Report abuse