renderTab small fixes

Author: skv-headless

DefaultTabBar.js

@@ -34,12 +34,6 @@ const DefaultTabBar = React.createClass({
   },
 
   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) {
@@ -80,7 +74,11 @@ const DefaultTabBar = React.createClass({
 
     return (
       <View style={[styles.tabs, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}>
-        {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
+        {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);
+        })}
         <Animated.View style={[tabUnderlineStyle, { left, }, ]} />
       </View>
     );

ScrollableTabBar.js

@@ -123,16 +123,6 @@ 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;
@@ -191,7 +181,11 @@ const ScrollableTabBar = React.createClass({
           ref={'tabContainer'}
           onLayout={this.onTabContainerLayout}
         >
-          {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
+          {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, this.measureTab.bind(this, page));
+          })}
           <Animated.View style={[tabUnderlineStyle, dynamicTabUnderline, ]} />
         </View>
       </ScrollView>

examples/FacebookTabsExample/DynamicExample.js

@@ -1,27 +1,11 @@
 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
@@ -67,12 +51,7 @@ export default React.createClass({
       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>
+      <Text>{name}</Text>
     </TouchableHighlight>;
   },