I’m developing a React Native app with CarPlay support using the react-native-carplay library. The CarPlay interface works correctly when the phone app is open, but it fails to load the JavaScript when the phone app is closed. Currently, the CarPlay does not load the JS when the app is open either, although that is something easier to fix.
I already tried adhering to this README, although to little avail.
// AppDelegate.mm (redacted and consolidated)
@implementation AppDelegate
- (BOOL)initAppFromScene:(UISceneConnectionOptions *)connectionOptions {
if (self.rootView == nil) {
self.rootViewFactory = [self createRCTRootViewFactory];
NSDictionary *initProps = [self prepareInitialProps];
self.rootView = [self.rootViewFactory viewWithModuleName:self.moduleName
initialProperties:initProps
launchOptions:[self connectionOptionsToLaunchOptions:connectionOptions]];
return YES;
}
return NO;
}
// Other necessary methods...
@end
// CarSceneDelegate.mm (redacted and consolidated)
@implementation CarSceneDelegate
- (void)templateApplicationScene:(CPTemplateApplicationScene *)templateApplicationScene
didConnectInterfaceController:(CPInterfaceController *)interfaceController {
AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
[appDelegate initAppFromScene:nil];
UIView *carPlayRootView = [appDelegate.rootViewFactory viewWithModuleName:@"CarPlayApp"
initialProperties:nil
launchOptions:nil];
UIViewController *rootViewController = appDelegate.createRootViewController;
[appDelegate setRootView:appDelegate.rootView toRootViewController:rootViewController];
CPWindow *carWindow = templateApplicationScene.carWindow;
carWindow.rootViewController = rootViewController;
[carPlayRootView setFrame:carWindow.bounds];
[carWindow addSubview:carPlayRootView];
[RNCarPlay connectWithInterfaceController:interfaceController window:carWindow];
}
// Other necessary methods...
@end
// SceneDelegate.mm (redacted and consolidated)
@implementation SceneDelegate
- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions
{
if ([scene isKindOfClass:[UIWindowScene class]])
{
AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
BOOL hasCreatedBridge = [appDelegate initAppFromScene:connectionOptions];
UIViewController *rootViewController = appDelegate.createRootViewController;
[appDelegate setRootView:appDelegate.rootView toRootViewController:rootViewController];
UIWindow *window = [[UIWindow alloc] initWithWindowScene:scene];
window.rootViewController = rootViewController;
self.window = window;
appDelegate.window = window;
[self.window makeKeyAndVisible];
// Handle splash screen...
}
}
// Other necessary methods...
@end
// JavaScript
import { AppRegistry } from "react-native";
import CarCode from "./carplay/CarCode";
AppRegistry.registerComponent("CarPlayApp", () => CarCode);
I’ve tried various approaches, including:
- Initializing the React Native bridge in the CarPlay scene delegate.
- Creating a separate root view for CarPlay.
- Ensuring that the JavaScript bundle is loaded and executed.
Despite these attempts, the CarPlay interface remains blank when the phone app is not running. The native iOS code seems to be working, but the JavaScript is not being loaded or executed.
What am I missing to ensure that the React Native JavaScript code runs in CarPlay even when the phone app is closed?
Additional information:
React Native version: 75.0
react-native-carplay version: 2.4.1-beta.0
iOS version: 16.6
Any help or insights would be greatly appreciated!