Fix/tab controller item width

demo/src/configurations.js

@@ -1,6 +1,7 @@
 import {Assets, Typography, Spacings} from 'react-native-ui-lib'; // eslint-disable-line
 
 Assets.loadAssetsGroup('icons.demo', {
+  add: require('./assets/icons/add.png'),
   close: require('./assets/icons/close.png'),
   dashboard: require('./assets/icons/dashboard.png'),
   image: require('./assets/icons/image.png'),

demo/src/screens/componentScreens/TabControllerScreen/index.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {ActivityIndicator} from 'react-native';
 import {
+  Assets,
   TabController,
   Colors,
   View,
@@ -28,16 +29,21 @@ const TABS = [
 ];
 
 class TabControllerScreen extends Component {
-  state = {
-    asCarousel: true,
-    centerSelected: false,
-    fewItems: false,
-    selectedIndex: 0,
-    items: _.chain(TABS)
-      .map((tab) => ({label: tab, key: tab}))
-      .value(),
-    key: Date.now()
-  };
+  constructor(props) {
+    super(props);
+
+
+    this.state = {
+      asCarousel: true,
+      centerSelected: false,
+      fewItems: false,
+      selectedIndex: 0,
+      key: Date.now()
+    };
+
+    const items = this.generateTabItems();
+    this.state.items = items;
+  }
 
   componentDidMount() {
     // this.slow();
@@ -53,33 +59,25 @@ class TabControllerScreen extends Component {
     }, 10);
   }
 
-  addTab = () => {
-    const {tabsCount} = this.state;
+  onAddItem = () => {
+    console.warn('Add Item');
+  }
 
-    if (tabsCount < 6) {
-      this.setState({
-        tabsCount: tabsCount + 1,
-        key: Date.now(),
-        selectedIndex: tabsCount
-      });
+  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected)  => {
+    let items = _.chain(TABS)
+      .take(fewItems ? 3 : TABS.length)
+      .map((tab) => ({label: tab, key: tab}))
+      .value();
+
+    if (!centerSelected) {
+      items = [...items, {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem}];
     }
-  };
+    return items;
+  }
 
   toggleItemsCount = () => {
     const {fewItems} = this.state;
-
-    let items;
-    if (fewItems) {
-      items = _.chain(TABS)
-        .map((tab) => ({label: tab, key: tab}))
-        .value();
-    } else {
-      items = _.chain(TABS)
-        .take(3)
-        .map((tab) => ({label: tab, key: tab}))
-        .value();
-    }
-
+    const items = this.generateTabItems(!fewItems);
     this.setState({fewItems: !fewItems, items, key: Date.now()});
   };
 
@@ -91,8 +89,10 @@ class TabControllerScreen extends Component {
   };
 
   toggleCenterSelected = () => {
+    const {fewItems, centerSelected} = this.state;
     this.setState({
-      centerSelected: !this.state.centerSelected,
+      items: this.generateTabItems(fewItems, !centerSelected),
+      centerSelected: !centerSelected,
       key: Date.now()
     });
   };

src/components/tabController/TabBarItem.js

@@ -106,9 +106,19 @@ export default class TabBarItem extends PureComponent {
     onPress: _.noop
   };
 
-  state = {};
-  itemWidth = this.props.width;
-  itemRef = React.createRef();
+  constructor(props) {
+    super(props);
+
+    this.itemWidth = this.props.width;
+    this.state = {};
+    this.itemRef = React.createRef();
+
+    if (this.itemWidth) {
+      const {index, onLayout} = this.props;
+      onLayout({width: this.itemWidth}, index);
+    }
+  }
+
 
   onStateChange = event([
     {
@@ -148,11 +158,11 @@ export default class TabBarItem extends PureComponent {
       opacity
     };
 
-    // if (this.itemWidth) {
-    //   style.flex = undefined;
-    //   style.width = this.itemWidth;
-    //   style.paddingHorizontal = undefined;
-    // }
+    if (this.props.width) {
+      style.flex = undefined;
+      style.width = this.itemWidth;
+      style.paddingHorizontal = undefined;
+    }
 
     return style;
   }
@@ -234,7 +244,7 @@ export default class TabBarItem extends PureComponent {
         onPress={this.onPress}
         testID={testID}
       >
-        {icon && <Reanimated.Image source={icon} style={[styles.tabItemIcon, this.getIconStyle()]}/>}
+        {icon && <Reanimated.Image source={icon} style={[label && styles.tabItemIconWithLabel, this.getIconStyle()]}/>}
         {!_.isEmpty(label) && (
           <Reanimated.Text style={[styles.tabItemLabel, this.getLabelStyle()]}>
             {uppercase ? _.toUpper(label) : label}
@@ -257,7 +267,7 @@ const styles = StyleSheet.create({
   tabItemLabel: {
     ...Typography.text80
   },
-  tabItemIcon: {
+  tabItemIconWithLabel: {
     marginRight: 10
   },
   badge: {