feat!: support new React Native architecture

Author: jokerttu

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -60,7 +60,16 @@ body:
     attributes:
       label: React Native Doctor Output
       description: |
-        Run `npx react-native doctor` in your projectq and paste the output below.
+        Run `npx react-native doctor` in your project folder and paste the output below.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: React Native Info Output
+      description: |
+        Run `npx react-native info` in your project folder and paste the output below.
+      render: shell
     validations:
       required: true
   - type: textarea
@@ -96,9 +105,13 @@ body:
         Without this we will unlikely be able to progress on the issue, 
         as we need to be able to reproduce the problem locally.
       value: |
+        <details open><summary>Code sample</summary>
+
         ```javascript
         // Example code here
         ```
+
+        </details>
     validations:
       required: true
   - type: textarea

.github/workflows/ci.yml

@@ -37,7 +37,7 @@ jobs:
         run: yarn lint
 
       - name: Typecheck files
-        run: yarn test:types
+        run: yarn typecheck
 
   check-objc-formatting:
     runs-on: ubuntu-latest
@@ -52,7 +52,7 @@ jobs:
       - name: Check Objective-C formatting
         run: ./scripts/format-objc.sh --check
 
-  check-java-formatting:
+  check-java-and-kotlin-formatting:
     runs-on: ubuntu-latest
     timeout-minutes: 30
     steps:
@@ -84,6 +84,24 @@ jobs:
       - name: Check Java formatting
         run: ./scripts/format-java.sh --check
 
+      - name: Download ktfmt
+        run: |
+          KTFMT_VERSION=0.54
+          KTFMT_URL=https://repo1.maven.org/maven2/com/facebook/ktfmt/${KTFMT_VERSION}/ktfmt-${KTFMT_VERSION}-jar-with-dependencies.jar
+          mkdir -p $HOME/ktfmt
+          curl -L -o $HOME/ktfmt/ktfmt.jar $KTFMT_URL
+
+      - name: Create ktfmt wrapper script
+        run: |
+          cat << 'EOF' > /usr/local/bin/ktfmt
+          #!/bin/sh
+          exec java -jar "$HOME/ktfmt/ktfmt.jar" "$@"
+          EOF
+          chmod +x /usr/local/bin/ktfmt
+
+      - name: Check Kotlin formatting
+        run: ./scripts/format-kotlin.sh --check
+
   test:
     runs-on: ubuntu-latest
     timeout-minutes: 30
@@ -222,7 +240,7 @@ jobs:
           NO_FLIPPER: 1
 
       - name: Copy Keys.plist file from sample
-        run: cp example/ios/SampleApp/Keys.plist.sample example/ios/SampleApp/Keys.plist
+        run: cp example/ios/ReactNativeNavigationSdkExample/Keys.plist.sample example/ios/ReactNativeNavigationSdkExample/Keys.plist
 
       - name: Build example for iOS
         run: |

.gitignore

@@ -28,7 +28,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
-.xcode.env.local
+**/.xcode.env.local
 Keys.plist
 
 # Android/IJ
@@ -81,5 +81,5 @@ android/keystores/debug.keystore
 # generated by bob
 lib/
 
-# tests
+# Tests
 coverage/

.npmignore

@@ -1,3 +1,4 @@
 example
 coverage
-node_modules
+node_modules
+scripts

.nvmrc

@@ -1 +1 @@
-v18
+v20

.tool-versions

@@ -1 +1 @@
-nodejs 18.20.1
+nodejs 20.18.3

.watchmanconfig

@@ -1,3 +1 @@
-{
-  "fsevents_latency": 0.1
-}
+{}

.yarnrc.yml

@@ -17,8 +17,8 @@ nmHoistingLimits: workspaces
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+    spec: '@yarnpkg/plugin-interactive-tools'
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+    spec: '@yarnpkg/plugin-workspace-tools'
 
 yarnPath: .yarn/releases/yarn-3.6.1.cjs

ANDROIDAUTO.md

@@ -20,7 +20,7 @@ For all the steps above, you can refer to the Android example application for gu
 
 ### Screen for Android Auto
 
-Once your project is configured accordingly, and you are ready to build the screen for Android Auto, you can leverage the `AndroidAutoBaseScreen` provided by the SDK. This base class simplifies the setup by handling initialization, teardown, and rendering the map on the Android Auto display.
+Once your project is configured accordingly, and you are ready to build the screen for Android Auto, you can leverage the `GMNAndroidAutoBaseScreen` provided by the SDK. This base class simplifies the setup by handling initialization, teardown, and rendering the map on the Android Auto display.
 
 Please refer to the `SampleAndroidAutoScreen.java` file in the Android example app for guidance.
 
@@ -61,7 +61,7 @@ public Template onGetTemplate() {
 }
 ```
 
-For advanced customization, you can bypass the base class and implement your own screen by inheriting `Screen`. You can use the provided `AndroidAutoBaseScreen` base class as a reference on how to do that.
+For advanced customization, you can bypass the base class and implement your own screen by inheriting `Screen`. You can use the provided `GMNAndroidAutoBaseScreen` base class as a reference on how to do that.
 
 ### React Native specific setup
 
@@ -70,22 +70,25 @@ On the React Native side, you can use the `useNavigationAuto` hook to interface
 ```tsx
 const {
   mapViewAutoController,
-  addListeners: addAutoListener,
-  removeListeners: removeAutoListeners,
 } = useNavigationAuto();
 
-const navigationAutoCallbacks: NavigationAutoCallbacks = useMemo(
-  () => ({
-    onCustomNavigationAutoEvent: (event: CustomNavigationAutoEvent) => {
-      console.log('onCustomNavigationAutoEvent:', event);
-    },
-    onAutoScreenAvailabilityChanged: (available: boolean) => {
+useEffect(() => {
+  mapViewAutoController.setOnAutoScreenAvailabilityChangedListener(
+    (available: boolean) => {
       console.log('onAutoScreenAvailabilityChanged:', available);
       setMapViewAutoAvailable(available);
-    },
-  }),
-  []
-);
+    }
+  );
+  mapViewAutoController.setOnCustomNavigationAutoEventListener(
+    (event: CustomNavigationAutoEvent) => {
+      console.log('onCustomNavigationAutoEvent:', event);
+    }
+  );
+
+  return () => {
+    mapViewAutoController.removeAllListeners();
+  };
+});
 
 const setMapType = (mapType: MapType) => {
   console.log('setMapType', mapType);

CARPLAY.md

@@ -56,22 +56,25 @@ On the React Native side, you can use the `useNavigationAuto` hook to interface
 ```tsx
 const {
   mapViewAutoController,
-  addListeners: addAutoListener,
-  removeListeners: removeAutoListeners,
 } = useNavigationAuto();
 
-const navigationAutoCallbacks: NavigationAutoCallbacks = useMemo(
-  () => ({
-    onCustomNavigationAutoEvent: (event: CustomNavigationAutoEvent) => {
-      console.log('onCustomNavigationAutoEvent:', event);
-    },
-    onAutoScreenAvailabilityChanged: (available: boolean) => {
+useEffect(() => {
+  mapViewAutoController.setOnAutoScreenAvailabilityChangedListener(
+    (available: boolean) => {
       console.log('onAutoScreenAvailabilityChanged:', available);
       setMapViewAutoAvailable(available);
-    },
-  }),
-  []
-);
+    }
+  );
+  mapViewAutoController.setOnCustomNavigationAutoEventListener(
+    (event: CustomNavigationAutoEvent) => {
+      console.log('onCustomNavigationAutoEvent:', event);
+    }
+  );
+
+  return () => {
+    mapViewAutoController.removeAllListeners();
+  };
+});
 
 const setMapType = (mapType: MapType) => {
   console.log('setMapType', mapType);
@@ -83,4 +86,4 @@ For a more detailed example, refer to the `NavigationScreen.tsx` in the React Na
 
 ## Example Project
 
-For a fully functional CarPlay implementation, check out the [SampleApp](./example/ios/) Xcode project, which includes the `SampleAppCarPlay` build target. The sample already contains test entitlement so you don't need to request one from Apple to run it.
+For a fully functional CarPlay implementation, check out the [SampleApp](./example/ios/) Xcode project, which includes the `ReactNativeNavigationSdkExampleCarPlay` build target. The sample already contains test entitlement so you don't need to request one from Apple to run it.

CONTRIBUTING.md

@@ -31,6 +31,7 @@ This project follows
 - [addlicense](https://github.com/google/addlicense)
 - [google-java-format Version 1.23.0](https://github.com/google/google-java-format) (used to format Java code).
 - [clang-format](https://clang.llvm.org/docs/ClangFormat.html) (used to format Objective-C code).
+- [ktfmt](https://facebook.github.io/ktfmt/) (used to format Kotlin code).
 
 ## 2. Forking & cloning the repository
 
@@ -97,6 +98,18 @@ This script will format all Objective-C files under the /ios and /example/ios di
 ```
 This script will format all Java files under the /android and /example/android directories according to Google's Java style guide.
 
+**Kotlin:**
+```bash
+./scripts/format-kotlin.sh
+```
+This script will format all Kotlin files under the /android and /example/android directories according to Google's Kotlin style guide.
+
+**All:**
+```bash
+./scripts/format.sh
+```
+This script run all above formatters.
+
 
 ## 5. Code reviews
 
@@ -140,6 +153,7 @@ yarn run example detox:test:ios-release
 ```
 
 Android:
+Create AVD emulator with the name "Pixel_9_Pro_API_35" and run the command below.
 ```bash
 yarn run example detox:test:android-release
 ```

README.md

@@ -11,12 +11,13 @@ This repository contains a React Native plugin that provides a [Google Navigatio
 
 |                                 | Android | iOS       |
 | ------------------------------- | ------- | --------- |
-| **Minimum mobile OS supported** | SDK 23+ | iOS 15.0+ |
+| **Minimum mobile OS supported** | SDK 23+ | iOS 16.0+ |
 
-* A React Native project
+* Supported React Native version: **0.78+**
+  * See [React Native Support](#react-native-support) below for version and architecture requirements
 * A Google Cloud project
-  *  If you are a Mobility Services developer, you must contact Sales as described in [Mobility services documentation](https://developers.google.com/maps/documentation/transportation-logistics/mobility).
-  *  If you are not a Mobility Services developer, refer to [Setup Google Cloud Project](https://developers.google.com/maps/documentation/navigation/android-sdk/cloud-setup) for instructions.
+  * If you are a Mobility Services developer, you must contact Sales as described in [Mobility services documentation](https://developers.google.com/maps/documentation/transportation-logistics/mobility).
+  * If you are not a Mobility Services developer, refer to [Setup Google Cloud Project](https://developers.google.com/maps/documentation/navigation/android-sdk/cloud-setup) for instructions.
 * An [API key](https://console.cloud.google.com/google/maps-apis/credentials) from the project above
   * The API key must be configured for both Android and iOS. Refer to [Android Using Api Keys](https://developers.google.com/maps/documentation/navigation/android-sdk/get-api-key) and [iOS Using Api Keys](https://developers.google.com/maps/documentation/navigation/ios-sdk/get-api-key) respectively for instructions.
 * If targeting Android, [Google Play Services](https://developers.google.com/android/guides/overview) installed and enabled
@@ -41,14 +42,6 @@ import { NavigationView } from '@googlemaps/react-native-navigation-sdk';
 
 ### Android
 
-#### Disable new architecture
-
-This package does not yet support new architecture. Make sure new architecture is disabled in your `android/gradle.properties` file:
-
-```groovy
-newArchEnabled=false
-```
-
 #### Enable Jetifier
 
 To ensure compatibility with AndroidX, enable Jetifier in your `android/gradle.properties` file:
@@ -96,14 +89,6 @@ See example configuration for secrets plugin at example applications [build.grad
 
 ### iOS
 
-#### Disable new architecture
-
-This package does not yet support new architecture. Make sure new architecture is disabled in your `ios/Podfile`:
-
-```ruby
-ENV['RCT_NEW_ARCH_ENABLED'] = '0'
-```
-
 #### Set Google Maps API Key
 
 To set up, specify your API key in the application delegate `ios/Runner/AppDelegate.m`:
@@ -175,7 +160,7 @@ const { navigationController } = useNavigation();
 
 const initializeNavigation = useCallback(async () => {
   try {
-    await navigationController.init();
+    const status: NavigationInitializationStatus = await navigationController.init();
     console.log('Navigation initialized');
   } catch (error) {
     console.error('Error initializing navigation', error);
@@ -357,6 +342,34 @@ This package uses the Google Maps [Navigation SDK](https://mapsplatform.google.c
 > [!NOTE]
 > This package provides a `MapView` component, which can be used as a classic Google Maps view without navigation. See [Add a map view](#add-a-map-view) for details.
 
+## React Native Support
+
+> [!IMPORTANT]
+> **This package is tested and supported only with React Native versions 0.78 and above, and requires the New Architecture (Fabric and TurboModules) to be enabled.**
+>
+> If you are using an older version of React Native (below 0.78) or cannot have the New Architecture enabled, you must use version `0.9.3` or earlier of this package.
+
+The New Architecture is enabled by default from React Native 0.76 onwards, but you should verify it is enabled in your project. See below for instructions.
+
+#### Enabling New Architecture
+
+**Android:**  
+Add the following to your `android/gradle.properties` file:
+```groovy
+newArchEnabled=true
+```
+
+**iOS:**  
+Add the following to your `ios/Podfile` file:
+```ruby
+ENV['RCT_NEW_ARCH_ENABLED'] = '1'
+```
+
+If you need to use the legacy React Native architecture or an older React Native version, install version `0.9.3` or earlier:
+```shell
+npm i @googlemaps/[email protected]
+```
+
 ## Contributing
 
 See the [Contributing guide](./CONTRIBUTING.md).