tab styling

src/basic/TabContainer.js

@@ -0,0 +1,26 @@
+/* @flow */
+
+
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { connectStyle } from '@shoutem/theme';
+import mapPropsToStyleNames from '../Utils/mapPropsToStyleNames';
+
+
+class TabContainer extends Component {
+  render() {
+    return (
+      <View ref={c => this._root = c} {...this.props}></View>
+    );
+  }
+}
+
+TabContainer.propTypes = {
+  ...View.propTypes,
+  style: React.PropTypes.object,
+};
+
+const StyledTabContainer = connectStyle('NativeBase.TabContainer', {}, mapPropsToStyleNames)(TabContainer);
+export {
+  StyledTabContainer as TabContainer,
+};

src/basic/react-native-scrollable-tab-view/DefaultTabBar.js

@@ -2,9 +2,7 @@ const React = require('react');
 const ReactNative = require('react-native');
 import { connectStyle, StyleProvider } from '@shoutem/theme';
 import variable from './../../theme/variables/platform';
-import { TabHeading } from './../../index';
-import { Text } from './../../index';
-import { TabBorder } from './../../index';
+import { TabHeading, Text, TabContainer } from './../../index';
 import _ from 'lodash';
 
 const {
@@ -42,10 +40,9 @@ const DefaultTabBar = React.createClass({
   renderTabOption(name, page) {
   },
 
-  renderTab(name, page, isTabActive, onPressHandler) {
-
+  renderTab(name, page, isTabActive, onPressHandler, tabStyle, activeTabStyle, textStyle, activeTextStyle, tabHeaderStyle) {
     const headerContent = (typeof name!=='string') ? name.props.children : undefined;
-    const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
+    const { activeTextColor, inactiveTextColor } = this.props;
     const textColor = isTabActive ? activeTextColor : inactiveTextColor;
     const fontWeight = isTabActive ? 'bold' : 'normal';
     if (typeof name==='string') {
@@ -54,8 +51,8 @@ const DefaultTabBar = React.createClass({
         key={name}
         onPress={() => onPressHandler(page)}
         >
-        <TabHeading style={this.props.style} active={isTabActive}>
-          <Text>
+        <TabHeading style={(isTabActive) ? activeTabStyle : tabStyle} active={isTabActive}>
+          <Text style={(isTabActive) ? activeTextStyle : textStyle}>
             {name}
           </Text>
         </TabHeading>
@@ -67,7 +64,7 @@ const DefaultTabBar = React.createClass({
         key={_.random(1.2, 5.2)}
         onPress={() => onPressHandler(page)}
         >
-        <TabHeading style={this.props.style} active={isTabActive}>
+        <TabHeading style={tabHeaderStyle} active={isTabActive}>
           {headerContent}
         </TabHeading>
       </Button>
@@ -86,32 +83,20 @@ const DefaultTabBar = React.createClass({
       backgroundColor: variables.topTabBarActiveBorderColor,
       bottom: 0,
     };
-    const tabs = {
-      elevation: 3,
-      height: 50,
-      flexDirection: 'row',
-      shadowColor: (platformStyle==='material') ? '#000' : undefined,
-      shadowOffset: (platformStyle==='material') ? {width: 0, height: 2} : undefined,
-      shadowOpacity: (platformStyle==='material') ?  0.2 : undefined,
-      shadowRadius: (platformStyle==='material') ? 1.2 : undefined,
-      justifyContent: 'space-around',
-      borderBottomWidth: (Platform.OS=='ios') ? variables.borderWidth : 0,
-      borderColor: variables.topTabBarBorderColor,
-    };
 
 
     const left = this.props.scrollValue.interpolate({
       inputRange: [0, 1, ], outputRange: [0,  containerWidth / numberOfTabs, ],
     });
     return (
-      <View style={[tabs, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}>
+      <TabContainer>
         {this.props.tabs.map((name, page) => {
           const isTabActive = this.props.activeTab === page;
           const renderTab = this.props.renderTab || this.renderTab;
-          return renderTab(name, page, isTabActive, this.props.goToPage);
+          return renderTab(name, page, isTabActive, this.props.goToPage, this.props.tabStyle[page], this.props.activeTabStyle[page], this.props.textStyle[page], this.props.activeTextStyle[page], this.props.tabHeaderStyle[page]);
         })}
         <Animated.View style={[tabUnderlineStyle, { left, }, this.props.underlineStyle, ]} />
-      </View>
+      </TabContainer>
     );
   },
 });

src/basic/react-native-scrollable-tab-view/index.js

@@ -14,6 +14,7 @@ const {
   Platform,
 } = ReactNative;
 const TimerMixin = require('react-timer-mixin');
+import _ from 'lodash';
 
 const SceneComponent = require('./SceneComponent');
 const { DefaultTabBar } = require('./DefaultTabBar');
@@ -230,10 +231,16 @@ const ScrollableTabView = React.createClass({
   },
 
   render() {
+    console.log('this.props', this.props);
     let overlayTabs = (this.props.tabBarPosition === 'overlayTop' || this.props.tabBarPosition === 'overlayBottom');
     let tabBarProps = {
       goToPage: this.goToPage,
       tabs: this._children().map((child) => child.props.heading),
+      tabStyle: this._children().map((child) => child.props.tabStyle),
+      activeTabStyle: this._children().map((child) => child.props.activeTabStyle),
+      textStyle: this._children().map((child) => child.props.textStyle),
+      activeTextStyle: this._children().map((child) => child.props.activeTextStyle),
+      tabHeaderStyle: this._children().map((child) => _.get(child.props.heading.props, 'style', undefined)),
       activeTab: this.state.currentPage,
       scrollValue: this.state.scrollValue,
       containerWidth: this.state.containerWidth,

src/index.js

@@ -11,7 +11,7 @@ import { Text } from './basic/Text';
 import { ViewNB as View } from './basic/View';
 import { Button } from './basic/Button';
 import { TabHeading } from './basic/TabHeading';
-import { TabBorder } from './basic/TabBorder';
+import { TabContainer } from './basic/TabContainer';
 import { IconNB } from './basic/IconNB';
 import { Icon } from './basic/Icon';
 import { Header } from './basic/Header';
@@ -108,7 +108,7 @@ export {
   TabContent,
   View,
   TabHeading,
-  TabBorder,
+  TabContainer,
   DefaultTabBar
 };
 

src/theme/components/TabContainer.js

@@ -0,0 +1,24 @@
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+  const platformStyle = variables.platformStyle;
+  const platform = variables.platform;
+
+  const tabContainerTheme = {
+    elevation: 3,
+    height: 50,
+    flexDirection: 'row',
+    shadowColor: (platformStyle==='material') ? '#000' : undefined,
+    shadowOffset: (platformStyle==='material') ? {width: 0, height: 2} : undefined,
+    shadowOpacity: (platformStyle==='material') ?  0.2 : undefined,
+    shadowRadius: (platformStyle==='material') ? 1.2 : undefined,
+    justifyContent: 'space-around',
+    borderBottomWidth: (Platform.OS=='ios') ? variables.borderWidth : 0,
+    borderColor: variables.topTabBarBorderColor,
+  };
+
+
+  return tabContainerTheme;
+};

src/theme/components/index.js

@@ -23,7 +23,7 @@ import textTheme from './Text';
 import tabTheme from './Tab';
 import tabBarTheme from './TabBar';
 import viewTheme from './View';
-import tabBorderTheme from './TabBorder';
+import tabContainerTheme from './TabContainer';
 import tabHeadingTheme from './TabHeading';
 import iconTheme from './Icon';
 import spinnerTheme from './Spinner';
@@ -208,8 +208,8 @@ export default (variables = variable) => {
     'NativeBase.TabHeading': {
       ...tabHeadingTheme(variables),
     },
-    'NativeBase.TabBorder': {
-      ...tabBorderTheme(variables),
+    'NativeBase.TabContainer': {
+      ...tabContainerTheme(variables),
     },
     'NativeBase.Switch': {
       marginVertical: -5,