feat(example-app): Add a LOT of functionality to the demo app (#1424) [skip ci]

This work builds on the old demo app that was removed a while ago.

@morganick added the basic app framework the other day and this PR
fleshes out the app to be more Reactotron branded. There's still some
work to do particularly fleshing out the custom commands screen and
getting some interaction there. Maybe we navigate them to a screen that
has no way to go back, but instruct them to run a command in Reactotron
to fix the navigation state or something.

I think that this will continue to be a work in progress. I really like
having a "kitchen sink" app that demo's all of Reactotron's
functionality.

Check out this video for how it looks in action:


https://github.com/infinitered/reactotron/assets/139261/d78f1782-579b-45c4-bbb7-1959d042e5e9

# Here's some screenshots: 

<table>
  <tr>
<td><img
src="https://github.com/infinitered/reactotron/assets/139261/66775f4b-9fd7-47dc-a8eb-db6a1e4a42ef"
/></td>
<td><img
src="https://github.com/infinitered/reactotron/assets/139261/665bb848-c15c-41ea-80e9-925aa18a8fe6"
/></td>
<td><img
src="https://github.com/infinitered/reactotron/assets/139261/483e1759-96e2-4b6e-84b1-565a73829a45"
/>
</td>
   </tr> 
</table>

---------

Co-authored-by: Nick Morgan <[email protected]>

Author: markrickert

apps/example-app/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "es5"
+}

apps/example-app/app.json

@@ -17,9 +17,7 @@
       "fallbackToCacheTimeout": 0
     },
     "jsEngine": "hermes",
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "android": {
       "icon": "./assets/images/app-icon-android-legacy.png",
       "package": "com.exampleapp",
@@ -74,4 +72,4 @@
   "ignite": {
     "version": "9.4.0"
   }
-}
+}

apps/example-app/app/app.tsx

@@ -7,7 +7,7 @@
  * it very often. But take some time to look through and understand
  * what is going on here.
  *
- * The app navigation resides in ./app/navigators, so head over there
+ * The app navigation resides in app/app/navigators, so head over there
  * if you're interested in adding screens and navigators.
  */
 if (__DEV__) {
@@ -16,23 +16,27 @@ if (__DEV__) {
   // to only execute this in development.
   require("./devtools/ReactotronConfig.ts")
 }
-import "./i18n"
-import "./utils/ignoreWarnings"
+import "app/i18n"
+import "app/utils/ignoreWarnings"
 import { useFonts } from "expo-font"
 import React from "react"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
 import * as Linking from "expo-linking"
-import { useInitialRootStore } from "./models"
-import { AppNavigator, useNavigationPersistence } from "./navigators"
-import { ErrorBoundary } from "./screens/ErrorScreen/ErrorBoundary"
-import * as storage from "./utils/storage"
-import { customFontsToLoad } from "./theme"
-import Config from "./config"
+import { useInitialRootStore } from "app/mobxStateTree"
+import { AppNavigator, useNavigationPersistence } from "app/navigators"
+import { ErrorBoundary } from "app/screens/ErrorScreen/ErrorBoundary"
+import * as storage from "app/utils/storage"
+import { customFontsToLoad } from "app/theme"
+import Config from "app/config"
 import { GestureHandlerRootView } from "react-native-gesture-handler"
-import { ViewStyle } from "react-native"
+import { StatusBar, ViewStyle } from "react-native"
+import { store } from "app/redux"
+import { Provider as ReduxProvider } from "react-redux"
 
 export const NAVIGATION_PERSISTENCE_KEY = "NAVIGATION_STATE"
 
+StatusBar.setBarStyle("light-content")
+
 // Web linking configuration
 const prefix = Linking.createURL("/")
 const config = {
@@ -96,21 +100,24 @@ function App(props: AppProps) {
 
   // otherwise, we're ready to render the app
   return (
-    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      <ErrorBoundary catchErrors={Config.catchErrors}>
-        <GestureHandlerRootView style={$container}>
-          <AppNavigator
-            linking={linking}
-            initialState={initialNavigationState}
-            onStateChange={onNavigationStateChange}
-          />
-        </GestureHandlerRootView>
-      </ErrorBoundary>
-    </SafeAreaProvider>
+    <ReduxProvider store={store}>
+      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+        <ErrorBoundary catchErrors={Config.catchErrors}>
+          <GestureHandlerRootView style={$container}>
+            <AppNavigator
+              linking={linking}
+              initialState={initialNavigationState}
+              onStateChange={onNavigationStateChange}
+            />
+          </GestureHandlerRootView>
+        </ErrorBoundary>
+      </SafeAreaProvider>
+    </ReduxProvider>
   )
 }
 
-export default App
+// eslint-disable-next-line reactotron/no-tron-in-production
+export default __DEV__ ? console.tron.overlay(App) : App
 
 const $container: ViewStyle = {
   flex: 1,

apps/example-app/app/components/AutoImage.tsx

@@ -7,7 +7,7 @@ import {
   TextStyle,
   ViewStyle,
 } from "react-native"
-import { colors, spacing, typography } from "../theme"
+import { colors, spacing, typography } from "app/theme"
 import { Text, TextProps } from "./Text"
 
 type Presets = keyof typeof $viewPresets