React Native Food Delivery App Tutorial

This guide covers the practical setup flow for the food delivery app package: run the app, connect your Firebase project, seed restaurant data, test customer, restaurant owner, admin, and driver flows, then prepare the app for release.

Quick Answer

Run the React Native app with Yarn, connect your own Firebase project, enable Auth, Firestore, Storage, and Functions, import restaurant seed data, assign admin/vendor/driver roles, test order placement and dispatch, then complete the food delivery release checklist.

1. Run the App Locally

From the app root:

corepack enable
corepack yarn install --immutable
cd ios
bundle install
bundle exec pod install
cd ..
corepack yarn start

In a second terminal:

corepack yarn ios
# or
corepack yarn android

If your local environment is not ready, start with:

• Set Up Your Development Environment
• Run on iOS
• Run on Android

2. Configure Firebase

The food delivery app commonly uses:

• Firebase Auth for customer, vendor, admin, and driver accounts;
• Firestore for restaurants, products, orders, deliveries, reviews, and users;
• Storage for restaurant, product, profile, and vehicle photos;
• Firebase Functions for dispatching, notifications, payments, or backend work.

Follow the Firebase setup flow:

• Configure a Firebase Project
• Link Firebase Account to Your App
• Set Up Firebase Collections

3. Import Restaurant Data

Import seed data if the app package includes it. This gives the app realistic restaurants, categories, filters, and products before you manually customize content.

Use:

• Importing Data Seed to Firestore

After import, open the customer app and verify that restaurants and products render from your Firebase project.

4. Configure Roles

Create test users from the app, then assign roles in Firestore:

User type	Role
Customer	no special role or customer role, depending on app config
Admin	admin
Restaurant owner	vendor plus a vendorID pointing to the restaurant document
Driver	driver plus required vehicle/location fields

Role guides:

• Admin and Restaurant Owner App
• Driver App

5. Test the Order Flow

At minimum, test:

1. customer signs up;
2. customer browses restaurants and products;
3. customer adds products to cart;
4. customer places an order;
5. restaurant owner accepts or rejects the order;
6. dispatch function assigns an available driver;
7. driver accepts and updates delivery status;
8. customer sees order tracking status updates.

If payments are enabled, test the full payment flow in Stripe test mode before using live keys.

6. Customize the App

Common changes:

• app name;
• app icon;
• splash screen;
• bundle identifier and Android application id;
• colors and typography;
• restaurant categories and product data;
• payment provider settings;
• push notification copy;
• privacy policy and support links.

Use these docs:

• Change the App Name
• Change the App Icon
• Change the Splash Screen Logo
• Stripe Payments

Verification Checklist

• Customer app starts on iOS and Android.
• Restaurants and products load from your Firebase project.
• New users appear in Firebase Auth.
• Firestore writes orders and deliveries.
• Vendor and admin role users see management screens.
• Driver role user can receive delivery jobs.
• Firebase Functions are deployed if dispatch is used.
• Payments are tested in test mode if enabled.
• Release checklist is complete.

Troubleshooting

Problem	Fix
Restaurants do not appear	Import seed data and check collection names.
Vendor screen is not visible	Set role and vendorID on the vendor user document.
Driver does not receive orders	Check driver role/location data and deploy dispatch Functions.
Order status does not update	Check Firestore rules, listeners, and order status fields.
Payment succeeds but order stays pending	Check payment backend and order finalization logic.

Next Steps

• Order Tracking and Driver Dispatching
• React Native App Release Checklist
• React Native Release Checklist