add custom elements to TabBarItem (#1383)

Author: lidord-wix

demo/src/screens/componentScreens/TabBarScreen.tsx

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Button, TabBar} from 'react-native-ui-lib';
-
+import {Colors, View, Button, TabBar, Image} from 'react-native-ui-lib';
 
 const labelsArray = [
   ['ONE TWO', 'THREE', 'THREEEEEEEE', 'FOUR', 'FIVE FIVE', 'SIX', 'SEVEN-ELEVEN'],
@@ -12,17 +11,18 @@ const labelsArray = [
   ['FIVE FIVE', 'ONE TWO', 'THREE', 'THREEEEEEEE', 'FOUR', 'SIX', 'SEVEN-ELEVEN']
 ];
 const ADD_ITEM_ICON = require('../../assets/icons/plus.png');
+const BELL_ICON = require('../../assets/icons/bell.png');
 const themeColors = [Colors.violet30, Colors.green30, Colors.red30, Colors.blue30, Colors.yellow30];
 
-
 export default class TabBarScreen extends Component {
   state = {
     selectedIndex: 1,
     selectedIndex1: 1,
     selectedIndex2: 1,
     labels: labelsArray[0],
     currentTabs: [],
-    themeColor: themeColors[0]
+    themeColor: themeColors[0],
+    bellColor: Colors.red30
   };
 
   counter = 0;
@@ -70,6 +70,14 @@ export default class TabBarScreen extends Component {
     this.setState({themeColor: themeColors[this.colorCounter]});
   };
 
+  updateBellColor = (index: number) => {
+    if (index === 1) {
+      this.setState({bellColor: Colors.green30});
+    } else {
+      this.setState({bellColor: Colors.red30});
+    }
+  };
+
   /** Children Count change */
   addTab = () => {
     const random = Math.floor(Math.random() * 100000);
@@ -96,9 +104,7 @@ export default class TabBarScreen extends Component {
     if (showAddTab) {
       tabs.push(this.renderAddTabsTab());
     } else {
-      tabs.push(
-        this.renderTabs({id: this.state.currentTabs.length, displayLabel: `tab #${this.state.currentTabs.length}`})
-      );
+      tabs.push(this.renderTabs({id: this.state.currentTabs.length, displayLabel: `tab #${this.state.currentTabs.length}`}));
     }
     return tabs;
   }
@@ -143,6 +149,16 @@ export default class TabBarScreen extends Component {
             <TabBar.Item label="Bar" uppercase style={{backgroundColor: Colors.blue80}}/>
           </TabBar>
 
+          <TabBar style={styles.tabbar} enableShadow onChangeIndex={this.updateBellColor}>
+            <TabBar.Item label="With"/>
+            <TabBar.Item
+              label="Custom"
+              leadingAccessory={<Image marginR-4 source={BELL_ICON} tintColor={this.state.bellColor}/>}
+              trailingAccessory={<Image marginL-4 source={BELL_ICON} tintColor={this.state.bellColor}/>}
+            />
+            <TabBar.Item label="Elements"/>
+          </TabBar>
+
           <TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
             <TabBar.Item label="Fixed"/>
             <TabBar.Item label="Width"/>

generatedTypes/components/tabBar/TabBarItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { BadgeProps } from '../badge';
 export interface TabBarItemProps {
@@ -27,6 +27,14 @@ export interface TabBarItemProps {
      */
     badge?: BadgeProps;
     badgeProps?: BadgeProps;
+    /**
+     * Pass to render a leading element
+     */
+    leadingAccessory?: ReactElement;
+    /**
+     * Pass to render a trailing element
+     */
+    trailingAccessory?: ReactElement;
     /**
      * maximum number of lines the label can break
      */

src/components/tabBar/TabBarItem.tsx

@@ -1,6 +1,15 @@
 import _ from 'lodash';
-import React, {PureComponent} from 'react';
-import {StyleSheet, Animated, Easing, LayoutChangeEvent, LayoutRectangle, StyleProp, ViewStyle, TextStyle} from 'react-native';
+import React, {PureComponent, ReactElement} from 'react';
+import {
+  StyleSheet,
+  Animated,
+  Easing,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleProp,
+  ViewStyle,
+  TextStyle
+} from 'react-native';
 import {LogService} from '../../services';
 import {Constants} from '../../helpers';
 import {Colors, Typography, Spacings} from '../../style';
@@ -11,7 +20,6 @@ import Text from '../text';
 import Image from '../image';
 import Badge, {BadgeProps} from '../badge';
 
-
 const INDICATOR_HEIGHT = 2;
 const INDICATOR_BG_COLOR = Colors.primary;
 const HORIZONTAL_PADDING = Constants.isTablet ? Spacings.s7 : Spacings.s5;
@@ -42,6 +50,14 @@ export interface TabBarItemProps {
    */
   badge?: BadgeProps; //TODO: remove after deprecation
   badgeProps?: BadgeProps;
+  /**
+   * Pass to render a leading element
+   */
+  leadingAccessory?: ReactElement;
+  /**
+   * Pass to render a trailing element
+   */
+  trailingAccessory?: ReactElement;
   /**
    * maximum number of lines the label can break
    */
@@ -178,6 +194,8 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
       labelStyle,
       badgeProps,
       badge,
+      leadingAccessory,
+      trailingAccessory,
       uppercase,
       maxLines,
       selectedLabelStyle,
@@ -193,9 +211,7 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
 
     const iconTint = iconColor || this.getColorFromStyle(labelStyle) || this.getColorFromStyle(styles.label);
     const iconSelectedTint =
-      iconSelectedColor ||
-      this.getColorFromStyle(selectedLabelStyle) ||
-      this.getColorFromStyle(styles.selectedLabel);
+      iconSelectedColor || this.getColorFromStyle(selectedLabelStyle) || this.getColorFromStyle(styles.selectedLabel);
     const badgeFinalProps = badgeProps || badge;
     const badgeSize = _.get(badgeFinalProps, 'size', 'small');
 
@@ -213,6 +229,7 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
         accessibilityLabel={accessibilityLabel}
       >
         <View row flex center style={[showDivider && styles.divider, styles.contentContainer]}>
+          {leadingAccessory}
           {icon && (
             <Image
               style={!_.isEmpty(label) && styles.icon}
@@ -238,6 +255,7 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
               containerStyle={[styles.badge, badgeFinalProps.containerStyle]}
             />
           )}
+          {trailingAccessory}
         </View>
         <Animated.View style={[{opacity: indicatorOpacity}, styles.indicator, indicatorStyle]}/>
       </TouchableOpacity>
@@ -247,7 +265,6 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
 
 export default asBaseComponent<TabBarItemProps>(TabBarItem);
 
-
 const styles = StyleSheet.create({
   contentContainer: {
     paddingHorizontal: HORIZONTAL_PADDING