TabBarItem - allow passing style (solves issue ##874) (#907)

Author: Inbal-Tish

demo/src/screens/componentScreens/TabBarScreen.tsx

@@ -133,9 +133,9 @@ export default class TabBarScreen extends Component {
           </TabBar>
 
           <TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
-            <TabBar.Item label="Fixed" uppercase/>
-            <TabBar.Item label="Tab" badge={{label: '100'}} uppercase/>
-            <TabBar.Item label="Bar" uppercase/>
+            <TabBar.Item label="Fixed" uppercase style={{backgroundColor: Colors.blue80}}/>
+            <TabBar.Item label="Tab" badge={{label: '100'}} uppercase style={{backgroundColor: Colors.blue80}}/>
+            <TabBar.Item label="Bar" uppercase style={{backgroundColor: Colors.blue80}}/>
           </TabBar>
 
           <TabBar style={styles.tabbar} selectedIndex={0} enableShadow>

src/components/tabBar/TabBarItem.tsx

@@ -173,6 +173,7 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
       width,
       onPress,
       activeBackgroundColor,
+      style,
       testID
     } = this.props;
 
@@ -186,7 +187,7 @@ class TabBarItem extends PureComponent<TabBarItemProps, State> {
       <TouchableOpacity
         activeOpacity={1}
         onPress={onPress}
-        style={width ? {width} : {flex: 1}}
+        style={[style, width ? {width} : {flex: 1}]}
         testID={testID}
         activeBackgroundColor={activeBackgroundColor}
         onLayout={this.onLayout}