mobile: add tab navigation (#3261)

* add tab navigation

* add tab icons

* update tab bar icon styling

* hide tab bar within webview

* fix tab bar rendering

* fix extra bottom padding

* reset back to initial path on tab press

* add comments

* fix typecheck error

apps/tlon-mobile/.svgrc

@@ -0,0 +1,6 @@
+{
+  "ref": true,
+  "replaceAttrValues": {
+    "#333333": "{props.color}"
+  }
+}

apps/tlon-mobile/assets/icons/index.ts

@@ -0,0 +1,6 @@
+export { default as ActivityFilled } from './filled/Activity.svg';
+export { default as ActivityOutlined } from './outlined/Activity.svg';
+export { default as HomeFilled } from './filled/Home.svg';
+export { default as HomeOutlined } from './outlined/Home.svg';
+export { default as MessagesFilled } from './filled/Messages.svg';
+export { default as MessagesOutlined } from './outlined/Messages.svg';

apps/tlon-mobile/ios/Landscape.xcodeproj/project.pbxproj

@@ -835,18 +835,6 @@
 					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
 					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
 					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 16.0;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -858,11 +846,7 @@
 				ONLY_ACTIVE_ARCH = YES;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -924,18 +908,6 @@
 					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
 					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
 					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
-					" ${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 16.0;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -946,11 +918,7 @@
 				MTL_ENABLE_DEBUG_INFO = NO;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

apps/tlon-mobile/ios/Podfile.lock

@@ -1205,6 +1205,8 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
+  - RNSVG (14.1.0):
+    - React-Core
   - SocketRocket (0.6.1)
   - sqlite3 (3.42.0):
     - sqlite3/common (= 3.42.0)
@@ -1295,6 +1297,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
+  - RNSVG (from `../../../node_modules/react-native-svg`)
   - UMAppLoader (from `../../../node_modules/unimodules-app-loader/ios`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -1481,6 +1484,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../../../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../../../node_modules/react-native-svg"
   UMAppLoader:
     :path: "../../../node_modules/unimodules-app-loader/ios"
   Yoga:
@@ -1584,11 +1589,12 @@ SPEC CHECKSUMS:
   RNGestureHandler: 28bdf9a766c081e603120f79e925b72817c751c6
   RNReanimated: 1873432b0b86d0224bbe19aacea7ad8eef4e7518
   RNScreens: 2b73f5eb2ac5d94fbd61fa4be0bfebd345716825
+  RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   sqlite3: f163dbbb7aa3339ad8fc622782c2d9d7b72f7e9c
   UMAppLoader: 5df85360d65cabaef544be5424ac64672e648482
   Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
 
 PODFILE CHECKSUM: bebef443864c4d459a5b44fcd000912004c764e1
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.15.2

apps/tlon-mobile/metro.config.js

@@ -10,6 +10,7 @@ const config = getDefaultConfig(projectRoot);
 module.exports = mergeConfig(config, {
   watchFolders: [workspaceRoot],
   transformer: {
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
@@ -24,10 +25,12 @@ module.exports = mergeConfig(config, {
     }),
   },
   resolver: {
+    assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
     disableHierarchicalLookup: true,
     nodeModulesPaths: [
       path.resolve(projectRoot, 'node_modules'),
       path.resolve(workspaceRoot, 'node_modules'),
     ],
+    sourceExts: [...config.resolver.sourceExts, 'svg'],
   },
 });

apps/tlon-mobile/package.json

@@ -35,8 +35,10 @@
     "@react-native-community/netinfo": "11.1.0",
     "@react-native-firebase/app": "^18.4.0",
     "@react-native-firebase/crashlytics": "^18.4.0",
+    "@react-navigation/bottom-tabs": "^6.5.12",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
+    "@tloncorp/shared": "*",
     "@urbit/aura": "^1.0.0",
     "classnames": "^2.3.2",
     "expo": "^50.0.6",
@@ -67,6 +69,7 @@
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-storage": "^1.0.1",
+    "react-native-svg": "^14.1.0",
     "react-native-webview": "13.6.4",
     "tailwind-rn": "^4.2.0"
   },
@@ -88,6 +91,7 @@
     "postcss": "^8.4.26",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.4",
+    "react-native-svg-transformer": "^1.3.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.3",
     "vitest": "^1.0.4"

apps/tlon-mobile/src/App.tsx

@@ -14,15 +14,15 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useTailwind } from 'tailwind-rn';
 
-import { AppWebView } from './AppWebView';
 import { LoadingSpinner } from './components/LoadingSpinner';
 import { ShipProvider, useShip } from './contexts/ship';
 import { useDeepLink } from './hooks/useDeepLink';
 import { useIsDarkMode } from './hooks/useIsDarkMode';
+import { useScreenOptions } from './hooks/useScreenOptions';
 import { inviteShipWithLure } from './lib/hostingApi';
+import { TabStack } from './navigation/TabStack';
 import { CheckVerifyScreen } from './screens/CheckVerifyScreen';
 import { EULAScreen } from './screens/EULAScreen';
-import { ExternalWebViewScreen } from './screens/ExternalWebViewScreen';
 import { JoinWaitListScreen } from './screens/JoinWaitListScreen';
 import { RequestPhoneVerifyScreen } from './screens/RequestPhoneVerifyScreen';
 import { ReserveShipScreen } from './screens/ReserveShipScreen';
@@ -35,14 +35,13 @@ import { SignUpEmailScreen } from './screens/SignUpEmailScreen';
 import { SignUpPasswordScreen } from './screens/SignUpPasswordScreen';
 import { TlonLoginScreen } from './screens/TlonLoginScreen';
 import { WelcomeScreen } from './screens/WelcomeScreen';
-import type { MainStackParamList, OnboardingStackParamList } from './types';
+import type { OnboardingStackParamList } from './types';
 import { posthogAsync, trackError } from './utils/posthog';
 
 type Props = {
   wer?: string;
 };
 
-const MainStack = createNativeStackNavigator<MainStackParamList>();
 const OnboardingStack = createNativeStackNavigator<OnboardingStackParamList>();
 
 const App = ({ wer: initialWer }: Props) => {
@@ -52,18 +51,9 @@ const App = ({ wer: initialWer }: Props) => {
   const [connected, setConnected] = useState(true);
   const { wer, lure, priorityToken, clearDeepLink } = useDeepLink();
   const navigation = useNavigation();
+  const screenOptions = useScreenOptions();
   const gotoPath = wer ?? initialWer;
 
-  const screenOptions = {
-    headerTitle: '',
-    headerBackTitleVisible: false,
-    headerShadowVisible: false,
-    headerStyle: {
-      backgroundColor: isDarkMode ? '#000' : '#fff',
-    },
-    headerTintColor: isDarkMode ? '#fff' : '#333',
-  };
-
   useEffect(() => {
     const unsubscribeFromNetInfo = NetInfo.addEventListener(
       ({ isConnected }) => {
@@ -125,21 +115,7 @@ const App = ({ wer: initialWer }: Props) => {
                 <LoadingSpinner />
               </View>
             ) : isAuthenticated ? (
-              <MainStack.Navigator
-                initialRouteName="AppWebView"
-                screenOptions={screenOptions}
-              >
-                <MainStack.Screen
-                  name="AppWebView"
-                  component={AppWebView}
-                  options={{ headerShown: false }}
-                  initialParams={{ gotoPath }}
-                />
-                <MainStack.Screen
-                  name="ExternalWebView"
-                  component={ExternalWebViewScreen}
-                />
-              </MainStack.Navigator>
+              <TabStack />
             ) : (
               <OnboardingStack.Navigator
                 initialRouteName="Welcome"

apps/tlon-mobile/src/hooks/useScreenOptions.ts

@@ -0,0 +1,16 @@
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
+
+import { useIsDarkMode } from './useIsDarkMode';
+
+export const useScreenOptions = (): NativeStackNavigationOptions => {
+  const isDarkMode = useIsDarkMode();
+  return {
+    headerTitle: '',
+    headerBackTitleVisible: false,
+    headerShadowVisible: false,
+    headerStyle: {
+      backgroundColor: isDarkMode ? '#000' : '#fff',
+    },
+    headerTintColor: isDarkMode ? '#fff' : '#333',
+  };
+};