[Example] Add an in-app console viewer (#4313)

## Description

Adds a console write interceptor and an in-app console viewer using it.
The logs are still appearing in the actual console.

## Test plan

Example app




https://github.com/user-attachments/assets/66c205fe-3ac3-4123-8b8f-b3d427af3eda

---------

Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>

Author: j-piasecki

apps/common-app/App.tsx

@@ -24,9 +24,14 @@ import {
   Switch,
   Touchable,
 } from 'react-native-gesture-handler';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  initialWindowMetrics,
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import { COLORS } from './src/common';
+import { ConsoleHeaderButton, ConsoleModalProvider } from './src/console';
 import { OLD_EXAMPLES } from './src/legacy';
 import { TouchableExample } from './src/legacy/release_tests/touchables';
 import { ListWithHeader } from './src/ListWithHeader';
@@ -45,41 +50,57 @@ type RootStackParamList = {
 
 const Stack = createStackNavigator<RootStackParamList>();
 export default function App() {
+  return (
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <AppContent />
+    </SafeAreaProvider>
+  );
+}
+
+function AppContent() {
   const [showLegacyVersion, setShowLegacyVersion] = useState(false);
   return (
-    <GestureHandlerRootView>
-      <NavigationContainer>
-        <Stack.Navigator
-          screenOptions={{
-            cardStyle: {
-              // It's important to set height for the screen, without it scroll doesn't work on web platform.
-              height: Dimensions.get('window').height,
-              backgroundColor: COLORS.offWhite,
-            },
-            headerStyle: {
-              backgroundColor: COLORS.offWhite,
-              borderBottomColor: COLORS.headerSeparator,
-              borderBottomWidth: 1,
-            },
-          }}>
-          <Stack.Screen
-            name="Home"
-            options={{ headerShown: false }}
-            component={MainScreen}
-          />
-          {(showLegacyVersion ? OLD_EXAMPLES : NEW_EXAMPLES)
-            .flatMap(({ data }) => data)
-            .flatMap(({ name, component }) => (
+    <GestureHandlerRootView style={styles.root}>
+      <ConsoleModalProvider>
+        <View style={styles.root}>
+          <NavigationContainer>
+            <Stack.Navigator
+              screenOptions={{
+                cardStyle: {
+                  // It's important to set height for the screen, without it scroll doesn't work on web platform.
+                  height: Dimensions.get('window').height,
+                  backgroundColor: COLORS.offWhite,
+                },
+                headerRight: () => <ConsoleHeaderButton />,
+                headerStyle: {
+                  backgroundColor: COLORS.offWhite,
+                  borderBottomColor: COLORS.headerSeparator,
+                  borderBottomWidth: 1,
+                },
+              }}>
               <Stack.Screen
-                key={name}
-                name={name}
-                getComponent={() => component}
-                options={{ title: name }}
+                name="Home"
+                options={{ headerShown: false }}
+                component={MainScreen}
               />
-            ))}
-          <Stack.Screen name="TouchableExample" component={TouchableExample} />
-        </Stack.Navigator>
-      </NavigationContainer>
+              {(showLegacyVersion ? OLD_EXAMPLES : NEW_EXAMPLES)
+                .flatMap(({ data }) => data)
+                .flatMap(({ name, component }) => (
+                  <Stack.Screen
+                    key={name}
+                    name={name}
+                    getComponent={() => component}
+                    options={{ title: name }}
+                  />
+                ))}
+              <Stack.Screen
+                name="TouchableExample"
+                component={TouchableExample}
+              />
+            </Stack.Navigator>
+          </NavigationContainer>
+        </View>
+      </ConsoleModalProvider>
     </GestureHandlerRootView>
   );
 
@@ -298,6 +319,9 @@ export default function App() {
 }
 
 const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
   container: {
     flex: 1,
     backgroundColor: COLORS.offWhite,

apps/common-app/index.ts

@@ -1,3 +1,6 @@
 import App from './App';
+import { installConsoleInterceptor } from './src/console';
+
+installConsoleInterceptor();
 
 export default App;