Can't use SVG icons with TabBarItem

[derscott]

Description

I don't know how to render an icon with a TabBarItem. According to the docs, the PropType for icon is number, but in the demo you use icons defined via Assets.loadAssetsGroup. Neither does work as I would expect it.

Using the component with anything else than a number gives me a PropType warning. When using a number, I actually can't make sense of how to map a number to a specific icon. With some numbers, there are even icons (or images) rendered which aren't acutally defined in the assets. iconColor also is not applied correclty to those images.

Related to

• [X] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

1. Set icon like here as Assets.icons.arrowBack (or anything else defined in Assets.loadAssetsGroup('icons').

2. When rendering the TabBar, a PropType warning shows up, saying "Warning: Failed prop type: Invalid prop source supplied to Image, expected one of type [number].". Also, the icon does not show up.

3. On the other hand, when I set icon to an arbitrary number, an icon may appear, but I can't acutally make sense of how these numbers are mapped to the Icons I defined in the Assets. Some of the images appearing (see the example and screenshot below) aren't even defined in Assets.

Expected behavior

I can use icons defined in Assets to be shown inside a TabBarItem or at least there is some kind of mapping from a number to an icon defined there. iconColor and selectedIconColor are applied correclty to the icons.

Actual behavior

I am not able to render a desired icon either using number or an object defined in Assets. Also, there is a PropType warning when using anything else than a number. When using a number, an image is rendered. But instead of applying iconColor and selectedIconColor. Instead, labelColor and selectedLabelColor are applied to the image as well.

More Info

Code snippet

const Test = () => {
  /** Generate array of TabBarItem components */
  const tabBarItems = useMemo(() => {
    return [1, 2, 3, 4].map((t) => ({
      label: `Tab ${t}`,
      icon: t,
    }))
  }, [])

  /** Index handling */
  const [selectedIndex, setSelectedIndex] = useState(0)
  const onChangeIndex = useCallback((newIndex) => {
    setSelectedIndex(newIndex)
  }, [])
  return (
    <TabController
      initialIndex={selectedIndex}
      onChangeIndex={onChangeIndex}
      items={tabBarItems}
    >
      <TabController.TabBar
        indicatorStyle={{ backgroundColor: '#FF00FF', height: 3 }}
        indicatorInsets={0}
        spreadItems
        labelColor='#00FFFF'
        backgroundColor='#444444'
        selectedLabelColor='#FF0000'
        iconColor='#00FF00'
        selectedIconColor='#0000FF'
        enableShadow
      />
      {tabBarItems.map((t, i) => (
        <TabController.TabPage index={i} key={i}>
          <View flex-1 center>
            <Text>{t.label}</Text>
          </View>
        </TabController.TabPage>
      ))}
    </TabController>
  )
}

Screenshots/Video

Environment

• React Native version: 0.68.2
• React Native UI Lib version: 6.18.1

Affected platforms

• [X] Android
• [X] iOS
• [?] Web