basic bottom nav implementation

App.tsx

@@ -1,22 +1,57 @@
+import { Ionicons } from '@expo/vector-icons';
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import HomeScreen from './src/screens/HomeScreen';
-import LoginScreen from './src/screens/LoginScreen';
 import StoryScreen from './src/screens/StoryScreen';
 import ToastScreen from './src/screens/ToastScreen';
 import { RootStackParamsList } from './src/types/types';
 
-const Stack = createNativeStackNavigator<RootStackParamsList>();
+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>
-      <Stack.Navigator>
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="Story" component={StoryScreen} />
-        <Stack.Screen name="Login" component={LoginScreen} />
-        <Stack.Screen name="Toast" component={ToastScreen} />
-      </Stack.Navigator>
+      <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>
   );
 }

assets/icons.tsx

@@ -0,0 +1,24 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+
+export type IconType =
+  | 'home_outline'
+  | 'document_outline'
+  | 'notifications_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} />,
+};
+type Props = {
+  className?: string;
+  type: IconType;
+};
+
+const Icon: React.FC<Props> = ({ className, type }: Props) =>
+  React.cloneElement(IconSvgs[type], {
+    className,
+  });
+
+export default Icon;