Skip to main content

Create an E-Commerce App for iOS and Android in Minutes

· 4 min read
Beniamin Marcu
Full Stack Developer

Build a fully functional e-commerce app for iOS and Android in minutes using our premium React Native e-commerce template. This guide walks through setup, Firebase integration, Stripe payments, and publishing to app stores.

Overview​

Here's the complete roadmap to create your e-commerce app:

  1. Configure your development environment
  2. Install npm packages
  3. Run the app on Android
  4. Run the app on iOS
  5. Link your own Firebase account
  6. Create categories & products in Firebase
  7. Set up Stripe Payments
  8. Publish app to App Store & Google Play

Configure Your Development Environment​

To run React Native apps on iOS and Android, install these developer tools:

For a comprehensive setup guide, see our React Native Development Environment documentation.

Install npm Packages​

Open a Terminal, navigate to your project directory, and run:

npm install

Windows users: Use Visual Studio Code's built-in terminal for compatibility with UNIX commands.

Running the App on Android​

Ensure npm packages are installed. You'll need either a physical Android device or an Android emulator.

Setup​

  • Device: Plug in via USB cable
  • Emulator: Open Android Studio → Tools → AVD Manager → Start an emulator

Android Studio Setup

Run​

react-native run-android

The metro bundler should start automatically. If not, open a new terminal and run npm start.

For debugging, check our React Native Errors documentation.

Running the App on iOS​

Ensure npm packages are installed. You need a Mac to run iOS apps. Windows users must use a virtual machine or Apple computer.

Install Dependencies​

Install Cocoapods and Xcode, then:

cd ios && pod install

Pod Install Output

Run​

Open ios/Shopertino.xcworkspace in Xcode, select a device/simulator, and run the app.

Xcode Device Selection

By default, the app displays demo products and sends test purchases to our Stripe account. To make it production-ready, link your own Firebase and Stripe.

Setup Firebase​

  1. Create a Firebase account and project
  2. Create an app within that project
  3. Download the config files:
    • iOS: GoogleService-Info.plist → override in ios/Shopertino/
    • Android: google-services.json → override in android/app/
  4. Enable Firebase Authentication, Firestore, and Storage with public read/write rules

For detailed setup, see our Firebase Integration tutorial.

Run the app again. It should now be empty. Create a new user and verify it appears in your Firebase Console.

Create Categories & Products in Firebase​

Add your catalog to Firestore via the Firebase Console.

Add Categories​

Create a collection named shopertino_categories with the following structure:

FieldTypeExample
idstring"electronics"
namestring"Electronics"
photostring"https://..."

Firebase Categories

Important: The id field must match the category identifier exactly.

Add Products​

Create a collection named shopertino_products with fields for product details:

FieldTypeExample
namestring"Laptop"
pricenumber999.99
categorystring"electronics"
photostring"https://..."
descriptionstring"High-performance laptop"

Firebase Products

Set Up Stripe Payments​

To accept payments, set up a Stripe account and get your API keys.

Update Configuration​

  • Open src/constant.js and add your Stripe publishable key
  • Open stripeServer/.env and add your Stripe secret key

Backend Server​

You need a server to securely process payments. Follow our Stripe Integration for React Native guide for complete setup.

Next Steps​

Your e-commerce app is now ready! Customize branding, add more products, and publish to the App Store and Google Play.

Questions? Reach out—we're here to help!

Practical product notes

Get the next useful guide

Occasional tutorials, product resources, and lessons from building and launching software.