When you run the app in the original unmodified version of our UberEats React Native clone, you’ll notice that the user experience is that of your customers – they can view restaurants, food items and place orders.

Our UberEats Clone also includes the Driver App, which allows your drivers to accept new delivery orders, view their delivery history, set themselves as online/offline, update order statuses, provide location data so customers can track them, etc.

To build and run the driver app navigation stack, you need to configure the user role in Firestore, by setting up the role as “driver” (string type). So go to Firestore, select the “users” collection, find the user that you want to set as a restaurant manager, and add a field named “role” (with value “driver“):

Now re-run the app, and you’ll notice you get the driver experience. Log into the app with a driver account (so an account that has “role”=”driver” in the users table, per the documentation here), and you’ll be starting to get the driver experience.

Note: When building the driver app with the change above, you’ll notice that the customer app will get overridden on your device by the driver app. This is because you are using the same Bundle ID (app identifier) for both apps.

To create a completely separate/different app, you’ll need to do the following steps:

1. Clone the Project, by copy-pasting a duplicate folder of the source code

2. Rename that folder to DriverApp and re-configure DriverApp as pictured below

3. Set up a new app in Firebase (one for iOS and one for Android), with different BundleID for iOS (e.g. io.instamobile.driver.app.ios) and different applicationId for Android (e.g. io.instamobile.driver.app.android)

4. Set up Firebase on this new folder by following all the steps here (basically override the new GoogleService-Info.plist and google-services.json files)

5. Make sure you modify the Bundle ID and the applicationId in DriverApp (make sure these IDs match the Firebase app IDs you created at step 3)

6. Customize DriverApp, by changing name, logo, splash screens, etc. See this documentation on how to achieve these things, if you don’t know React Native

7. Build and run the app (DriverApp) – now you’ll notice this will create a new app on your device, leaving the customer app untouched, so you can start using both apps at the same time.

Code Pointers

The app selects the correct navigation stack automatically (driver, restaurant manager, consumer or admin), based on the user’s role. This happens in AppNavigation.js:

{currentUser?.role === 'vendor' ? (
  <RootStack.Screen
    options={{ headerShown: false }}
    name="MainStack"
    component={VendorDrawerStack}
  />
) : currentUser?.role === 'driver' ? (
  <RootStack.Screen
    options={{ headerShown: false }}
    name="MainStack"
    component={DriverDrawerStack}
  />
) : currentUser?.role === 'admin' ? (
  <RootStack.Screen
    options={{ headerShown: false }}
    name="MainStack"
    component={AdminDrawerStack}
  />
) : (
  <RootStack.Screen
    options={{ headerShown: false }}
    name="MainStack"
    component={DrawerStack}
  />
)}