sdp-tech#7 feat: add custom bottom tab navigation (sdp-tech#10)

* sdp-tech#7 feat: add tab navigation structure

* sdp-tech#7 feat: add svg transformer on project

* sdp-tech#7 feat: add custom bottom tab bar

App.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 import HomeScreen from './src/pages/Home';
 import MyPageScreen from './src/pages/MyPage';
 
+import HomeIcon from './src/assets/navbar/Home.svg';
+import MyPageIcon from './src/assets/navbar/MyPage.svg';
+
 const Stack = createNativeStackNavigator();
 
 function App(): React.JSX.Element {
@@ -27,11 +31,76 @@ export type TabProps = {
   마이페이지: undefined;
 };
 
+const CustomTab = ({ state, descriptors, navigation }: BottomTabBarProps) => {
+  return (
+    <View
+      style={{
+        height: 86,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        backgroundColor: '#FFFFFF',
+        paddingHorizontal: 10,
+      }}
+    >
+      {state.routes.map((route, index) => {
+        const isFocused = state.index == index;
+        const onPress = () => {
+          if (route.name == '홈') {
+            if (isFocused)
+              navigation.reset({
+                routes: [{ name: route.name, params: { id: undefined } }],
+              });
+            else navigation.navigate(route.name, { id: undefined });
+          } else if (route.name == '마이페이지') {
+            if (isFocused)
+              navigation.reset({
+                routes: [{ name: route.name, params: { id: undefined } }],
+              });
+            else navigation.navigate(route.name, { id: undefined });
+          }
+        };
+        return (
+          <TouchableOpacity
+            key={index}
+            onPress={onPress}
+            style={{
+              width: "20%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {
+              {
+                0: <HomeIcon color='#000000' opacity={isFocused ? 1 : 0.4} />,
+                1: <MyPageIcon color='#000000' opacity={isFocused ? 1 : 0.4} />,
+              }[index]
+            }
+
+            <Text
+              style={{
+                color: '#000000',
+                opacity: isFocused ? 1 : 0.4,
+                marginVertical: 5,
+                fontSize: 12,
+              }}
+            >
+              {route.name}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  )
+}
+
 const Tab = createBottomTabNavigator<TabProps>();
 const HomeTab = (): JSX.Element => {
   return (
     <Tab.Navigator
-      initialRouteName="홈"
+      tabBar={(props) => <CustomTab {...props} />}
+      initialRouteName='홈'
       screenOptions={() => ({
         headerShown: false,
       })}>

declarations.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+  import React from "react";
+  import { SvgProps } from "react-native-svg";
+  const content: React.FC<SvgProps>;
+  export default content;
+}

ios/Podfile.lock

@@ -1123,6 +1123,8 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
+  - RNSVG (14.1.0):
+    - React-Core
   - SocketRocket (0.6.1)
   - Yoga (1.14.0)
 
@@ -1203,6 +1205,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNKeychain (from `../node_modules/react-native-keychain`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1325,6 +1328,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-keychain"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1392,6 +1397,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 61bfdfc05db9b79dd61f894dcd29d3dcc6db3c02
   RNKeychain: a65256b6ca6ba6976132cc4124b238a5b13b3d9c
   RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2
+  RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 13c8ef87792450193e117976337b8527b49e8c03
 

metro.config.js

@@ -1,11 +1,22 @@
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 
+const defaultConfig = getDefaultConfig(__dirname);
+const { assetExts, sourceExts } = defaultConfig.resolver;
+
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = {};
+const config = {
+  transformer: {
+    babelTransformerPath: require.resolve("react-native-svg-transformer")
+  },
+  resolver: {
+    assetExts: assetExts.filter((ext) => ext !== "svg"),
+    sourceExts: [...sourceExts, "svg"]
+  }
+};
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package.json

@@ -21,7 +21,8 @@
     "react-native-gesture-handler": "^2.14.0",
     "react-native-keychain": "^8.1.2",
     "react-native-safe-area-context": "^4.8.2",
-    "react-native-screens": "^3.29.0"
+    "react-native-screens": "^3.29.0",
+    "react-native-svg": "^14.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -46,6 +47,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
+    "react-native-svg-transformer": "^1.3.0",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4"
   },