[TabBarItem / TabController.TabBarItem] Option to disable tint, set icon size

[bneigher]

Which component?

TabBarItem / TabController.TabBarItem

What is the new feature?

Two very simple changes to support my (and probs common use case of using color icons as the tab icon)

Code snippet

https://github.com/wix/react-native-ui-lib/blob/master/src/components/tabController/TabBarItem.tsx#L228-L243

disableIconTint prop (or item setting)

getIconStyle() {
    const {index, currentPage, iconColor, selectedIconColor, labelColor, selectedLabelColor, disableIconTint, ignore} = this.props;

    /* new stuff here */
    if (disableIconTint) {
       return {}
    }
    /* end new stuff */

    const activeColor = selectedIconColor || selectedLabelColor || DEFAULT_SELECTED_LABEL_COLOR;
    const inactiveColor = iconColor || labelColor || DEFAULT_LABEL_COLOR;

    const tintColor = cond(eq(currentPage, index),
      // TODO: using processColor here broke functionality,
      // not using it seem to not be very performant
      activeColor,
      ignore ? activeColor : inactiveColor);

    return {
      tintColor
    };
  }

render() {
    const {
      label,
      icon,
      badge,
      state,
      uppercase,
      activeOpacity,
      activeBackgroundColor,
      testID,
      disableIconTint = false, <-- new (bool) default: false
      iconStyle = {} <-- new (object) default: {}
    } = this.props;
    return <TouchableOpacity ref={this.itemRef} pressState={state} style={[styles.tabItem, this.getItemStyle()]} onLayout={this.onLayout} feedbackColor={activeBackgroundColor} activeOpacity={activeOpacity} onPress={this.onPress} testID={testID}>
        {icon && <Reanimated.Image source={icon} style={[iconStyle, !_.isUndefined(label) && styles.tabItemIconWithLabel, !disableIconTint && this.getIconStyle()]} />}
        {!_.isEmpty(label) && <Reanimated.Text style={[styles.tabItemLabel, this.getLabelStyle()]}>
            {uppercase ? _.toUpper(label) : label}
          </Reanimated.Text>}
        {badge && // @ts-ignore
      <Badge backgroundColor={Colors.red30} size={BADGE_SIZES.default} {...badge} containerStyle={styles.badge} />}
      </TouchableOpacity>;
  }

These two changes allow for my use case as pictured above.

generateTabItems = () => {

    let items = _map(this.props.items, (tab, i) => ({
      icon: this.getIcon(tab),
      label: '',
      key: i,
      disableIconTint: true,
      iconStyle: { width: 32, height: 32 },
    }));

    return items;
  };

render () {
  return (
        <TabController
            key={key}
            selectedIndex={selectedIndex}
            onChangeIndex={this.onChangeIndex}
            items={this.generateTabItems()}>
             ...
       </TabController>
   }
}
...

[ethanshar]

Hi @bneigher That looks good.. Do you mind submitting a PR?

[nedjulius]

hey, I've submitted a PR with this change @ethanshar #1314

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.