feat!: upgrade Android Driver SDK to version 7.0.0 (#75)

Author: jokerttu

README.md

@@ -15,7 +15,8 @@ This is the beta release of the Google Driver SDK package for React Native. It i
 
 |                                 | Android | iOS       |
 | ------------------------------- | ------- | --------- |
-| **Minimum mobile OS supported** | SDK 24+ | iOS 16.0+ |
+| **Minimum mobile OS supported** | SDK 26+ | iOS 16.0+ |
+| **Compile/Target SDK**          | SDK 36+ | -         |
 
 * A React Native project
 * A Google Cloud project
@@ -100,16 +101,18 @@ dependencies {
 
 #### Minimum SDK Requirements for Android
 
-The `minSdkVersion` for your Android project must be set to 24 or higher in `android/app/build.gradle`:
+The `minSdkVersion` for your Android project must be set to 26 or higher in `android/app/build.gradle`:
 
 ```groovy
 android {
     defaultConfig {
-        minSdkVersion 24
+        minSdkVersion 26
     }
 }
 ```
 
+The `compileSdkVersion` and `targetSdkVersion` should be set to 36 or higher.
+
 #### Set Google Maps API Key
 
 To securely store your API key, it is recommended to use the [Google Maps Secrets Gradle Plugin](https://developers.google.com/maps/documentation/android-sdk/secrets-gradle-plugin). This plugin helps manage API keys without exposing them in your app's source code.

android/build.gradle

@@ -40,16 +40,16 @@ if (isNewArchitectureEnabled()) {
 android {
     namespace "com.google.android.react.driversdk"
 
-    compileSdkVersion 35
+    compileSdkVersion 36
 
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_1_8
     }
 
     defaultConfig {
-        minSdkVersion 23
-        targetSdkVersion 34
+        minSdkVersion 26
+        targetSdkVersion 36
         versionCode 1
         // get version name from package.json version
         versionName "1.0"
@@ -85,7 +85,7 @@ repositories {
 }
 
 dependencies {
-  implementation 'com.google.android.libraries.mapsplatform.transportation:transportation-driver:6.2.0'
+  implementation 'com.google.android.libraries.mapsplatform.transportation:transportation-driver:7.0.0'
   implementation 'com.facebook.react:react-native:+'
   implementation 'com.android.support:multidex:1.0.3'
   implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

android/src/main/java/com/google/android/react/driversdk/lmfs/DeliveryDriverModule.java

@@ -137,7 +137,7 @@ public void setLocationReportingInterval(int interval, Promise promise) {
         return;
       }
 
-      vehicleReporter.setLocationReportingInterval(new Long(interval), TimeUnit.SECONDS);
+      vehicleReporter.setLocationReportingInterval(Long.valueOf(interval), TimeUnit.SECONDS);
     } catch (Exception e) {
       promise.reject(e.toString(), e.getMessage(), e);
     }

android/src/main/java/com/google/android/react/driversdk/odrd/RidesharingModule.java

@@ -161,7 +161,7 @@ public void setLocationReportingInterval(int interval, Promise promise) {
         return;
       }
 
-      vehicleReporter.setLocationReportingInterval(new Long(interval), TimeUnit.SECONDS);
+      vehicleReporter.setLocationReportingInterval(Long.valueOf(interval), TimeUnit.SECONDS);
     } catch (Exception e) {
       promise.reject(e.toString(), e.getMessage(), e);
     }

example/.env.sample

@@ -34,5 +34,9 @@ IOS_HOST=localhost
 LMFS_PORT=8091
 ODRD_PORT=8092
 
+# Optional: Set vehicle IDs for the example apps (can also be set in the app UI or code)
+# LMFS_VEHICLE_ID=your_lmfs_vehicle_id
+# ODRD_VEHICLE_ID=your_odrd_vehicle_id
+
 # This is typically `~/.config/gcloud` on MacOS and Linux, or `%APPDATA%\gcloud` on Windows. See ./tools/backend/README.md for more details.
 GCLOUD_CONFIG_DIR=~/.config/gcloud 

example/LMFS/README.md

@@ -8,7 +8,13 @@ This is a sample application that show cases developers how to integrate with th
 
 1. This library depends on the LMFS backend available in https://github.com/googlemaps/last-mile-fleet-solution-samples/tree/main/backend. This package provides docker-compose files to run the backend services at `/example/tools/backend` folder. For more information, please refer to the [README](../tools/backend/README.md) file in the tools/backend folder of the example app.
 2. Once the backend is setup, create a delivery vehicle and keep the vehicleId handy. In order to make it easier to create vehicles with tasks, you can use the `/upload-delivery-config.html` endpoint on the backend. [example json](https://raw.githubusercontent.com/googlemaps/last-mile-fleet-solution-samples/main/backend/src/test/resources/test.json)
-3. Go to the [App.tsx](/example/LMFS/src/App.tsx) file and update the VEHICLE_ID from the endpoint response.
+3. Configure the VEHICLE_ID using one of the following methods:
+   - **Option 1: .env file (Recommended)** - Add the vehicle ID to your `.env` file in the `example` folder:
+     ```
+     LMFS_VEHICLE_ID=your_vehicle_id
+     ```
+   - **Option 2: Direct Input** - When you start the app, you can enter the vehicle ID directly in the "VEHICLE_ID Not Configured" screen.
+   - **Option 3: Code Update** - Go to the [App.tsx](/example/LMFS/src/App.tsx) file and update the VEHICLE_ID_DEFAULT constant with your vehicle ID.
 
 ## Setup
 

example/LMFS/android/build.gradle

@@ -20,7 +20,7 @@ def enableDesugaring = true
 buildscript {
     ext {
         buildToolsVersion = "36.0.0"
-        minSdkVersion = 34
+        minSdkVersion = 26
         compileSdkVersion = 36
         targetSdkVersion = 36
         ndkVersion = "27.1.12297006"

example/LMFS/babel.config.js

@@ -27,8 +27,14 @@ module.exports = getConfig(
         {
           envName: 'APP_ENV',
           path: '../.env',
-          allowlist: ['PROJECT_ID', 'ANDROID_HOST', 'IOS_HOST', 'LMFS_PORT'],
-          allowUndefined: false,
+          allowlist: [
+            'PROJECT_ID',
+            'ANDROID_HOST',
+            'IOS_HOST',
+            'LMFS_PORT',
+            'LMFS_VEHICLE_ID',
+          ],
+          allowUndefined: true,
           verbose: false,
         },
       ],

example/LMFS/env.d.ts

@@ -19,4 +19,5 @@ declare module '@env' {
   export const ANDROID_HOST: string;
   export const IOS_HOST: string;
   export const LMFS_PORT: number;
+  export const LMFS_VEHICLE_ID: string;
 }

example/LMFS/src/App.tsx

@@ -19,6 +19,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   StyleSheet,
   Text,
+  TextInput,
   View,
   Platform,
   Modal,
@@ -46,6 +47,7 @@ import {
   ANDROID_HOST,
   IOS_HOST,
   LMFS_PORT,
+  LMFS_VEHICLE_ID,
 } from '@env';
 import usePermissions from './checkPermissions';
 
@@ -56,7 +58,12 @@ const BASE_URL =
     : `http://${IOS_HOST}:${LMFS_PORT}`;
 
 // Update this vehicle id from the response from the /upload-delivery-config.html backend endpoint.
-const VEHICLE_ID = ''; // ADD_VEHICLE_ID_HERE
+// Can also be set via LMFS_VEHICLE_ID in .env file or as environment variable:
+// See README.md for configuration options.
+const VEHICLE_ID_DEFAULT = LMFS_VEHICLE_ID || ''; // ADD_VEHICLE_ID_HERE
+
+// New location reporting interval in seconds that is applied via menu action.
+const NEW_LOCATION_REPORTING_INTERVAL_SECONDS = 20;
 
 const termsAndConditionsDialogOptions: TermsAndConditionsDialogOptions = {
   title: 'RN LMFS Sample',
@@ -78,6 +85,9 @@ function LMFSSampleApp() {
     useState(false);
   const [authToken, setAuthToken] = useState<string | null>(null);
   const [driverSdkVersion, setDriverSdkVersion] = useState<string>('');
+  const [vehicleId, setVehicleId] = useState<string>(VEHICLE_ID_DEFAULT);
+  const [tempVehicleId, setTempVehicleId] =
+    useState<string>(VEHICLE_ID_DEFAULT);
 
   const clearInstance = useCallback(async () => {
     await deliveryDriverApi.clearInstance();
@@ -153,7 +163,33 @@ function LMFSSampleApp() {
     [onArrival, onNavigationReady, onNavigationInitError, onRouteStatusResult]
   );
 
+  const fetchAuthToken = useCallback(async () => {
+    if (!vehicleId) {
+      console.log('Vehicle ID not set, skipping auth token fetch');
+      return;
+    }
+    try {
+      console.log('Fetching auth token...');
+      const tokenUrl = BASE_URL + '/token/delivery_driver/' + vehicleId;
+      const response = await fetch(tokenUrl);
+      const { token } = await response.json();
+      console.log('Got token:', token);
+
+      setAuthToken(token);
+    } catch (error) {
+      console.log(
+        'There has been a problem connecting to the provider, please make sure it is running. ',
+        error
+      );
+    }
+  }, [vehicleId]);
+
   useEffect(() => {
+    if (!vehicleId) {
+      console.log('Vehicle ID not set, skipping initialization');
+      return;
+    }
+
     console.log('Init LMFS Example app');
     removeListeners(navigationCallbacks);
     addListeners(navigationCallbacks);
@@ -167,31 +203,21 @@ function LMFSSampleApp() {
       removeListeners(navigationCallbacks);
       clearInstance();
     };
-  }, [clearInstance, navigationCallbacks, addListeners, removeListeners]);
-
-  const fetchAuthToken = async () => {
-    try {
-      console.log('Fetching auth token...');
-      const tokenUrl = BASE_URL + '/token/delivery_driver/' + VEHICLE_ID;
-      const response = await fetch(tokenUrl);
-      const { token } = await response.json();
-      console.log('Got token:', token);
-
-      setAuthToken(token);
-    } catch (error) {
-      console.log(
-        'There has been a problem connecting to the provider, please make sure it is running. ',
-        error
-      );
-    }
-  };
+  }, [
+    clearInstance,
+    navigationCallbacks,
+    addListeners,
+    removeListeners,
+    vehicleId,
+    fetchAuthToken,
+  ]);
 
   const createInstance = async () => {
     try {
       console.log('Creating LMFS instance');
       await deliveryDriverApi.initialize(
         PROVIDER_ID,
-        VEHICLE_ID,
+        vehicleId,
         _tokenContext => {
           console.log('onGetToken call, return token: ', authToken);
           // Check if the token is expired, in such case request a new one.
@@ -237,11 +263,14 @@ function LMFSSampleApp() {
     }
   };
 
-  const setUpdateInterval = async () => {
+  const setLocationReportingInterval = async () => {
     try {
       await deliveryDriverApi
         .getDeliveryVehicleReporter()
-        .setLocationReportingInterval(20);
+        .setLocationReportingInterval(NEW_LOCATION_REPORTING_INTERVAL_SECONDS);
+      console.log(
+        `Location reporting interval set to ${NEW_LOCATION_REPORTING_INTERVAL_SECONDS} seconds`
+      );
     } catch (e) {
       console.error(e);
     }
@@ -313,19 +342,54 @@ function LMFSSampleApp() {
   const controlsButtonColor = '#d32f2f';
   const controlsButtonColorPressed = '#a12020';
 
-  if (!VEHICLE_ID) {
+  const handleSetVehicleId = () => {
+    if (tempVehicleId.trim()) {
+      setVehicleId(tempVehicleId.trim());
+    }
+  };
+
+  if (!vehicleId) {
     return (
       <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
         <View style={styles.alertContainer}>
           <Text style={styles.alertTitle}>VEHICLE_ID Not Configured</Text>
           <Text style={styles.alertMessage}>
-            Please set the VEHICLE_ID in App.tsx before running the app.
+            Please set the VEHICLE_ID to continue.
           </Text>
           <Text style={styles.alertInstructions}>
-            To configure:
-            {'\n'}1. Follow the setup instructions in the README
-            {'\n'}2. Create a delivery vehicle using the backend
-            {'\n'}3. Update VEHICLE_ID in example/LMFS/src/App.tsx
+            You can configure the vehicle ID in one of three ways:
+            {'\n'}
+            {'\n'}1. Add it to your .env file:
+            {'\n'} LMFS_VEHICLE_ID=your_vehicle_id
+            {'\n'}
+            {'\n'}2. Enter it directly below:
+          </Text>
+          <View style={styles.inputContainer}>
+            <TextInput
+              style={styles.input}
+              placeholder="Enter Vehicle ID"
+              placeholderTextColor="#999"
+              value={tempVehicleId}
+              onChangeText={setTempVehicleId}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+            <View style={styles.buttonWrapper}>
+              <ActionButton
+                title="Set Vehicle ID"
+                onPress={handleSetVehicleId}
+                backgroundColor={buttonBackgroundColor}
+                pressedBackgroundColor={buttonBackgroundColorPressed}
+              />
+            </View>
+          </View>
+          <Text style={styles.alertInstructions}>
+            {'\n'}3. Update VEHICLE_ID_DEFAULT in example/LMFS/src/App.tsx
+            {'\n'}
+            {'\n'}To create a vehicle:
+            {'\n'}• Follow the setup instructions in the README
+            {'\n'}• Create a delivery vehicle using the backend
+            {'\n'}• Use the vehicle ID from the response
             {'\n'}
             {'\n'}See README.md for detailed instructions.
           </Text>
@@ -355,7 +419,7 @@ function LMFSSampleApp() {
             numberOfLines={1}
             ellipsizeMode="tail"
           >
-            Vehicle ID: {VEHICLE_ID || 'Not set'}
+            Vehicle ID: {vehicleId || 'Not set'}
           </Text>
           <Text
             style={styles.versionText}
@@ -402,8 +466,8 @@ function LMFSSampleApp() {
               </View>
               <View style={styles.buttonWrapper}>
                 <ActionButton
-                  title="Update time interval"
-                  onPress={setUpdateInterval}
+                  title={`Set Location Reporting Interval to ${NEW_LOCATION_REPORTING_INTERVAL_SECONDS}s`}
+                  onPress={setLocationReportingInterval}
                   backgroundColor={buttonBackgroundColor}
                   pressedBackgroundColor={buttonBackgroundColorPressed}
                 />
@@ -642,6 +706,22 @@ const styles = StyleSheet.create({
     color: '#0b1a2a',
     fontWeight: '600',
   },
+  inputContainer: {
+    marginVertical: 16,
+    width: '100%',
+    maxWidth: 400,
+  },
+  input: {
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    color: '#0b1a2a',
+    marginBottom: 12,
+  },
 });
 
 export default App;