TabBar - Adding 'backgroundColor' prop (#917)

Author: Inbal-Tish

demo/src/screens/componentScreens/TabBarScreen.tsx

@@ -175,7 +175,7 @@ export default class TabBarScreen extends Component {
             label={`Change index: ${this.state.selectedIndex}`}
             onPress={this.changeIndex}
           />
-          <TabBar style={styles.tabbar} selectedIndex={this.state.selectedIndex} enableShadow>
+          <TabBar style={styles.tabbar} selectedIndex={this.state.selectedIndex} enableShadow backgroundColor={Colors.green70}>
             <TabBar.Item label="LONG LABEL"/>
             <TabBar.Item label="ACTIVE"/>
             <TabBar.Item label="INACTIVE"/>

src/components/tabBar/index.tsx

@@ -42,6 +42,10 @@ export type TabBarProps = BaseComponentInjectedProps & ViewPropTypes & {
      * custom style for the selected indicator
      */
     indicatorStyle?: ViewStyle,
+    /** 
+     * The background color 
+     */
+    backgroundColor: string,
     /**
      * Tab Bar height
      */
@@ -77,7 +81,8 @@ class TabBar extends Component<TabBarProps, State> {
   static displayName = 'TabBar';
 
   static defaultProps = {
-    selectedIndex: 0
+    selectedIndex: 0,
+    backgroundColor: DEFAULT_BACKGROUND_COLOR
   };
 
   static Item: typeof TabBarItem;
@@ -92,7 +97,7 @@ class TabBar extends Component<TabBarProps, State> {
     };
   }
 
-  styles = createStyles();
+  styles = createStyles(this.props);
   scrollContainerWidth: number = Constants.screenWidth;
   scrollContentWidth = 0;
   contentOffset: any = {x: 0, y: 0};
@@ -247,7 +252,7 @@ class TabBar extends Component<TabBarProps, State> {
   }
 
   renderTabBar() {
-    const {height} = this.props;
+    const {height, backgroundColor} = this.props;
     const {scrollEnabled} = this.state;
     const containerHeight = height || DEFAULT_HEIGHT;
 
@@ -268,7 +273,7 @@ class TabBar extends Component<TabBarProps, State> {
             {this.renderChildren()}
           </View>
         </ScrollView>
-        {this.renderGradient(containerHeight, DEFAULT_BACKGROUND_COLOR)}
+        {this.renderGradient(containerHeight, backgroundColor)}
       </View>
     );
   }
@@ -312,7 +317,7 @@ class TabBar extends Component<TabBarProps, State> {
   }
 }
 
-function createStyles() {
+function createStyles({backgroundColor = DEFAULT_BACKGROUND_COLOR}) {
   return StyleSheet.create({
     container: {
       zIndex: 100
@@ -334,7 +339,7 @@ function createStyles() {
     tabBar: {
       flex: 1,
       height: DEFAULT_HEIGHT,
-      backgroundColor: DEFAULT_BACKGROUND_COLOR
+      backgroundColor
     },
     shadowImage: {
       width: '100%'