Add previous scene to tabBarOnPress - fix #2787 (#2790)

* Add previous scene to tabBarOnPress - fix #2787

* Update docs for tabBarOnPress

docs/api/navigators/TabNavigator.md

@@ -177,7 +177,13 @@ Title string of a tab displayed in the tab bar or React Element or a function th
 
 #### `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.
+Callback to handle tap events; the argument is an object containing:
+
+* the `previousScene: { route, index }` which is the scene we are leaving
+* the `scene: { route, index }` that was tapped
+* the `jumpToIndex` method that can perform the navigation for you
+
+Useful for adding a custom logic before the transition to the next scene (the tapped one) starts.
 
 ### Navigator Props
 

src/views/TabView/TabBarBottom.js

@@ -36,8 +36,13 @@ type Props = {
   jumpToIndex: (index: number) => void,
   getLabel: (scene: TabScene) => ?(React.Node | string),
   getOnPress: (
+    previousScene: NavigationRoute,
     scene: TabScene
-  ) => (scene: TabScene, jumpToIndex: (index: number) => void) => void,
+  ) => ({
+    previousScene: NavigationRoute,
+    scene: TabScene,
+    jumpToIndex: (index: number) => void,
+  }) => void,
   getTestIDProps: (scene: TabScene) => (scene: TabScene) => any,
   renderIcon: (scene: TabScene) => React.Node,
   style?: ViewStyleProp,
@@ -209,6 +214,7 @@ class TabBarBottom extends React.PureComponent<Props, State> {
       isLandscape,
     } = this.props;
     const { routes } = navigation.state;
+    const previousScene = routes[navigation.state.index];
     // Prepend '-1', so there are always at least 2 items in inputRange
     const inputRange = [-1, ...routes.map((x: *, i: number) => i)];
 
@@ -229,7 +235,7 @@ class TabBarBottom extends React.PureComponent<Props, State> {
           {routes.map((route: NavigationRoute, index: number) => {
             const focused = index === navigation.state.index;
             const scene = { route, index, focused };
-            const onPress = getOnPress(scene);
+            const onPress = getOnPress(previousScene, scene);
             const outputRange = inputRange.map(
               (inputIndex: number) =>
                 inputIndex === index
@@ -251,7 +257,9 @@ class TabBarBottom extends React.PureComponent<Props, State> {
                 testID={testID}
                 accessibilityLabel={accessibilityLabel}
                 onPress={() =>
-                  onPress ? onPress(scene, jumpToIndex) : jumpToIndex(index)}
+                  onPress
+                    ? onPress({ previousScene, scene, jumpToIndex })
+                    : jumpToIndex(index)}
               >
                 <Animated.View
                   style={[

src/views/TabView/TabBarTop.js

@@ -6,6 +6,8 @@ import { TabBar } from 'react-native-tab-view';
 import TabBarIcon from './TabBarIcon';
 
 import type {
+  NavigationAction,
+  NavigationRoute,
   NavigationScreenProp,
   NavigationState,
   ViewStyleProp,
@@ -26,9 +28,14 @@ type Props = {
   jumpToIndex: (index: number) => void,
   getLabel: (scene: TabScene) => ?(React.Node | string),
   getOnPress: (
+    previousScene: NavigationRoute,
     scene: TabScene
-  ) => (scene: TabScene, jumpToIndex: (index: number) => void) => void,
-  renderIcon: (scene: TabScene) => React.Node,
+  ) => ({
+    previousScene: NavigationRoute,
+    scene: TabScene,
+    jumpToIndex: (index: number) => void,
+  }) => void,
+  renderIcon: (scene: TabScene) => React.Element<*>,
   labelStyle?: TextStyleProp,
   iconStyle?: ViewStyleProp,
 };
@@ -115,13 +122,12 @@ export default class TabBarTop extends React.PureComponent<Props> {
     );
   };
 
-  _handleOnPress = (scene: TabScene) => {
+  _handleOnPress = (previousScene: NavigationRoute, scene: TabScene) => {
     const { getOnPress, jumpToIndex }: Props = this.props;
-
-    const onPress = getOnPress(scene);
+    const onPress = getOnPress(previousScene, scene);
 
     if (onPress) {
-      onPress(scene, jumpToIndex);
+      onPress({ previousScene, scene, jumpToIndex });
     } else {
       jumpToIndex(scene.index);
     }
@@ -130,6 +136,8 @@ export default class TabBarTop extends React.PureComponent<Props> {
   render() {
     // TODO: Define full proptypes
     const props: any = this.props;
+    const { state } = props.navigation;
+    const previousScene = state.routes[state.index];
 
     return (
       <TabBar

src/views/TabView/TabView.js

@@ -104,7 +104,7 @@ class TabView extends React.PureComponent<Props> {
     return route.routeName;
   };
 
-  _getOnPress = ({ route }: TabScene) => {
+  _getOnPress = (previousScene: TabScene, { route }: TabScene) => {
     const options = this.props.router.getScreenOptions(
       this.props.childNavigationProps[route.key],
       this.props.screenProps || {}