add expo routing and global styles

App.tsx

@@ -1,57 +1,4 @@
-import { Ionicons } from '@expo/vector-icons';
-import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
-import { NavigationContainer } from '@react-navigation/native';
-import HomeScreen from './src/screens/HomeScreen';
-import StoryScreen from './src/screens/StoryScreen';
-import ToastScreen from './src/screens/ToastScreen';
-import { RootStackParamsList } from './src/types/types';
-
-const Tab = createMaterialBottomTabNavigator<RootStackParamsList>();
-
-function HomeIcon({ color }: { color: string }) {
-  return <Ionicons name="home-outline" color={color} size={26} />;
-}
-
-function StoryIcon({ color }: { color: string }) {
-  return <Ionicons name="document-outline" color={color} size={26} />;
-}
-
-function ToastIcon({ color }: { color: string }) {
-  return <Ionicons name="notifications-outline" color={color} size={26} />;
-}
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      <Tab.Navigator
-        initialRouteName="Home"
-        barStyle={{ backgroundColor: '#E5E4E2' }}
-      >
-        <Tab.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{
-            tabBarLabel: 'Home',
-            tabBarIcon: HomeIcon,
-          }}
-        />
-        <Tab.Screen
-          name="Story"
-          component={StoryScreen}
-          options={{
-            tabBarLabel: 'Story',
-            tabBarIcon: StoryIcon,
-          }}
-        />
-        <Tab.Screen
-          name="Toast"
-          component={ToastScreen}
-          options={{
-            tabBarLabel: 'Toast',
-            tabBarIcon: ToastIcon,
-          }}
-        />
-      </Tab.Navigator>
-    </NavigationContainer>
-  );
-}
+// export default function App() {
+//   return (
+//   )
+// }

app.json

@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
@@ -27,8 +25,6 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "plugins": [
-      "expo-router"
-    ]
+    "plugins": ["expo-router"]
   }
 }

assets/icons.tsx

@@ -1,15 +1,12 @@
 import { Ionicons } from '@expo/vector-icons';
 import React from 'react';
 
-export type IconType =
-  | 'home_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} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
-  notifications_outline: <Ionicons name="notifications-outline" size={23} />,
+  search_outline: <Ionicons name="search-outline" size={23} />,
 };
 type Props = {
   className?: string;

babel.config.js

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

src/app/(tabs)/_layout.tsx

@@ -0,0 +1,52 @@
+import { Tabs } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+
+function HomeIcon({ color }: { color: string }) {
+  return <Ionicons name="home-outline" color={color} size={26} />;
+}
+
+function SearchIcon({ color }: { color: string }) {
+  return <Ionicons name="search-outline" color={color} size={26} />;
+}
+
+function DocumentIcon({ color }: { color: string }) {
+  return <Ionicons name="document-outline" color={color} size={26} />;
+}
+
+function TabNav() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarStyle: { height: 60 },
+        tabBarLabelStyle: { fontSize: 14 },
+      }}
+    >
+      <Tabs.Screen
+        name="home"
+        options={{
+          headerShown: false,
+          tabBarLabel: 'Home',
+          tabBarIcon: HomeIcon,
+        }}
+      />
+      <Tabs.Screen
+        name="search"
+        options={{
+          headerShown: false,
+          tabBarLabel: 'Search',
+          tabBarIcon: SearchIcon,
+        }}
+      />
+      <Tabs.Screen
+        name="mycontent"
+        options={{
+          headerShown: false,
+          tabBarLabel: 'My Content',
+          tabBarIcon: DocumentIcon,
+        }}
+      />
+    </Tabs>
+  );
+}
+
+export default TabNav;

src/app/(tabs)/home.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'expo-router';
+import { Button, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import globalStyles from '../../../globalStyles';
+
+function HomeScreen() {
+  return (
+    <SafeAreaView style={globalStyles.container}>
+      <Text style={globalStyles.h1}>Home</Text>
+      <Link href="/settings" asChild>
+        <Button title="Settings" />
+      </Link>
+    </SafeAreaView>
+  );
+}
+
+export default HomeScreen;

src/app/(tabs)/mycontent.tsx

@@ -0,0 +1,13 @@
+import { Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import globalStyles from '../../../globalStyles';
+
+function MyContentScreen() {
+  return (
+    <SafeAreaView style={globalStyles.container}>
+      <Text style={globalStyles.h1}>My Content</Text>
+    </SafeAreaView>
+  );
+}
+
+export default MyContentScreen;

src/app/(tabs)/search/_layout.tsx

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+      <Stack.Screen name="story" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/(tabs)/search/index.tsx

@@ -0,0 +1,17 @@
+import { Text, Button } from 'react-native';
+import { Link } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import globalStyles from '../../../../globalStyles';
+
+function SearchScreen() {
+  return (
+    <SafeAreaView style={globalStyles.container}>
+      <Text style={globalStyles.h1}>Search</Text>
+      <Link href="/search/story" asChild>
+        <Button title="Story" />
+      </Link>
+    </SafeAreaView>
+  );
+}
+
+export default SearchScreen;

src/app/(tabs)/search/story.tsx

@@ -0,0 +1,13 @@
+import { Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import globalStyles from '../../../../globalStyles';
+
+function StoryScreen() {
+  return (
+    <SafeAreaView style={globalStyles.container}>
+      <Text style={globalStyles.h1}>Story</Text>
+    </SafeAreaView>
+  );
+}
+
+export default StoryScreen;

src/app/_layout.tsx

@@ -0,0 +1,13 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen name="settings" options={{ headerShown: false }} />
+      <Stack.Screen name="auth" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/auth/_layout.tsx

@@ -0,0 +1,13 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+      <Stack.Screen name="signup" options={{ headerShown: false }} />
+      <Stack.Screen name="onboarding" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/auth/index.tsx

@@ -0,0 +1,16 @@
+import { router } from 'expo-router';
+import { Button, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import globalStyles from '../../../globalStyles';
+
+function LoginScreen() {
+  return (
+    <SafeAreaView style={globalStyles.container}>
+      <Text style={globalStyles.h1}>Login</Text>
+      <Button title="Login" onPress={() => router.push('/home')} />
+      <Button title="Sign Up" onPress={() => router.push('/auth/signup')} />
+    </SafeAreaView>
+  );
+}
+
+export default LoginScreen;