add more devtools

apps/tlon-mobile/package.json

@@ -39,6 +39,9 @@
     "@10play/tentap-editor": "^0.4.55",
     "@aws-sdk/client-s3": "^3.190.0",
     "@aws-sdk/s3-request-presigner": "^3.190.0",
+    "@dev-plugins/async-storage": "^0.0.3",
+    "@dev-plugins/react-navigation": "^0.0.6",
+    "@dev-plugins/react-query": "^0.0.6",
     "@google-cloud/recaptcha-enterprise-react-native": "^18.3.0",
     "@gorhom/bottom-sheet": "^4.5.1",
     "@op-engineering/op-sqlite": "5.0.5",

apps/tlon-mobile/src/App.main.tsx

@@ -1,10 +1,16 @@
+import { useAsyncStorageDevTools } from '@dev-plugins/async-storage';
+import { useReactNavigationDevTools } from '@dev-plugins/react-navigation';
+import { useReactQueryDevTools } from '@dev-plugins/react-query';
 import NetInfo from '@react-native-community/netinfo';
 import {
   DarkTheme,
   DefaultTheme,
   NavigationContainer,
+  NavigationContainerRefWithCurrent,
+  useNavigationContainerRef,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { QueryClientProvider, queryClient } from '@tloncorp/shared/dist/api';
 import { TamaguiProvider } from '@tloncorp/ui';
 import { PostHogProvider } from 'posthog-react-native';
 import type { PropsWithChildren } from 'react';
@@ -197,20 +203,32 @@ function MigrationCheck({ children }: PropsWithChildren) {
 export default function ConnectedApp(props: Props) {
   const isDarkMode = useIsDarkMode();
   const tailwind = useTailwind();
+  const navigationContainerRef = useNavigationContainerRef();
 
   return (
     <TamaguiProvider
       defaultTheme={isDarkMode ? 'dark' : 'light'}
       config={tamaguiConfig}
     >
       <ShipProvider>
-        <NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
+        <NavigationContainer
+          theme={isDarkMode ? DarkTheme : DefaultTheme}
+          ref={navigationContainerRef}
+        >
           <BranchProvider>
             <PostHogProvider client={posthogAsync} autocapture>
               <GestureHandlerRootView style={tailwind('flex-1')}>
                 <SafeAreaProvider>
                   <MigrationCheck>
-                    <App {...props} />
+                    <QueryClientProvider client={queryClient}>
+                      <App {...props} />
+
+                      {__DEV__ && (
+                        <DevTools
+                          navigationContainerRef={navigationContainerRef}
+                        />
+                      )}
+                    </QueryClientProvider>
                   </MigrationCheck>
                 </SafeAreaProvider>
               </GestureHandlerRootView>
@@ -221,3 +239,16 @@ export default function ConnectedApp(props: Props) {
     </TamaguiProvider>
   );
 }
+
+// This is rendered as a component because I didn't have any better ideas
+// on calling these hooks conditionally.
+const DevTools = ({
+  navigationContainerRef,
+}: {
+  navigationContainerRef: NavigationContainerRefWithCurrent<any>;
+}) => {
+  useAsyncStorageDevTools();
+  useReactQueryDevTools(queryClient);
+  useReactNavigationDevTools(navigationContainerRef);
+  return null;
+};