[iOS]: Templates not appearing in CarPlay on React-Native 0.81.1

[lbuljan]

Describe the bug
I am having issues getting templates to appear in the CarPlay simulator (will test in car later) even though the connection has been established and proprietary code to push templates is called correctly. All I get is a blank screen, nothing appears. Just blank.

I am probably one of the few running 0.81.1 and have success with updating my native code to support Scenes and a shared React Native Bridge between them and am still using Legacy rendering. Effectively it should still render the same as it did on 0.74.7 because the code is practically the same, but nothing happens.

To Reproduce
Steps to reproduce the behavior:

1. Build the app
2. Run simulator
3. Open CarPlay simulator
4. Open app
5. Check logs for "we are connected yes!" --> confirmed
6. Check custom logs for pushing root template --> confirmed
7. Check screen if something rendered --> blank, nothing.

Expected behavior
The template appears on screen as specified

Screenshots/Videos

CarPlay (please complete the following information):

• Device: iPhone 16 / CarPlay simulator
• OS version iOS 18.2
• RNCarPlay version 2.4.0-beta1

Additional context

------------- CarScene delegate

import AVFoundation
// CarScene.swift
import CarPlay
import React

class CarSceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {
  var window: CPWindow?

  func templateApplicationScene(
    _ templateApplicationScene: CPTemplateApplicationScene,
    didConnect interfaceController: CPInterfaceController
  ) {
    guard let appDelegate = UIApplication.shared.delegate as? AppDelegate
    else { fatalError("AppDelegate faulty.") }

    let carWindow = templateApplicationScene.carWindow
    let view = RCTRootView(
      bridge: appDelegate.bridge,
      moduleName: appDelegate.reactModuleName,
      initialProperties: ["scene": "car"]
    )
    view.backgroundColor = UIColor.black
    view.frame = carWindow.bounds
    view.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    let controller = UIViewController()
    controller.view = view

    carWindow.rootViewController = controller
    window = carWindow

    RNCarPlay.connect(with: interfaceController, window: carWindow)
  }

  func templateApplicationScene(
    _ templateApplicationScene: CPTemplateApplicationScene,
    didDisconnectInterfaceController interfaceController: CPInterfaceController
  ) {
    RNCarPlay.disconnect()
  }
}

-------------- PhoneScene delegate

import React
import React_RCTAppDelegate
// PhoneScene.swift
import UIKit

class PhoneSceneDelegate: UIResponder, UIWindowSceneDelegate {
  var window: UIWindow?

  func scene(
    _ scene: UIScene,
    willConnectTo session: UISceneSession,
    options connectionOptions: UIScene.ConnectionOptions
  ) {
    guard let windowScene = scene as? UIWindowScene,
      let appDelegate = UIApplication.shared.delegate as? AppDelegate
    else { fatalError("Incorrect scene or AppDelegate faulty.") }

    let view = RCTRootView(
      bridge: appDelegate.bridge,
      moduleName: appDelegate.reactModuleName,
      initialProperties: ["scene": "phone"]
    )
    view.backgroundColor = UIColor.black

    let controller = UIViewController()
    controller.view = view

    window = UIWindow(windowScene: windowScene)
    window?.rootViewController = controller
    window?.makeKeyAndVisible()
    appDelegate.window = window
  }
}

------------------ AppDelegate

import Bugsnag
import CarPlay
import Firebase
import GoogleCast
import React
import ReactAppDependencyProvider
import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?
  var reactModuleName = "wouldntyouwanttoknow"

  lazy var bridge: RCTBridge = {
    return RCTBridge(delegate: reactNativeDelegate)
  }()

  lazy var reactNativeDelegate: ReactNativeDelegate = {
    let delegate = ReactNativeDelegate()
    delegate.dependencyProvider = RCTAppDependencyProvider()
    return delegate
  }()

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication
      .LaunchOptionsKey: Any]?
  ) -> Bool {
    // Firebase Analytics debug events enabled.
    // var newArguments = ProcessInfo.processInfo.arguments
    // newArguments.append("-FIRDebugEnabled")
    // newArguments.append("-FIRAnalyticsDebugEnabled")
    // ProcessInfo.processInfo.setValue(newArguments, forKey: "arguments")
    FirebaseApp.configure()

    let receiverAppID = kGCKDefaultMediaReceiverApplicationID
    let criteria = GCKDiscoveryCriteria(applicationID: receiverAppID)
    let options = GCKCastOptions(discoveryCriteria: criteria)
    GCKCastContext.setSharedInstanceWith(options)

    #if !DEBUG
      Bugsnag.start()
    #endif

    return true
  }

  func application(
    _ application: UIApplication,
    configurationForConnecting connectingSceneSession: UISceneSession,
    options: UIScene.ConnectionOptions
  ) -> UISceneConfiguration {
    if connectingSceneSession.role == .carTemplateApplication {
      let scene = UISceneConfiguration(
        name: "CarPlay",
        sessionRole: connectingSceneSession.role
      )
      scene.delegateClass = CarSceneDelegate.self
      return scene
    } else {
      let scene = UISceneConfiguration(
        name: "Phone",
        sessionRole: connectingSceneSession.role
      )
      scene.delegateClass = PhoneSceneDelegate.self
      return scene
    }
  }

  func application(
    _ application: UIApplication,
    open url: URL,
    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
  ) -> Bool {
    return RCTLinkingManager.application(
      application,
      open: url,
      options: options
    )
  }

  func application(
    _ application: UIApplication,
    supportedInterfaceOrientationsFor window: UIWindow?
  ) -> UIInterfaceOrientationMask {
    return Orientation.getOrientation()
  }
}

[lbuljan]

Update: Same thing on an actual car mmi. Not a simulator issue.

[lbuljan]

This isn't being maintained, is it.

[lbuljan]

Through extensive debugging I've found the culprit: the image property on list items seems to cause the issue when a local asset is passed in via require(...).

Removing that property makes the template appear as normal, but we lose the static fallback images in case a URL image does not exist. Resolving a local asset URI does not help nor does it fix the issue.

At least it's running normally, but you have to run the app in Legacy architecture.

[lbuljan]

Additionally, smaller thing but still annoying, the imgUrl property in ListItem is wrongly typed as null instead of string.