Merge remote-tracking branch 'anyx/render-tab-name-fix-and-examples'

Author: skv-headless

DefaultTabBar.js

@@ -20,7 +20,7 @@ const DefaultTabBar = React.createClass({
     inactiveTextColor: React.PropTypes.string,
     textStyle: Text.propTypes.style,
     tabStyle: View.propTypes.style,
-    renderTabName: React.PropTypes.func,
+    renderTab: React.PropTypes.func,
   },
 
   getDefaultProps() {
@@ -30,37 +30,39 @@ const DefaultTabBar = React.createClass({
       underlineColor: 'navy',
       backgroundColor: null,
       underlineHeight: 4,
-      renderTabName: this.renderTabName,
     };
   },
 
   renderTabOption(name, page) {
     const isTabActive = this.props.activeTab === page;
 
+    let onPressHandler = this.props.goToPage;
+    let renderTab = this.props.renderTab ? this.props.renderTab : this.renderTab;
+
+    return renderTab(name, page, isTabActive, onPressHandler);
+  },
+
+  renderTab(name, page, isTabActive, onPressHandler) {
+    const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
+    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
+    const fontWeight = isTabActive ? 'bold' : 'normal';
+
     return <Button
       style={{flex: 1, }}
       key={name}
       accessible={true}
       accessibilityLabel={name}
       accessibilityTraits='button'
-      onPress={() => this.props.goToPage(page)}
+      onPress={() => onPressHandler(page)}
     >
-      {this.renderTabName(name, page, isTabActive)}
+      <View style={[styles.tab, this.props.tabStyle, ]}>
+        <Text style={[{color: textColor, fontWeight, }, textStyle, ]}>
+          {name}
+        </Text>
+      </View>
     </Button>;
   },
 
-  renderTabName(name, page, isTabActive) {
-    const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
-    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
-    const fontWeight = isTabActive ? 'bold' : 'normal';
-
-    return <View style={[styles.tab, this.props.tabStyle, ]}>
-      <Text style={[{color: textColor, fontWeight, }, textStyle, ]}>
-        {name}
-      </Text>
-    </View>;
-  },
-
   render() {
     const containerWidth = this.props.containerWidth;
     const numberOfTabs = this.props.tabs.length;

ScrollableTabBar.js

@@ -28,7 +28,7 @@ const ScrollableTabBar = React.createClass({
     tabStyle: View.propTypes.style,
     tabsContainerStyle: View.propTypes.style,
     textStyle: Text.propTypes.style,
-    renderTabName: React.PropTypes.func,
+    renderTab: React.PropTypes.func,
   },
 
   getDefaultProps() {
@@ -42,7 +42,6 @@ const ScrollableTabBar = React.createClass({
       style: {},
       tabStyle: {},
       tabsContainerStyle: {},
-      renderTabName: this.renderTabName,
     };
   },
 
@@ -127,30 +126,34 @@ const ScrollableTabBar = React.createClass({
   renderTabOption(name, page) {
     const isTabActive = this.props.activeTab === page;
 
+    let onPressHandler = this.props.goToPage;
+    let onLayoutHandler = this.measureTab.bind(this, page);
+    let renderTab = this.props.renderTab ? this.props.renderTab : this.renderTab;
+
+    return renderTab(name, page, isTabActive, onPressHandler, onLayoutHandler);
+  },
+
+  renderTab(name, page, isTabActive, onPressHandler, onLayoutHandler) {
+    const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
+    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
+    const fontWeight = isTabActive ? 'bold' : 'normal';
+
     return <Button
       key={`${name}_${page}`}
       accessible={true}
       accessibilityLabel={name}
       accessibilityTraits='button'
-      onPress={() => this.props.goToPage(page)}
-      onLayout={this.measureTab.bind(this, page)}
+      onPress={() => onPressHandler(page)}
+      onLayout={onLayoutHandler}
     >
-      {this.renderTabName(name, page, isTabActive)}
+      <View style={[styles.tab, this.props.tabStyle, ]}>
+        <Text style={[{color: textColor, fontWeight, }, textStyle, ]}>
+          {name}
+        </Text>
+      </View>
     </Button>;
   },
 
-  renderTabName(name, page, isTabActive) {
-    const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
-    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
-    const fontWeight = isTabActive ? 'bold' : 'normal';
-
-    return <View style={[styles.tab, this.props.tabStyle, ]}>
-      <Text style={[{color: textColor, fontWeight, }, textStyle, ]}>
-        {name}
-      </Text>
-    </View>;
-  },
-
   measureTab(page, event) {
     const { x, width, height, } = event.nativeEvent.layout;
     this._tabsMeasurements[page] = {left: x, right: x + width, width, height, };

examples/FacebookTabsExample/DynamicExample.js

@@ -1,11 +1,27 @@
 import React from 'react';
 import {
   Text,
+  StyleSheet,
+  View,
+  TouchableHighlight,
 } from 'react-native';
 import TimerMixin from 'react-timer-mixin';
-
+import Icon from 'react-native-vector-icons/Ionicons';
 import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
 
+const styles = StyleSheet.create({
+  tab: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 10,
+  },
+  icon: {
+    marginRight: 3,
+  },
+});
+
 const Child = React.createClass({
   onEnter() {
     console.log('enter: ' + this.props.i); // eslint-disable-line no-console
@@ -43,10 +59,27 @@ export default React.createClass({
     this.children[from].onLeave();
   },
 
+  renderTab(name, page, isTabActive, onPressHandler, onLayoutHandler) {
+    return <TouchableHighlight
+      key={`${name}_${page}`}
+      onPress={() => onPressHandler(page)}
+      onLayout={onLayoutHandler}
+      style={{flex: 1, }}
+      underlayColor="#aaaaaa"
+    >
+      <View style={[styles.tab, this.props.tabStyle, ]}>
+        <Icon name="md-star" color="red" size={16} style={styles.icon}/>
+        <Text style={[{color: 'blue', }, ]}>
+          {name}
+        </Text>
+      </View>
+    </TouchableHighlight>;
+  },
+
   render() {
     return <ScrollableTabView
       style={{marginTop: 20, }}
-      renderTabBar={() => <DefaultTabBar />}
+      renderTabBar={() => <DefaultTabBar renderTab={this.renderTab}/>}
       onChangeTab={this.handleChangeTab}
     >
       {this.state.tabs.map((tab, i) => {

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "lint": "eslint -c .eslintrc .",
+    "lint": "eslint -c .eslintrc . --ignore-path .gitignore",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {