add support for edge swipe gestures

Closes #38

Author: jmurzy

modules/ReducerUtils.js

@@ -302,6 +302,8 @@ export function createPartialState(
     let type = currentRoute.routeType;
     let routeParams = getRouteParams(currentRoute, params);
     const transition = currentRoute.transition;
+    const onSwipeBack = currentRoute.onSwipeBack;
+    const onSwipeForward = currentRoute.onSwipeForward;
     const reducer = currentRoute.reducer;
 
     const indexRoute = getIndexRoute(currentRoute);
@@ -352,6 +354,8 @@ export function createPartialState(
       location,
       transition,
       reducer,
+      onSwipeBack,
+      onSwipeForward,
     };
 
     if (prevState) {

modules/Route.js

@@ -19,6 +19,8 @@ type Props = {
   reducer: Function,
   routeType: string,
   transition: ?string,
+  onSwipeBack: Function,
+  onSwipeForward: Function,
 };
 
 const { ROUTE } = RouteTypes;
@@ -38,11 +40,17 @@ class Route extends Component<any, Props, any> {
     reducer: PropTypes.func.isRequired,
     routeType: PropTypes.string.isRequired,
     transition: PropTypes.string,
+    onSwipeBack: PropTypes.func,
+    onSwipeForward: PropTypes.func,
   };
 
   static defaultProps = {
     routeType: ROUTE,
     reducer: defaultRouteReducer,
+    onSwipeBack: (router) => {
+      router.pop();
+    },
+    onSwipeForward: () => {},
   };
 
   props: Props;

modules/RouteView.js

@@ -40,8 +40,7 @@ class RouteView extends Component<any, Props, any> {
     (this: any).renderScene = this.renderScene.bind(this);
   }
 
-  // $FlowFixMe NavigationSceneRendererProps
-  renderScene(props): ?ReactElement {
+  renderScene(props: Object): ?ReactElement<any> {
     const { scene } = props;
 
     const { navigationSubtree } = this.props;

modules/StackRouteView.js

@@ -6,6 +6,8 @@ import { warnOutOfSync } from './warningUtil';
 import transitionRegistry from './transitionRegistry';
 import { globalStyles as styles } from './styles';
 
+import withRouter from './withRouter';
+
 import type {
   EnhancedNavigationRoute,
   PseudoElement,
@@ -25,6 +27,7 @@ type Props = {
   navigationSubtree: ?Array<PseudoElement>,
   navigationState: EnhancedNavigationRoute,
   createElement: Function,
+  router: Object,
 };
 
 class StackRouteView extends Component<any, Props, any> {
@@ -37,6 +40,7 @@ class StackRouteView extends Component<any, Props, any> {
     navigationSubtree: PropTypes.arrayOf(PropTypes.object),
     navigationState: PropTypes.object,
     createElement: PropTypes.func.isRequired,
+    router: PropTypes.object.isRequired,
   };
 
   componentWillMount(): void {
@@ -46,8 +50,7 @@ class StackRouteView extends Component<any, Props, any> {
     (this: any).renderCardScene = this.renderCardScene.bind(this);
   }
 
-  // $FlowFixMe NavigationSceneRendererProps
-  renderOverlay(props): ?ReactElement<any> {
+  renderOverlay(props: Object): ?ReactElement<any> {
     const { scene } = props;
 
     const { navigationSubtree, createElement } = this.props;
@@ -80,16 +83,19 @@ class StackRouteView extends Component<any, Props, any> {
     return null;
   }
 
-  // $FlowFixMe NavigationSceneRendererProps
-  renderScene(props): ?ReactElement<any> {
+  renderScene(props: Object): ?ReactElement<any> {
     const { scene } = props;
 
     if (!scene.route) {
       return null;
     }
 
     const { transition: parentTransition } = props.navigationState;
-    const { transition: sceneTransition } = scene.route;
+    const {
+      transition: sceneTransition,
+      onSwipeBack,
+      onSwipeForward,
+    } = scene.route;
 
     const transition = sceneTransition || parentTransition;
 
@@ -98,8 +104,16 @@ class StackRouteView extends Component<any, Props, any> {
       panResponder,
     } = transitionRegistry[transition];
 
+    const {
+      router,
+    } = this.props;
+
     const viewStyle = styleInterpolator(props);
-    const panHandlers = panResponder(props);
+    const panHandlers = panResponder({
+      ...props,
+      onNavigateBack: () => onSwipeBack && onSwipeBack(router),
+      onNavigateForward: () => onSwipeForward && onSwipeForward(router),
+    });
 
     const navigationCardProps = {
       key: scene.route.key,
@@ -112,8 +126,7 @@ class StackRouteView extends Component<any, Props, any> {
     return React.createElement(NavigationCard, navigationCardProps);
   }
 
-  // $FlowFixMe NavigationSceneRendererProps
-  renderCardScene(props): ?ReactElement {
+  renderCardScene(props: Object): ?ReactElement<any> {
     const { scene } = props;
 
     const { navigationSubtree } = this.props;
@@ -213,4 +226,4 @@ class StackRouteView extends Component<any, Props, any> {
   }
 }
 
-export default StackRouteView;
+export default withRouter(StackRouteView);

modules/TabsRouteView.js

@@ -5,6 +5,7 @@ import { NavigationExperimental, View } from 'react-native';
 import { warnOutOfSync } from './warningUtil';
 import transitionRegistry from './transitionRegistry';
 import { globalStyles as styles } from './styles';
+import withRouter from './withRouter';
 
 import type {
   EnhancedNavigationRoute,
@@ -25,6 +26,7 @@ type Props = {
   navigationSubtree: ?Array<PseudoElement>,
   navigationState: EnhancedNavigationRoute,
   createElement: Function,
+  router: Object,
 };
 
 class TabsRouteView extends Component<any, Props, any> {
@@ -37,6 +39,7 @@ class TabsRouteView extends Component<any, Props, any> {
     navigationSubtree: PropTypes.arrayOf(PropTypes.object),
     navigationState: PropTypes.object,
     createElement: PropTypes.func.isRequired,
+    router: PropTypes.object.isRequired,
   };
 
   componentWillMount(): void {
@@ -46,8 +49,7 @@ class TabsRouteView extends Component<any, Props, any> {
     (this: any).renderCardScene = this.renderCardScene.bind(this);
   }
 
-  // $FlowFixMe NavigationSceneRendererProps
-  renderOverlay(props): ?ReactElement {
+  renderOverlay(props: Object): ?ReactElement<any> {
     const { scene } = props;
 
     const { navigationSubtree, createElement } = this.props;
@@ -80,16 +82,19 @@ class TabsRouteView extends Component<any, Props, any> {
     return null;
   }
 
-  // $FlowFixMe NavigationSceneRendererProps
-  renderScene(props): ?ReactElement {
+  renderScene(props: Object): ?ReactElement<any> {
     const { scene } = props;
 
     if (!scene.route) {
       return null;
     }
 
     const { transition: parentTransition } = props.navigationState;
-    const { transition: sceneTransition } = scene.route;
+    const {
+      transition: sceneTransition,
+      onSwipeBack,
+      onSwipeForward,
+     } = scene.route;
 
     const transition = sceneTransition || parentTransition;
 
@@ -98,8 +103,16 @@ class TabsRouteView extends Component<any, Props, any> {
       panResponder,
     } = transitionRegistry[transition];
 
+    const {
+      router,
+    } = this.props;
+
     const viewStyle = styleInterpolator(props);
-    const panHandlers = panResponder(props);
+    const panHandlers = panResponder({
+      ...props,
+      onNavigateBack: () => onSwipeBack && onSwipeBack(router),
+      onNavigateForward: () => onSwipeForward && onSwipeForward(router),
+    });
 
     const navigationCardProps = {
       key: scene.route.key,
@@ -112,8 +125,7 @@ class TabsRouteView extends Component<any, Props, any> {
     return React.createElement(NavigationCard, navigationCardProps);
   }
 
-  // $FlowFixMe NavigationSceneRendererProps
-  renderCardScene(props): ?ReactElement {
+  renderCardScene(props: Object): ?ReactElement<any> {
     const { scene } = props;
 
     const { navigationSubtree } = this.props;
@@ -213,4 +225,4 @@ class TabsRouteView extends Component<any, Props, any> {
   }
 }
 
-export default TabsRouteView;
+export default withRouter(TabsRouteView);

modules/TypeDefinition.js

@@ -31,6 +31,8 @@ export type EnhancedNavigationRoute = {
   routeParams: Object,
   transition: ?string,
   reducer: Function,
+  onSwipeBack: ?Function,
+  onSwipeForward: ?Function,
 };
 
 export type RouteDef = {
@@ -41,6 +43,8 @@ export type RouteDef = {
   routeType: ?RouteType,
   transition: ?string,
   reducer: Function,
+  onSwipeBack: ?Function,
+  onSwipeForward: ?Function,
 };
 
 export type IndexRouteDef = {

modules/withRouter.js

@@ -0,0 +1,35 @@
+/* @flow */
+
+import React, { PropTypes, Component } from 'react';
+
+type Props = {};
+
+type Context = {
+  router: Object,
+};
+
+export default (WrappedComponent: ReactClass<any>) => (
+  class extends Component<any, Props, any> {
+
+    static contextTypes = {
+      router: PropTypes.object,
+    };
+
+    constructor(props: Props, context: Context) {
+      super(props);
+      this.router = context.router;
+    }
+
+    router: Object;
+    context: Context;
+    props: Props;
+
+    render() {
+      const props = this.props;
+
+      return (
+        <WrappedComponent router={this.router} {...props} />
+      );
+    }
+  }
+);