[nav] Add MyContentStackNavigator and remove basic nav on HomeScreen #13

App.tsx

@@ -1,57 +1,10 @@
-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} />;
-}
+import TabNavigator from './src/navigation/TabNavigator';
 
 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>
+      <TabNavigator />
     </NavigationContainer>
   );
 }

assets/icons.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 
 export type IconType =
   | 'home_outline'
+  | 'search_outline'
   | 'document_outline'
   | 'notifications_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} />,
 };

package.json

@@ -17,6 +17,7 @@
     "@react-navigation/material-bottom-tabs": "^6.2.17",
     "@react-navigation/native": "^6.1.8",
     "@react-navigation/native-stack": "^6.9.14",
+    "@react-navigation/stack": "^6.3.18",
     "axios": "^1.5.0",
     "expo": "~49.0.11",
     "expo-status-bar": "~1.6.0",

src/navigation/TabNavigator.tsx

@@ -0,0 +1,57 @@
+import { Ionicons } from '@expo/vector-icons';
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+import { ReactElement } from 'react';
+import HomeScreen from '../screens/HomeScreen';
+import SearchScreen from '../screens/SearchScreen';
+import { RootStackParamsList } from '../types/navigation';
+import MyContentStackNavigator from './stacks/MyContentStackNavigator';
+
+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 MyContentIcon({ color }: { color: string }) {
+  return <Ionicons name="document-outline" color={color} size={26} />;
+}
+
+const Tab = createMaterialBottomTabNavigator<RootStackParamsList>();
+
+function TabNavigator(): ReactElement {
+  return (
+    <Tab.Navigator
+      initialRouteName="Home"
+      barStyle={{ backgroundColor: '#E5E4E2' }}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarLabel: 'Home',
+          tabBarIcon: HomeIcon,
+        }}
+      />
+      <Tab.Screen
+        name="Search"
+        component={SearchScreen}
+        options={{
+          tabBarLabel: 'Search',
+          tabBarIcon: SearchIcon,
+        }}
+      />
+      <Tab.Screen
+        name="Content"
+        component={MyContentStackNavigator}
+        options={{
+          tabBarLabel: 'My Content',
+          tabBarIcon: MyContentIcon,
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default TabNavigator;

src/navigation/stacks/MyContentStackNavigator.tsx

@@ -0,0 +1,20 @@
+import { createStackNavigator } from '@react-navigation/stack';
+import React from 'react';
+import MyContentScreen from '../../screens/MyContent';
+import StoryScreen from '../../screens/StoryScreen';
+import { MyContentStackParamList } from '../../types/navigation';
+
+const MyContentStack = createStackNavigator<MyContentStackParamList>();
+
+export default function MyContentStackNavigator() {
+  return (
+    <MyContentStack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <MyContentStack.Screen name="MyContent" component={MyContentScreen} />
+      <MyContentStack.Screen name="Story" component={StoryScreen} />
+    </MyContentStack.Navigator>
+  );
+}

src/screens/HomeScreen.tsx

@@ -1,24 +1,10 @@
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
-import { Button, Text, View } from 'react-native';
-import { RootStackParamsList } from '../types/types';
+import { Text, View } from 'react-native';
 
-type HomeScreenProps = NativeStackScreenProps<RootStackParamsList, 'Home'>;
-
-export default function HomeScreen(props: HomeScreenProps) {
-  const { navigation } = props;
+export default function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>GIRLS WRITE NOW!</Text>
-      <View style={{ padding: 20 }}>
-        <Button title="Story Page" onPress={() => navigation.push('Story')} />
-      </View>
-      <View style={{ padding: 20 }}>
-        <Button title="Login Page" onPress={() => navigation.push('Login')} />
-      </View>
-      <View style={{ padding: 20 }}>
-        <Button title="Toast Page" onPress={() => navigation.push('Toast')} />
-      </View>
     </View>
   );
 }

src/screens/MyContent.tsx

@@ -0,0 +1,24 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+import { Button, Text, View } from 'react-native';
+import { MyContentStackParamList } from '../types/navigation';
+
+type MyContentScreenProps = NativeStackScreenProps<
+  MyContentStackParamList,
+  'MyContent'
+>;
+
+export default function MyContentScreen(props: MyContentScreenProps) {
+  const { navigation } = props;
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>My Content</Text>
+      <View style={{ padding: 20 }}>
+        <Button
+          title="Story Page"
+          onPress={() => navigation.navigate('Story')}
+        />
+      </View>
+    </View>
+  );
+}

src/screens/SearchScreen.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default function SearchScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Search Screen</Text>
+    </View>
+  );
+}

src/types/navigation.tsx

@@ -0,0 +1,10 @@
+export type RootStackParamsList = {
+  Home: undefined;
+  Search: undefined;
+  Content: undefined;
+};
+
+export type MyContentStackParamList = {
+  MyContent: undefined;
+  Story: undefined;
+};

src/types/types.tsx

@@ -1,6 +0,0 @@
-export type RootStackParamsList = {
-  Home: undefined;
-  Story: undefined;
-  Login: undefined;
-  Toast: undefined;
-};