TabBar refactor (#1076)

* TabBar - use ScrollBar component, deprecate 'badge' prop (use 'badgeProps' prop instead).
TabBarItem - add 'backgroundColor' prop.

* Adjustments for Tablet

* removing borderwidth

* tabletmargins example

* remove `useTabletWide` prop

* edit comment

* removing tabletMargins prop

* moving 'darkTheme' prop from TabBarItem to TabBar

* passing 'gradientMargins' to ScrollBar

* Adding 'containerView' as component container

* TabBar - adding 'testID' prop; TabBarItem - removing UNSAFE method, using LogService for deprecation warning, fixing typography

* TabBar - removing UNSAFE method

* remove redundant prop

* applying 'containerWidth' to container

* Adding 'fullWidth' to container

* replace BaseComponent with asBaseComponent HOC

* TabBarItem to asBaseComponent HOC; updating types

* fix TabBarItem in TabBar

* moving inline styles to stylesheet

* bug fix

* bug fix

* TS errors and generatedTypes

Author: Inbal-Tish

demo/src/screens/componentScreens/TabBarScreen.tsx

@@ -37,7 +37,7 @@ export default class TabBarScreen extends Component {
       do {
         index = Math.floor(Math.random() * this.tabbar.props.children.length);
       } while (index === this.state.selectedIndex);
-  
+
       this.setState({selectedIndex: index});
     }
   };
@@ -82,7 +82,7 @@ export default class TabBarScreen extends Component {
   removeTab = () => {
     const index = this.state.selectedIndex;
     const newTabs = this.state.currentTabs;
-    
+
     if (newTabs.length >= 0) {
       newTabs.splice(index, 1);
     }
@@ -92,7 +92,7 @@ export default class TabBarScreen extends Component {
   /** Actions */
   getTabs(showAddTab: boolean) {
     const tabs = _.map(this.state.currentTabs, tab => this.renderTabs(tab));
-    
+
     if (showAddTab) {
       tabs.push(this.renderAddTabsTab());
     } else {
@@ -126,15 +126,20 @@ export default class TabBarScreen extends Component {
       <ScrollView style={{overflow: 'visible'}} showsVerticalScrollIndicator={false}>
         <View bg-dark80>
           <TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
-            <TabBar.Item 
-              label="single tab" 
+            <TabBar.Item
+              label="single tab"
               labelStyle={{color: Colors.green30, fontWeight: 'bold', textTransform: 'capitalize'}}
             />
           </TabBar>
 
-          <TabBar style={styles.tabbar} selectedIndex={0} enableShadow>
-            <TabBar.Item label="Fixed" uppercase style={{backgroundColor: Colors.blue80}}/>
-            <TabBar.Item label="Tab" badge={{label: '100'}} uppercase style={{backgroundColor: Colors.blue80}}/>
+          <TabBar
+            style={styles.tabbar}
+            selectedIndex={0}
+            enableShadow
+            // tabletMargins={{portrait: 0, landscape: 0}}
+          >
+            <TabBar.Item label="Fixed" uppercase backgroundColor={Colors.blue80}/>
+            <TabBar.Item label="Tab" badgeProps={{label: '100'}} uppercase style={{backgroundColor: Colors.blue80}}/>
             <TabBar.Item label="Bar" uppercase style={{backgroundColor: Colors.blue80}}/>
           </TabBar>
 
@@ -146,7 +151,7 @@ export default class TabBarScreen extends Component {
 
           <TabBar style={styles.tabbar} selectedIndex={0} ref={r => (this.tabbar = r)} enableShadow>
             <TabBar.Item label="Scroll"/>
-            <TabBar.Item label="View" badge={{size: 'pimpleSmall'}}/>
+            <TabBar.Item label="View" badgeProps={{size: 'pimpleSmall'}}/>
             <TabBar.Item label="tab"/>
             <TabBar.Item label="bar"/>
             <TabBar.Item label="Container"/>
@@ -169,13 +174,20 @@ export default class TabBarScreen extends Component {
             {this.getTabs(true)}
           </TabBar>
 
-          <Button
-            size={Button.sizes.small}
-            margin-20
-            label={`Change index: ${this.state.selectedIndex}`}
-            onPress={this.changeIndex}
-          />
-          <TabBar style={styles.tabbar} selectedIndex={this.state.selectedIndex} enableShadow backgroundColor={Colors.green70}>
+          <View center>
+            <Button
+              size={Button.sizes.small}
+              margin-20
+              label={`Change index: ${this.state.selectedIndex}`}
+              onPress={this.changeIndex}
+            />
+          </View>
+          <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"/>
@@ -187,7 +199,7 @@ export default class TabBarScreen extends Component {
             <TabBar.Item label="MODE"/>
           </TabBar>
 
-          <View row>
+          <View center row>
             <Button size={Button.sizes.small} margin-20 label={`Change Labels`} onPress={this.changeLabels}/>
             <Button size={Button.sizes.small} margin-20 label={`Change Color`} onPress={this.changeColors}/>
           </View>

generatedTypes/components/tabBar/TabBarItem.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Animated, ViewStyle, TextStyle } from 'react-native';
-import { BaseComponentInjectedProps } from '../../commons/new';
+import { Animated, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { BadgeProps } from '../badge';
-export declare type TabBarItemProps = BaseComponentInjectedProps & {
+interface Props {
     /**
      * icon of the tab
      */
@@ -22,19 +21,20 @@ export declare type TabBarItemProps = BaseComponentInjectedProps & {
     /**
      * custom label style
      */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Badge component props to display next the item label
      */
     badge?: BadgeProps;
+    badgeProps?: BadgeProps;
     /**
      * maximum number of lines the label can break
      */
     maxLines?: number;
     /**
      * custom selected tab label style
      */
-    selectedLabelStyle: TextStyle;
+    selectedLabelStyle?: StyleProp<TextStyle>;
     /**
      * whether the tab is selected or not
      */
@@ -47,14 +47,18 @@ export declare type TabBarItemProps = BaseComponentInjectedProps & {
      * A fixed width for the item
      */
     width?: number;
+    /**
+     * tabBar's background color
+     */
+    backgroundColor?: string;
     /**
      * ignore of the tab
      */
     ignore?: boolean;
     /**
      * callback for when pressing a tab
      */
-    onPress?: (props: any) => void;
+    onPress?: () => void;
     /**
      * whether to change the text to uppercase
      */
@@ -63,78 +67,17 @@ export declare type TabBarItemProps = BaseComponentInjectedProps & {
      * Apply background color on press for TouchableOpacity
      */
     activeBackgroundColor?: string;
-    indicatorStyle?: ViewStyle;
+    accessibilityLabel?: string;
+    indicatorStyle?: StyleProp<ViewStyle>;
     style?: ViewStyle;
     testID?: string;
-};
-export declare type State = {
-    indicatorOpacity?: Animated.Value;
-};
-declare const _default: React.ComponentClass<BaseComponentInjectedProps & {
-    /**
-     * icon of the tab
-     */
-    icon?: number | undefined;
-    /**
-     * icon tint color
-     */
-    iconColor?: string | undefined;
-    /**
-     * icon selected tint color
-     */
-    iconSelectedColor?: string | undefined;
-    /**
-     * label of the tab
-     */
-    label?: string | undefined;
-    /**
-     * custom label style
-     */
-    labelStyle?: TextStyle | undefined;
-    /**
-     * Badge component props to display next the item label
-     */
-    badge?: BadgeProps | undefined;
-    /**
-     * maximum number of lines the label can break
-     */
-    maxLines?: number | undefined;
-    /**
-     * custom selected tab label style
-     */
-    selectedLabelStyle: TextStyle;
-    /**
-     * whether the tab is selected or not
-     */
-    selected?: boolean | undefined;
-    /**
-     * whether the tab will have a divider on its right
-     */
-    showDivider?: boolean | undefined;
-    /**
-     * A fixed width for the item
-     */
-    width?: number | undefined;
-    /**
-     * ignore of the tab
-     */
-    ignore?: boolean | undefined;
-    /**
-     * callback for when pressing a tab
-     */
-    onPress?: ((props: any) => void) | undefined;
-    /**
-     * whether to change the text to uppercase
-     */
-    uppercase?: boolean | undefined;
-    /**
-     * Apply background color on press for TouchableOpacity
-     */
-    activeBackgroundColor?: string | undefined;
-    indicatorStyle?: ViewStyle | undefined;
-    style?: ViewStyle | undefined;
-    testID?: string | undefined;
-} & {
+}
+interface State {
+    indicatorOpacity: Animated.Value;
+    selected?: boolean;
+}
+export declare type TabBarItemProps = Props;
+declare const _default: React.ComponentClass<Props & {
     useCustomTheme?: boolean | undefined;
 }, any> & State;
 export default _default;