react-navigation · spencercarli · Sep 12, 2017 · May 2, 2017 · May 4, 2017 · Sep 7, 2017
diff --git a/docs/api/navigators/TabNavigator.md b/docs/api/navigators/TabNavigator.md
@@ -172,6 +172,10 @@ React Element or a function that given `{ focused: boolean, tintColor: string }`
 
 Title string of a tab displayed in the tab bar or React Element or a function that given `{ focused: boolean, tintColor: string }` returns a React.Element, to display in tab bar. When undefined, scene `title` is used. To hide, see `tabBarOptions.showLabel` in the previous section.
 
+#### `tabBarOnPress`
+
+Callback to handle tap events; arguments are the `scene: { route, index }` that was tapped and a `jumpToIndex` method that can perform the navigation for you.
+
 ### Navigator Props
 
 The navigator component created by `TabNavigator(...)` takes the following props:

diff --git a/src/TypeDefinition.js b/src/TypeDefinition.js
@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import type { TabScene } from './views/TabView/TabView';
+
 import {
   Animated,
   type ViewProps,
@@ -335,6 +337,10 @@ export type NavigationTabScreenOptions = {
         *
       >),
   tabBarVisible?: boolean,
+  tabBarOnPress?: (
+    scene: TabScene,
+    jumpToIndex: (index: number) => void
+  ) => void,
 };
 
 /**

diff --git a/src/views/TabView/TabBarBottom.js b/src/views/TabView/TabBarBottom.js
@@ -32,6 +32,9 @@ type Props = {
   navigation: NavigationScreenProp<NavigationState, NavigationAction>,
   jumpToIndex: (index: number) => void,
   getLabel: (scene: TabScene) => ?(React.Element<*> | string),
+  getOnPress: (
+    scene: TabScene
+  ) => (scene: TabScene, jumpToIndex: (index: number) => void) => void,
   renderIcon: (scene: TabScene) => React.Element<*>,
   showLabel: boolean,
   style?: ViewStyleProp,
@@ -129,6 +132,7 @@ export default class TabBarBottom extends PureComponent<
       position,
       navigation,
       jumpToIndex,
+      getOnPress,
       activeBackgroundColor,
       inactiveBackgroundColor,
       style,
@@ -142,6 +146,7 @@ export default class TabBarBottom extends PureComponent<
         {routes.map((route: NavigationRoute, index: number) => {
           const focused = index === navigation.state.index;
           const scene = { route, index, focused };
+          const onPress = getOnPress(scene);
           const outputRange = inputRange.map(
             (inputIndex: number) =>
               inputIndex === index
@@ -156,7 +161,8 @@ export default class TabBarBottom extends PureComponent<
           return (
             <TouchableWithoutFeedback
               key={route.key}
-              onPress={() => jumpToIndex(index)}
+              onPress={() =>
+                onPress ? onPress(scene, jumpToIndex) : jumpToIndex(index)}
             >
               <Animated.View
                 style={[

diff --git a/src/views/TabView/TabBarTop.js b/src/views/TabView/TabBarTop.js
@@ -31,7 +31,11 @@ type Props = {
   upperCaseLabel: boolean,
   position: Animated.Value,
   navigation: NavigationScreenProp<NavigationState, NavigationAction>,
+  jumpToIndex: (index: number) => void,
   getLabel: (scene: TabScene) => ?(React.Element<*> | string),
+  getOnPress: (
+    scene: TabScene
+  ) => (scene: TabScene, jumpToIndex: (index: number) => void) => void,
   renderIcon: (scene: TabScene) => React.Element<*>,
   labelStyle?: TextStyleProp,
   iconStyle?: ViewStyleProp,
@@ -120,13 +124,27 @@ export default class TabBarTop extends PureComponent<
     );
   };
 
+  _handleOnPress = (scene: TabScene) => {
+    const { getOnPress, jumpToIndex }: Props = this.props;
+
+    const onPress = getOnPress(scene);
+
+    if (onPress) {
+      onPress(scene, jumpToIndex);
+    } else {
+      jumpToIndex(scene.index);
+    }
+  };
+
   render() {
     // TODO: Define full proptypes
     const props: any = this.props;
 
     return (
       <TabBar
         {...props}
+        onTabPress={this._handleOnPress}
+        jumpToIndex={() => {}}
         renderIcon={this._renderIcon}
         renderLabel={this._renderLabel}
       />

diff --git a/src/views/TabView/TabView.js b/src/views/TabView/TabView.js
@@ -95,6 +95,15 @@ class TabView extends PureComponent<void, Props, void> {
     return route.routeName;
   };
 
+  _getOnPress = ({ route }: TabScene) => {
+    const options = this.props.router.getScreenOptions(
+      this.props.childNavigationProps[route.key],
+      this.props.screenProps || {}
+    );
+
+    return options.tabBarOnPress;
+  };
+
   _renderIcon = ({ focused, route, tintColor }: TabScene) => {
     const options = this.props.router.getScreenOptions(
       this.props.childNavigationProps[route.key],
@@ -124,6 +133,7 @@ class TabView extends PureComponent<void, Props, void> {
         screenProps={this.props.screenProps}
         navigation={this.props.navigation}
         getLabel={this._getLabel}
+        getOnPress={this._getOnPress}
         renderIcon={this._renderIcon}
         animationEnabled={animationEnabled}
       />