Hi @dai-chao I was able to solve it in expo by patching expo-router package as follows

expo-router+4.0.21.patch

diff --git a/node_modules/expo-router/build/ExpoRoot.js b/node_modules/expo-router/build/ExpoRoot.js
index b2b7311..1636a81 100644
--- a/node_modules/expo-router/build/ExpoRoot.js
+++ b/node_modules/expo-router/build/ExpoRoot.js
@@ -41,25 +41,67 @@ const INITIAL_METRICS = react_native_1.Platform.OS === 'web' || isTestEnv
         insets: { top: 0, left: 0, right: 0, bottom: 0 },
     }
     : undefined;
+
+// Fallback SafeAreaContext that provides default values when real SafeAreaProvider is unavailable
+const FallbackSafeAreaContext = react_1.createContext({
+    insets: { top: 0, left: 0, right: 0, bottom: 0 },
+    frame: { x: 0, y: 0, width: 375, height: 812 }
+});
+
+function FallbackSafeAreaProvider({ children }) {
+    const [dimensions, setDimensions] = react_1.useState(() => {
+        const window = react_native_1.Dimensions.get('window');
+        // Provide default dimensions if window dimensions are unavailable (e.g., in CarPlay)
+        return window && window.width && window.height ? window : { width: 375, height: 812 };
+    });
+    
+    react_1.useEffect(() => {
+        const subscription = react_native_1.Dimensions.addEventListener('change', ({ window }) => {
+            // Only update if we have valid dimensions
+            if (window && window.width && window.height) {
+                setDimensions(window);
+            }
+        });
+        return () => subscription?.remove();
+    }, []);
+    
+    const contextValue = react_1.useMemo(() => ({
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        frame: { 
+            x: 0, 
+            y: 0, 
+            width: dimensions.width || 375, 
+            height: dimensions.height || 812 
+        }
+    }), [dimensions]);
+    
+    // Use the real SafeAreaProvider with our fallback initialMetrics
+    // This should satisfy React Navigation's SafeAreaProviderCompat
+    return react_1.createElement(react_native_safe_area_context_1.SafeAreaProvider, { 
+        initialMetrics: contextValue 
+    }, children);
+}
+
 /**
  * @hidden
  */
 function ExpoRoot({ wrapper: ParentWrapper = react_1.Fragment, ...props }) {
+    
     /*
      * Due to static rendering we need to wrap these top level views in second wrapper
      * View's like <SafeAreaProvider /> generate a <div> so if the parent wrapper
      * is a HTML document, we need to ensure its inside the <body>
      */
     const wrapper = ({ children }) => {
+        // Always use fallback SafeArea provider for CarPlay compatibility and edge case handling
+        // This ensures the app works reliably in all environments including CarPlay
         return (<ParentWrapper>
-        <react_native_safe_area_context_1.SafeAreaProvider 
-        // SSR support
-        initialMetrics={INITIAL_METRICS}>
-          {/* Users can override this by adding another StatusBar element anywhere higher in the component tree. */}
-          {statusbar_1.canOverrideStatusBarBehavior && <AutoStatusBar />}
-          {children}
-        </react_native_safe_area_context_1.SafeAreaProvider>
-      </ParentWrapper>);
+          <FallbackSafeAreaProvider>
+            {/* Users can override this by adding another StatusBar element anywhere higher in the component tree. */}
+            {statusbar_1.canOverrideStatusBarBehavior && <AutoStatusBar />}
+            {children}
+          </FallbackSafeAreaProvider>
+        </ParentWrapper>);
     };
     return <ContextNavigator {...props} wrapper={wrapper}/>;
 }
@@ -71,6 +113,7 @@ const initialUrl = react_native_1.Platform.OS === 'web' && typeof window !== 'un
     ? new URL(window.location.href)
     : undefined;
 function ContextNavigator({ context, location: initialLocation = initialUrl, wrapper: WrapperComponent = react_1.Fragment, linking = {}, }) {
+    
     // location and linking.getInitialURL are both used to initialize the router state
     //  - location is used on web and during static rendering
     //  - linking.getInitialURL is used on native
@@ -103,34 +146,47 @@ function ContextNavigator({ context, location: initialLocation = initialUrl, wra
     const serverUrl = serverContext.location
         ? `${serverContext.location.pathname}${serverContext.location.search}`
         : undefined;
-    const store = (0, router_store_1.useInitializeExpoRouter)(context, {
-        ...linking,
-        serverUrl,
-    });
-    (0, useDomComponentNavigation_1.useDomComponentNavigation)(store);
-    if (store.shouldShowTutorial()) {
-        SplashScreen.hideAsync();
-        if (process.env.NODE_ENV === 'development') {
-            const Tutorial = require('./onboard/Tutorial').Tutorial;
-            return (<WrapperComponent>
-          <Tutorial />
-        </WrapperComponent>);
-        }
-        else {
-            // Ensure tutorial styles are stripped in production.
-            return null;
+    try {
+        const store = (0, router_store_1.useInitializeExpoRouter)(context, {
+            ...linking,
+            serverUrl,
+        });
+        (0, useDomComponentNavigation_1.useDomComponentNavigation)(store);
+        
+        if (store.shouldShowTutorial()) {
+            // Skip splash screen handling for CarPlay compatibility (always using fallback SafeArea)
+            // SplashScreen.hideAsync(); // Commented out to maintain CarPlay compatibility
+            if (process.env.NODE_ENV === 'development') {
+                const Tutorial = require('./onboard/Tutorial').Tutorial;
+                return (<WrapperComponent>
+              <Tutorial />
+            </WrapperComponent>);
+            }
+            else {
+                // Ensure tutorial styles are stripped in production.
+                return null;
+            }
         }
+        const Component = store.rootComponent;
+        return (<NavigationContainer_1.NavigationContainer ref={store.navigationRef} initialState={store.initialState} linking={store.linking} onUnhandledAction={onUnhandledAction} documentTitle={{
+                enabled: false,
+            }}>
+          <serverLocationContext_1.ServerContext.Provider value={serverContext}>
+            <WrapperComponent>
+              <Component />
+            </WrapperComponent>
+          </serverLocationContext_1.ServerContext.Provider>
+        </NavigationContainer_1.NavigationContainer>);
+    } catch (error) {
+        // Return a fallback component for CarPlay or other error scenarios
+        return (<WrapperComponent>
+          <react_native_1.View style={{flex: 1, backgroundColor: '#000'}}>
+            <react_native_1.Text style={{color: '#fff', textAlign: 'center', marginTop: 50}}>
+              Router Error: {error.message}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </WrapperComponent>);
     }
-    const Component = store.rootComponent;
-    return (<NavigationContainer_1.NavigationContainer ref={store.navigationRef} initialState={store.initialState} linking={store.linking} onUnhandledAction={onUnhandledAction} documentTitle={{
-            enabled: false,
-        }}>
-      <serverLocationContext_1.ServerContext.Provider value={serverContext}>
-        <WrapperComponent>
-          <Component />
-        </WrapperComponent>
-      </serverLocationContext_1.ServerContext.Provider>
-    </NavigationContainer_1.NavigationContainer>);
 }
 let onUnhandledAction;
 if (process.env.NODE_ENV !== 'production') {
diff --git a/node_modules/expo-router/build/qualified-entry.js b/node_modules/expo-router/build/qualified-entry.js
index 5e17f1b..76c342b 100644
--- a/node_modules/expo-router/build/qualified-entry.js
+++ b/node_modules/expo-router/build/qualified-entry.js
@@ -8,6 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.App = void 0;
+
 // This has to be the string "expo-router/_ctx" as we resolve the exact string to
 // a different file in a custom resolver for bundle splitting in Node.js.
 const _ctx_1 = require("expo-router/_ctx");
diff --git a/node_modules/expo-router/build/renderRootComponent.js b/node_modules/expo-router/build/renderRootComponent.js
index a6d26f2..98c1654 100644
--- a/node_modules/expo-router/build/renderRootComponent.js
+++ b/node_modules/expo-router/build/renderRootComponent.js
@@ -68,10 +68,11 @@ function convertError(error) {
  */
 function renderRootComponent(Component) {
     try {
-        // This must be delayed so the user has a chance to call it first.
-        setTimeout(() => {
-            SplashScreen._internal_preventAutoHideAsync?.();
-        });
+        // Skip splash screen handling for CarPlay compatibility (always using fallback SafeArea)
+        // setTimeout(() => {
+        //     SplashScreen._internal_preventAutoHideAsync?.();
+        // }); // Commented out to maintain CarPlay compatibility
+        
         React.startTransition(() => {
             if (process.env.NODE_ENV !== 'production') {
                 const { withErrorOverlay } = require('@expo/metro-runtime/error-overlay');
@@ -84,7 +85,7 @@ function renderRootComponent(Component) {
     }
     catch (e) {
         // Hide the splash screen if there was an error so the user can see it.
-        SplashScreen.hideAsync();
+        // SplashScreen.hideAsync(); // Commented out to maintain CarPlay compatibility
         const error = convertError(e);
         // Prevent the app from throwing confusing:
         //  ERROR  Invariant Violation: "main" has not been registered. This can happen if:

but of course you first need to implement scenes that includes:

adding this to info.plist

<key>UIApplicationSceneManifest</key>
	<dict>
		<key>UISceneConfigurations</key>
		<dict>
			<key>CPTemplateApplicationSceneSessionRoleApplication</key>
			<array>
				<dict>
					<key>UISceneClassName</key>
					<string>CPTemplateApplicationScene</string>
					<key>UISceneConfigurationName</key>
					<string>Car</string>
					<key>UISceneDelegateClassName</key>
					<string>CarSceneDelegate</string>
				</dict>
			</array>
			<key>UIWindowSceneSessionRoleApplication</key>
			<array>
				<dict>
					<key>UISceneClassName</key>
					<string>UIWindowScene</string>
					<key>UISceneConfigurationName</key>
					<string>Phone</string>
					<key>UISceneDelegateClassName</key>
					<string>PhoneSceneDelegate</string>
				</dict>
			</array>
		</dict>
	</dict>

then Create CarSceneDelegate.mm

#import "CarSceneDelegate.h"
#import "AppDelegate.h"
#import "RNCarPlay.h"

@implementation CarSceneDelegate

- (void)templateApplicationScene:(CPTemplateApplicationScene *)templateApplicationScene
   didConnectInterfaceController:(CPInterfaceController *)interfaceController
{ 
  [RNCarPlay connectWithInterfaceController:interfaceController window:templateApplicationScene.carWindow];
}

- (void)templateApplicationScene:(CPTemplateApplicationScene *)templateApplicationScene didDisconnectInterfaceController:(CPInterfaceController *)interfaceController
{
    [RNCarPlay disconnect];
}

@end

Finally in PhoneSceneDelegate

#import "PhoneSceneDelegate.h"
#import "AppDelegate.h"

@implementation SceneDelegate

- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
    if ([scene isKindOfClass:[UIWindowScene class]]) {
        AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];

        self.window = appDelegate.window;
        self.window.windowScene = (UIWindowScene *)scene;
        [self.window makeKeyAndVisible];
    }
}

- (void)scene:(UIScene *)scene continueUserActivity:(NSUserActivity *)userActivity {
  AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
  [appDelegate application:[UIApplication sharedApplication] continueUserActivity:userActivity restorationHandler:^(NSArray<id<UIUserActivityRestoring>> * _Nullable restorableObjects) {
    // Handle restoration here if needed
  }];
}

- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts {
  UIOpenURLContext *context = [URLContexts anyObject];
  if (context) {
    NSURL *url = context.URL;
    AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    [appDelegate application:[UIApplication sharedApplication] openURL:url options:@{}];
  }
}

@end

this works for me in "expo": "~52.0.23"

Not available in Expo #236

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions