[dev-launcher][iOS] Fix navigating to home from Dev menu (#26045)

# Why

Closes ENG-10953

When navigating to home from dev-menu in an app dev-client with new arch
enabled on iOS the app will crash due to `"AccessibilityManager is nil"
due to the registry is nil` inside `RCTDeviceInfo`.
This happens because when we invalidate the old bridge, create a new
one, and then manually post an
`RCTUserInterfaceStyleDidChangeNotification` notification, it gets
received by an old instance of RCTDeviceInfo and then fails to find the
module as the bridge is no longer valid.

Removing the `_ensureUserInterfaceStyleIsInSyncWithTraitEnv` call from
`navigateToLauncher` fixes this racing condition issue and it doesn't
seem to create any problems related to UserInterfaceStyle

Created this issue on react-native core
facebook/react-native#42120

# How

- Remove `_ensureUserInterfaceStyleIsInSyncWithTraitEnv` call from
`navigateToLauncher`
- Add minimum support to dark mode on fabric-tester

# Test Plan



https://github.com/expo/expo/assets/11707729/54a6b68e-8db8-4296-8c9b-29fa314cafb5



# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

apps/fabric-tester/App.tsx

@@ -4,7 +4,7 @@ import { BlurView } from 'expo-blur';
 import { Camera, CameraType } from 'expo-camera';
 import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Button,
   SafeAreaView,
@@ -16,33 +16,43 @@ import {
   TouchableOpacity,
   Platform,
   Alert,
+  Appearance,
+  PlatformColor,
 } from 'react-native';
 
 function randomColor() {
   return '#' + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, '0');
 }
 
-export default class App extends React.PureComponent {
-  render() {
-    const isFabricEnabled = global.nativeFabricUIManager != null;
+export default function App() {
+  const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme());
+  const isFabricEnabled = global.nativeFabricUIManager != null;
 
-    return (
-      <SafeAreaView style={styles.container}>
-        <ScrollView>
-          <Text style={[styles.text, { marginVertical: 10 }]}>
-            isFabricEnabled: {isFabricEnabled + ''}
-          </Text>
+  useEffect(() => {
+    const listener = Appearance.addChangeListener((preferences) => {
+      setColorScheme(preferences.colorScheme);
+    });
 
-          <ImageExample />
-          <LinearGradientExample />
-          {Platform.OS === 'ios' && <BlurExample />}
-          <VideoExample />
-          <CameraExample />
-          <AppleAuthenticationExample />
-        </ScrollView>
-      </SafeAreaView>
-    );
-  }
+    return listener.remove;
+  }, []);
+
+  return (
+    <SafeAreaView
+      style={[styles.container, { backgroundColor: colorScheme === 'light' ? '#fff' : '#161b22' }]}>
+      <ScrollView>
+        <Text style={[styles.text, { marginVertical: 10 }]}>
+          isFabricEnabled: {isFabricEnabled + ''}
+        </Text>
+
+        <ImageExample />
+        <LinearGradientExample />
+        {Platform.OS === 'ios' && <BlurExample />}
+        <VideoExample />
+        <CameraExample />
+        <AppleAuthenticationExample />
+      </ScrollView>
+    </SafeAreaView>
+  );
 }
 
 export function ImageExample() {
@@ -220,11 +230,6 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: StatusBar.currentHeight,
   },
-  scrollContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#fff',
-  },
   exampleContainer: {
     padding: 20,
     borderTopWidth: StyleSheet.hairlineWidth,
@@ -252,6 +257,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
     textAlign: 'center',
+    color: PlatformColor('labelColor'),
   },
   videoExample: {
     justifyContent: 'center',

apps/fabric-tester/app.json

@@ -5,7 +5,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -14,9 +14,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.community.fabrictester"

apps/fabric-tester/ios/fabrictester/Info.plist

@@ -77,7 +77,7 @@
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>UIUserInterfaceStyle</key>
-	<string>Light</string>
+	<string>Automatic</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

packages/expo-dev-launcher/ios/EXDevLauncherController.m

@@ -313,8 +313,6 @@ - (void)navigateToLauncher
   UIView *rootView = [_bridgeDelegate createRootViewWithModuleName:@"main" launchOptions:_launchOptions application:UIApplication.sharedApplication];
   _launcherBridge = _bridgeDelegate.bridge;
 
-  [self _ensureUserInterfaceStyleIsInSyncWithTraitEnv:rootView];
-
   [[NSNotificationCenter defaultCenter] addObserver:self
                                            selector:@selector(onAppContentDidAppear)
                                                name:RCTContentDidAppearNotification