bug fixes for TabBar refactor (#1106)

* bug fixes for TabBar refactor

* generating types

* Change type to JSX.ElementClass

* ScrollBarScreen to .tsx

* reverting to object as type

* ScrollBar - type fix; TabBar removing containerView wrapper

Author: Inbal-Tish

demo/src/screens/componentScreens/ScrollBarScreen.js renamed to demo/src/screens/componentScreens/ScrollBarScreen.tsx

@@ -1,5 +1,7 @@
 import React, {Component} from 'react';
 import {View, Text, ScrollBar, Button} from 'react-native-ui-lib';
+
+
 class ScrollBarScreen extends Component {
   state = {
     selectedIndex: 0

generatedTypes/components/scrollBar/index.d.ts

@@ -9,7 +9,7 @@ export interface ScrollBarProps extends FlatListProps<any> {
     /**
      * The element to use as a container, instead of a View
      */
-    containerView?: JSX.Element;
+    containerView?: React.ComponentClass;
     /**
      * The props to pass the container
      */

src/components/scrollBar/index.tsx

@@ -25,7 +25,7 @@ export interface ScrollBarProps extends FlatListProps<any> {
     /**
      * The element to use as a container, instead of a View
      */
-    containerView?: JSX.Element,
+    containerView?: React.ComponentClass,
     /**
      * The props to pass the container
      */

src/components/tabBar/index.tsx

@@ -76,8 +76,7 @@ class TabBar extends Component<TabBarProps, State> {
   static displayName = 'TabBar';
 
   static defaultProps: Partial<TabBarProps> = {
-    selectedIndex: 0,
-    backgroundColor: DEFAULT_BACKGROUND_COLOR
+    selectedIndex: 0
   };
 
   static Item = TabBarItem;
@@ -189,7 +188,7 @@ class TabBar extends Component<TabBarProps, State> {
   };
 
   onContentSizeChange = (width: number) => {
-    if (this.scrollContentWidth && this.scrollContentWidth !== width) {
+    if (this.scrollContentWidth !== width) {
       this.scrollContentWidth = width;
       const {minTabsForScroll} = this.props;
       const minChildrenCount = minTabsForScroll || MIN_TABS_FOR_SCROLL;
@@ -200,7 +199,7 @@ class TabBar extends Component<TabBarProps, State> {
   };
 
   renderTabBar() {
-    const {height, backgroundColor, containerView, containerProps, gradientMargins} = this.props;
+    const {height, backgroundColor = DEFAULT_BACKGROUND_COLOR, containerView, containerProps, gradientMargins} = this.props;
     const {scrollEnabled} = this.state;
     const containerHeight = height || DEFAULT_HEIGHT;
 
@@ -264,14 +263,12 @@ class TabBar extends Component<TabBarProps, State> {
   }
 
   render() {
-    const {enableShadow, style, containerView, containerWidth, backgroundColor} = this.props;
-    const Container = containerView ? containerView : View;
+    const {enableShadow, style, backgroundColor = DEFAULT_BACKGROUND_COLOR} = this.props;
 
     return (
       // @ts-ignore
-      <Container
+      <View
         useSafeArea
-        fullWidth={containerWidth ? false : undefined}
         style={[
           styles.container,
           enableShadow && styles.containerShadow,
@@ -284,7 +281,7 @@ class TabBar extends Component<TabBarProps, State> {
         ]}
       >
         {this.renderTabBar()}
-      </Container>
+      </View>
     );
   }
 }