Android Auto breaking errors with rendering in latest React Native

[blakecallens]

Describe the bug
After manually implementing PR #196, Android Auto is no longer crashing the app, but the ListTemplate's onItemSelect is not being triggered when an item is tapped. In addition, the following error is displayed on the phone: "Android Auto" has not been registered. (see screenshot below). This is regardless of the content of the list, including the example template. This may have to do with using React Native 74, which introduces a new version of the rendering engine.

To Reproduce
Steps to reproduce the behavior:

1. Implement PR Aa fix crash template creation (#2) #196
2. Add a ListTemplate to the app and build
3. Open the Desktop Head Unit
4. The ListTemplate will render and be scrollable, but will not receive selection
5. A component registry error will display on the phone

Expected behavior
The ListTemplate should receive interaction and no errors should display on the phone.

Screenshots/Videos

CarPlay (please complete the following information):

• Device: Desktop Head Unit
• OS version: 14
• RNCarPlay version: All versions >= 2.4.0

Android Auto (please complete the following information):

• Device: Samsung Galaxy A15
• Android Version: 14
• RNCarPlay version: All versions >= 2.4.0

[Vikmanatus]

Hello,

I might be facing the same error as you on react-native version 0.72.12

On what react-native version number are you facing this error ? 🙂

Are you getting the same error ?

FATAL EXCEPTION: main
Process: myteam.app.identifier, PID: 14577
	kotlin.UninitializedPropertyAccessException: lateinit property carContext has not been initialized
		at org.birkir.carplay.CarPlayModule.createScreen(CarPlayModule.kt:277)
		at org.birkir.carplay.CarPlayModule.createTemplate$lambda$0(CarPlayModule.kt:109)
		at org.birkir.carplay.CarPlayModule.$r8$lambda$KGCg1YkdHhdDVzVWZBIlxyzACWg(Unknown Source:0)
		at org.birkir.carplay.CarPlayModule$$ExternalSyntheticLambda0.run(Unknown Source:8)
		at android.os.Handler.handleCallback(Handler.java:959)
		at android.os.Handler.dispatchMessage(Handler.java:100)
		at android.os.Looper.loopOnce(Looper.java:232)
		at android.os.Looper.loop(Looper.java:317)
		at android.app.ActivityThread.main(ActivityThread.java:8592)
		at java.lang.reflect.Method.invoke(Native Method)
		at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:580)
		at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:878)

[EliG-TA]

@blakecallens Hey, I had the same issue. I managed to work around it by initiating as follows:

useEffect(() => {
   function onConnect() {
     CarPlay.setRootTemplate(tabTemplate, true);
     console.log("CarPlay connected");
   }
   function onDisconnect() {}

   function deviceCarPlayRegistering() {
     CarPlay.registerOnConnect(onConnect);
     CarPlay.registerOnDisconnect(onDisconnect);
   }
   if (Platform.OS === "android") {
     AppRegistry.registerRunnable("AndroidAuto", () => {
       deviceCarPlayRegistering();
       return;
     });
   } else {
     deviceCarPlayRegistering();
   }

   return () => {
     console.log("hello world");
     CarPlay.unregisterOnConnect(onConnect);
     CarPlay.unregisterOnDisconnect(onDisconnect);
   };
 }, []);

I hope that helps!

[Vikmanatus]

Than you very much for your response ! @EliG-TA

[bilalshams7]

@blakecallens Hey, I had the same issue. I managed to work around it by initiating as follows:

useEffect(() => {
   function onConnect() {
     CarPlay.setRootTemplate(tabTemplate, true);
     console.log("CarPlay connected");
   }
   function onDisconnect() {}

   function deviceCarPlayRegistering() {
     CarPlay.registerOnConnect(onConnect);
     CarPlay.registerOnDisconnect(onDisconnect);
   }
   if (Platform.OS === "android") {
     AppRegistry.registerRunnable("AndroidAuto", () => {
       deviceCarPlayRegistering();
       return;
     });
   } else {
     deviceCarPlayRegistering();
   }

   return () => {
     console.log("hello world");
     CarPlay.unregisterOnConnect(onConnect);
     CarPlay.unregisterOnDisconnect(onDisconnect);
   };
 }, []);

I hope that helps!

@EliG-TA hey,

i had this working perfectly in older android devices, But crashing in android 14 device. Do you have any idea why this is happening?

Thanks in advance.

[EliG-TA]

@bilalshams7 I have not tried it myself, although you can try something like this in the app entry point file:

import ActualCarPlayCode from "./CarPlay";
AppRegistry.registerComponent("CarPlay", () => ActualCarPlayCode);

[accesssolid]

@blakecallens Hey, I had the same issue. I managed to work around it by initiating as follows:

useEffect(() => {
   function onConnect() {
     CarPlay.setRootTemplate(tabTemplate, true);
     console.log("CarPlay connected");
   }
   function onDisconnect() {}

   function deviceCarPlayRegistering() {
     CarPlay.registerOnConnect(onConnect);
     CarPlay.registerOnDisconnect(onDisconnect);
   }
   if (Platform.OS === "android") {
     AppRegistry.registerRunnable("AndroidAuto", () => {
       deviceCarPlayRegistering();
       return;
     });
   } else {
     deviceCarPlayRegistering();
   }

   return () => {
     console.log("hello world");
     CarPlay.unregisterOnConnect(onConnect);
     CarPlay.unregisterOnDisconnect(onDisconnect);
   };
 }, []);

I hope that helps!

@EliG-TA hey,

i had this working perfectly in older android devices, But crashing in android 14 device. Do you have any idea why this is happening?

Thanks in advance.

@bilalshams7 did you got any solution on this ?