feat: add an option to swap out TouchableWithoutFeedback for another component (#27)

packages/tabs/example/src/BottomTabs.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { MaterialIcons } from '@expo/vector-icons';
 import PhotoGrid from './shared/PhotoGrid';
+import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
 
 const tabBarIcon = name => ({ tintColor }) => (
   <MaterialIcons name={name} color={tintColor} size={24} />
@@ -10,6 +11,7 @@ const tabBarIcon = name => ({ tintColor }) => (
 class Album extends React.Component {
   static navigationOptions = {
     tabBarIcon: tabBarIcon('photo-album'),
+    tabBarButtonComponent: TouchableBounce,
   };
 
   render() {
@@ -20,6 +22,7 @@ class Album extends React.Component {
 class Library extends React.Component {
   static navigationOptions = {
     tabBarIcon: tabBarIcon('photo-library'),
+    tabBarButtonComponent: TouchableBounce,
   };
 
   render() {
@@ -30,6 +33,7 @@ class Library extends React.Component {
 class History extends React.Component {
   static navigationOptions = {
     tabBarIcon: tabBarIcon('history'),
+    tabBarButtonComponent: TouchableBounce,
   };
 
   render() {
@@ -40,6 +44,7 @@ class History extends React.Component {
 class Cart extends React.Component {
   static navigationOptions = {
     tabBarIcon: tabBarIcon('shopping-cart'),
+    tabBarButtonComponent: TouchableBounce,
   };
 
   render() {

packages/tabs/src/navigators/createBottomTabNavigator.js

@@ -57,6 +57,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
       screenProps,
       getLabelText,
       getAccessibilityLabel,
+      getButtonComponent,
       getTestID,
       renderIcon,
       onTabPress,
@@ -80,6 +81,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
         screenProps={screenProps}
         onTabPress={onTabPress}
         getLabelText={getLabelText}
+        getButtonComponent={getButtonComponent}
         getAccessibilityLabel={getAccessibilityLabel}
         getTestID={getTestID}
         renderIcon={renderIcon}

packages/tabs/src/utils/createTabNavigator.js

@@ -14,6 +14,7 @@ export type InjectedProps = {
   getLabelText: (props: { route: any }) => any,
   getAccessibilityLabel: (props: { route: any }) => string,
   getTestID: (props: { route: any }) => string,
+  getButtonComponent: (props: { route: any }) => ?React.Component<*>,
   renderIcon: (props: {
     route: any,
     focused: boolean,
@@ -56,6 +57,18 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
       return null;
     };
 
+    _getButtonComponent = ({ route }) => {
+      const { descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const options = descriptor.options;
+
+      if (options.tabBarButtonComponent) {
+        return options.tabBarButtonComponent;
+      }
+
+      return null;
+    };
+
     _getLabelText = ({ route }) => {
       const { descriptors } = this.props;
       const descriptor = descriptors[route.key];
@@ -151,6 +164,7 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
         <TabView
           {...options}
           getLabelText={this._getLabelText}
+          getButtonComponent={this._getButtonComponent}
           getAccessibilityLabel={this._getAccessibilityLabel}
           getTestID={this._getTestID}
           renderIcon={this._renderIcon}

packages/tabs/src/views/BottomTabBar.js

@@ -32,8 +32,9 @@ type Props = TabBarOptions & {
   descriptors: any,
   jumpTo: any,
   onTabPress: any,
-  getLabelText: ({ route: any }) => any,
   getAccessibilityLabel: (props: { route: any }) => string,
+  getButtonComponent: ({ route: any }) => any,
+  getLabelText: ({ route: any }) => any,
   getTestID: (props: { route: any }) => string,
   renderIcon: any,
   dimensions: { width: number, height: number },
@@ -46,6 +47,22 @@ const isIOS11 = majorVersion >= 11 && isIos;
 
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
+class TouchableWithoutFeedbackWrapper extends React.Component<*> {
+  render() {
+    const { onPress, testID, accessibilityLabel, ...props } = this.props;
+
+    return (
+      <TouchableWithoutFeedback
+        onPress={onPress}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <View {...props} />
+      </TouchableWithoutFeedback>
+    );
+  }
+}
+
 class TabBarBottom extends React.Component<Props> {
   static defaultProps = {
     activeTintColor: '#3478f6', // Default active tint color in iOS 10
@@ -171,7 +188,6 @@ class TabBarBottom extends React.Component<Props> {
       activeBackgroundColor,
       inactiveBackgroundColor,
       onTabPress,
-      jumpTo,
       style,
       tabStyle,
     } = this.props;
@@ -203,30 +219,30 @@ class TabBarBottom extends React.Component<Props> {
             ? activeBackgroundColor
             : inactiveBackgroundColor;
 
+          const ButtonComponent =
+            this.props.getButtonComponent({ route }) ||
+            TouchableWithoutFeedbackWrapper;
+
           return (
-            <TouchableWithoutFeedback
+            <ButtonComponent
               key={route.key}
-              onPress={() => {
-                onTabPress({ route });
-                jumpTo(route.key);
-              }}
+              onPress={() => onTabPress({ route })}
               testID={testID}
               accessibilityLabel={accessibilityLabel}
+              style={[
+                styles.tab,
+                { backgroundColor },
+                this._shouldUseHorizontalLabels()
+                  ? styles.tabLandscape
+                  : styles.tabPortrait,
+                tabStyle,
+              ]}
             >
-              <View
-                style={[
-                  styles.tab,
-                  { backgroundColor },
-                  this._shouldUseHorizontalLabels()
-                    ? styles.tabLandscape
-                    : styles.tabPortrait,
-                  tabStyle,
-                ]}
-              >
+              <View style={{ flex: 1 }}>
                 {this._renderIcon(scene)}
                 {this._renderLabel(scene)}
               </View>
-            </TouchableWithoutFeedback>
+            </ButtonComponent>
           );
         })}
       </SafeAreaView>