react native bottom tab navigation

bottom tab navigation 사용

const Tab = createBottomTabNavigator();

const BottomTab = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          showLabel: false,
          style: {
            position: 'absolute',
            height: 70,
          },
        }}>
        <Tab.Screen
          name="dashboard"
          component={DashBoard}
          options={{
            tabBarIcon: ({focused}) => (
              <Image
                source={
                  focused
                    ? require('../navigations/images/dashboardcolor.png')
                    : require('../navigations/images/dashboard.png')
                }
                style={{
                  width: 20,
                  height: 20,
                }}
              />
            ),
          }}
        />
        <Tab.Screen
          name="history"
          component={Historys}
          options={{
            tabBarIcon: ({focused}) => (
              <Image
                source={
                  focused
                    ? require('../navigations/images/historycolor.png')
                    : require('../navigations/images/history.png')
                }
                style={{
                  width: 20,
                  height: 20,
                }}
              />
            ),
          }}
        />
        <Tab.Screen
          name="program"
          component={Program}
          options={{
            tabBarIcon: ({focused}) => (
              <Image
                source={
                  focused
                    ? require('../navigations/images/programcolor.png')
                    : require('../navigations/images/program.png')
                }
                style={{
                  width: 21,
                  height: 23,
                }}
              />
            ),
          }}
        />
        <Tab.Screen
          name="msg"
          component={MessagesScreen}
          options={{
            tabBarIcon: ({focused}) => (
              <Image
                source={
                  focused
                    ? require('../navigations/images/msgcolor.png')
                    : require('../navigations/images/msg.png')
                }
                style={{
                  width: 20,
                  height: 16,
                }}
              />
            ),
          }}
        />
        <Tab.Screen
          name="setting"
          component={SettingScreen}
          options={{
            tabBarIcon: ({focused}) => (
              <Image
                source={
                  focused
                    ? require('../navigations/images/settingcolor.png')
                    : require('../navigations/images/setting.png')
                }
                style={{
                  width: 20,
                  height: 20,
                }}
              />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default BottomTab;