native: add tamagui

apps/tlon-mobile/metro.config.js

@@ -28,6 +28,10 @@ module.exports = mergeConfig(config, {
     nodeModulesPaths: [
       path.resolve(projectRoot, 'node_modules'),
       path.resolve(workspaceRoot, 'node_modules'),
+      // Tamagui packages expect to be able to require anything under the
+      // tamagui umbrella node_modules folder. Some modules fail to resolve
+      // without this.
+      path.resolve(workspaceRoot, 'node_modules/tamagui/node_modules'),
     ],
   },
 });

apps/tlon-mobile/src/App.tsx

@@ -7,6 +7,7 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { TamaguiProvider } from '@tloncorp/ui';
 import { PostHogProvider } from 'posthog-react-native';
 import { useEffect, useState } from 'react';
 import { Alert, StatusBar, Text, View } from 'react-native';
@@ -249,12 +250,14 @@ const App = ({ wer: initialWer }: Props) => {
 export default function AnalyticsApp(props: Props) {
   const isDarkMode = useIsDarkMode();
   return (
-    <ShipProvider>
-      <NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
-        <PostHogProvider client={posthogAsync} autocapture>
-          <App {...props} />
-        </PostHogProvider>
-      </NavigationContainer>
-    </ShipProvider>
+    <TamaguiProvider>
+      <ShipProvider>
+        <NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
+          <PostHogProvider client={posthogAsync} autocapture>
+            <App {...props} />
+          </PostHogProvider>
+        </NavigationContainer>
+      </ShipProvider>
+    </TamaguiProvider>
   );
 }

apps/tlon-mobile/src/tamagui.d.ts

@@ -0,0 +1,8 @@
+import type { config } from '@tloncorp/ui';
+
+export type Conf = typeof config;
+
+// Sets up typing for tamagui so that theme variables autocomplete
+declare module 'tamagui' {
+  interface TamaguiCustomConfig extends Conf {}
+}