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.