그리고 Tab.Screen의 options Props에는 다음과 같은 값을 설정할 수 있습니다.

다음과 같이 코드를 변경해 탭 아이콘에 배지를 설정해보세요.

screens/MainScreen.js

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabBarLabel: '홈',
    tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
    tabBarColor: 'black',
    tabBarBadge: 'new',
  }}
/>
<Tab.Screen
  name="Search"
  component={SearchScreen}
  options={{
    tabBarLabel: '검색',
    tabBarIcon: ({color}) => (
      <Icon name="search" color={color} size={24} />
    ),
    tabBarColor: 'gray',
  }}
/>
<Tab.Screen
  name="Notification"
  component={NotificationScreen}
  options={{
    tabBarLabel: '알림',
    tabBarIcon: ({color}) => (
      <Icon name="notifications" color={color} size={24} />
    ),
    tabBarColor: 'green',
    tabBarBadge: 30,
  }}
/>
<Tab.Screen
  name="Message"
  component={MessageScreen}
  options={{
    tabBarLabel: '메시지',
    tabBarIcon: ({color}) => (
      <Icon name="message" color={color} size={24} />
    ),
    tabBarColor: 'blue',
    tabBarBadge: true,
  }}
/>

▲ 그림 5-27 tabBarBadge