[nav] Implement expo routing and add global styles

App.tsx

@@ -1,10 +1,4 @@
-import { NavigationContainer } from '@react-navigation/native';
-import TabNavigator from './src/navigation/TabNavigator';
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      <TabNavigator />
-    </NavigationContainer>
-  );
-}
+// export default function App() {
+//   return (
+//   )
+// }

app.json

@@ -6,6 +6,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
+    "scheme": "your-app-scheme",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -23,6 +24,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": ["expo-router"]
   }
 }

assets/icons.tsx

@@ -1,17 +1,12 @@
 import { Ionicons } from '@expo/vector-icons';
 import React from 'react';
 
-export type IconType =
-  | 'home_outline'
-  | 'search_outline'
-  | 'document_outline'
-  | 'notifications_outline';
+export type IconType = 'home_outline' | 'document_outline' | 'search_outline';
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   home_outline: <Ionicons name="home-outline" size={23} />,
   search_outline: <Ionicons name="search-outline" size={23} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
-  notifications_outline: <Ionicons name="notifications-outline" size={23} />,
 };
 type Props = {
   className?: string;

babel.config.js

@@ -2,5 +2,6 @@ module.exports = api => {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['expo-router/babel'],
   };
 };

globalStyles.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  h1: {
+    // fontFamily: 'DMSans-Bold',
+    fontSize: 50,
+    fontWeight: '700',
+    textAlign: 'left',
+    color: 'black',
+  },
+  h2: {
+    // fontFamily: 'DMSans-Bold',
+    fontSize: 40,
+    fontWeight: '400',
+    textAlign: 'left',
+    color: 'black',
+  },
+  h3: {
+    // fontFamily: 'DMSans-Regular',
+    fontSize: 33,
+    fontWeight: '400',
+    textAlign: 'left',
+    color: 'black',
+  },
+  h4: {
+    // fontFamily: 'DMSans-Regular',
+    fontSize: 20,
+    fontWeight: '500',
+    textAlign: 'left',
+    color: 'black',
+  },
+  body1: {
+    // fontFamily: 'DMSans-Regular',
+    fontSize: 12,
+    fontWeight: '400',
+    textAlign: 'left',
+    color: 'black',
+  },
+  body2: {
+    // fontFamily: 'DMSans-Regular',
+    fontSize: 11,
+    fontWeight: '400',
+    textAlign: 'left',
+    color: 'black',
+  },
+  body3: {
+    fontFamily: 'Avenir',
+    fontSize: 14,
+    fontWeight: '400',
+    textAlign: 'left',
+    color: 'black',
+  },
+});