created navigation bar

App.tsx

@@ -1,34 +1,75 @@
 import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import AllTreesScreen from '@/screens/all_trees/AllTreesScreen';
-import AvailableTreesScreen from '@/screens/available_trees/AvailableTreesScreen';
+import SvgContactSelected from '@/icons/ContactSelected';
+import SvgContactUnselected from '@/icons/ContactUnselected';
+import SvgHomeSelected from '@/icons/HomeSelected';
+import SvgHomeUnselected from '@/icons/HomeUnselected';
+import ContactScreen from '@/screens/contact/ContactScreen';
 import LoginScreen from '@/screens/login/LoginScreen';
+import TreeSearchScreen from '@/screens/tree_search/TreeSearchScreen';
 import { LoginStackParamList } from '@/types/navigation';
 
-const Stack = createNativeStackNavigator<LoginStackParamList>();
 DefaultTheme.colors.background = '#FFFFFF';
+const LoginStack = createNativeStackNavigator<LoginStackParamList>();
+const NavigationTab = createBottomTabNavigator();
+
+function NavigationBar() {
+  return (
+    <NavigationTab.Navigator
+      initialRouteName="TreeSearch"
+      screenOptions={({ route }) => ({
+        tabBarShowLabel: false,
+        tabBarStyle: { paddingTop: 10 },
+        tabBarIcon: ({ focused }) => {
+          if (route.name === 'TreeSearch') {
+            return focused ? (
+              <SvgHomeSelected width={30} height={30} />
+            ) : (
+              <SvgHomeUnselected width={30} height={30} />
+            );
+          }
+          if (route.name === 'Contact') {
+            return focused ? (
+              <SvgContactSelected width={30} height={30} />
+            ) : (
+              <SvgContactUnselected width={30} height={30} />
+            );
+          }
+          return null;
+        },
+      })}
+    >
+      <NavigationTab.Screen
+        name="TreeSearch"
+        component={TreeSearchScreen}
+        options={{ headerShown: false }}
+      />
+      <NavigationTab.Screen
+        name="Contact"
+        component={ContactScreen}
+        options={{ headerShown: false }}
+      />
+    </NavigationTab.Navigator>
+  );
+}
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="Login">
-        <Stack.Screen
+      <LoginStack.Navigator initialRouteName="Login">
+        <LoginStack.Screen
           name="Login"
           component={LoginScreen}
           options={{ headerShown: false }}
         />
-        <Stack.Screen
-          name="AvailableTrees"
-          component={AvailableTreesScreen}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen
-          name="AllTrees"
-          component={AllTreesScreen}
+        <LoginStack.Screen
+          name="Main"
+          component={NavigationBar}
           options={{ headerShown: false }}
         />
-      </Stack.Navigator>
+      </LoginStack.Navigator>
     </NavigationContainer>
   );
 }