[React Native] React Navigation bottom-tabs에 custom icon 적용하는 방법

리액트 네이티브 라이브러리 @react-navigation/bottom-tabs을 사용할 때 custom icon을 적용하는 방법에 대해서 설명하겠습니다. React Native와 React Navigation 버전정보는 아래와 같습니다. 꼭 참고하시기 바랍니다.

Dependencies

• React Native v0.61
• @react-navigation/bottom-tabs v5.0.7

저의 메인 라우트 설정은 아래와 같습니다. active와 inactive에 따른 이미지 처리를 하기 위해 각 이미지를 각 라우트의 property로 설정해뒀습니다.

export const mainRoutes = [
  {
    name: "메뉴1",
    com: Home,
    inactiveIcon: require("../assets/icons/tab/icon_all_home_inactive.png"),
    activeIcon: require("../assets/icons/tab/icon_all_home_active.png")
  },
  {
    name: "메뉴2",
    com: Home,
    inactiveIcon: require("../assets/icons/tab/icon_all_analysis_inactive.png"),
    activeIcon: require("../assets/icons/tab/icon_all_analysis_active.png")
  },
  {
    name: "메뉴3",
    com: Home,
    inactiveIcon: require("../assets/icons/tab/icon_all_map_inactive.png"),
    activeIcon: require("../assets/icons/tab/icon_all_map_active.png")
  },
  {
    name: "메뉴4",
    com: Home,
    inactiveIcon: require("../assets/icons/tab/icon_all_qr_inactive.png"),
    activeIcon: require("../assets/icons/tab/icon_all_qr_active.png")
  }
];

TabNavigator 컴포넌트를 불러오는 부분에서 각 Tab.Screen의 옵션을 지정해줍니다. custom icon(image)를 처리하기 위해서 Tab.Screen의 options props를 활용해야 됩니다.

<Tab.Screen
  key={`screen--${route.name}`}
  name={route.name}
  component={route.com}
  options={{
    tabBarIcon: ({ focused }) => {
      return (
        <Image
          source={focused ? route.activeIcon : route.inactiveIcon}
          style={{ width: 20, height: 20 }}
        />
      );
    }
  }}
/>

중요한 부분인 options에서 tabBarIcon을 주목해주세요.

  options={{
    tabBarIcon: ({ focused }) => {
      return (
        <Image
          source={focused ? route.activeIcon : route.inactiveIcon}
          style={{ width: 20, height: 20 }}
        />
      );
    }
  }}

tabTabIcon에서 받아온 focused의 상태값에 따라서 Image 컴포넌트의 source를 변경해주는 것을 확인할 수 있습니다. focused에 따라서 어떤 이미지를 보여줄지에 대해서 삼항연산자로 처리하면 간단하게 구현 가능합니다.

 

전체 코드는 아래와 같습니다.

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        {mainRoutes.map(route => (
          <Tab.Screen
            key={`screen--${route.name}`}
            name={route.name}
            component={route.com}
            options={{
              tabBarIcon: ({ focused }) => {
                return (
                  <Image
                    source={focused ? route.activeIcon : route.inactiveIcon}
                    style={{ width: 20, height: 20 }}
                  />
                );
              }
            }}
          />
        ))}
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Result