Add gesture handling for the card stack.

Reviewed By: ericvicenti

Differential Revision: D2995958

fb-gh-sync-id: f66759440b03072b650a572f011cadd06a0180d2
shipit-source-id: f66759440b03072b650a572f011cadd06a0180d2

Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.js

@@ -14,6 +14,7 @@
 'use strict';
 
 const NavigationExampleRow = require('./NavigationExampleRow');
+const NavigationRootContainer = require('NavigationRootContainer');
 const React = require('react-native');
 
 const {
@@ -25,62 +26,68 @@ const {
 const NavigationCardStack = NavigationExperimental.CardStack;
 const NavigationStateUtils = NavigationExperimental.StateUtils;
 
+function reduceNavigationState(initialState) {
+  return (currentState, action) => {
+    switch (action.type) {
+      case 'RootContainerInitialAction':
+        return initialState;
+
+      case 'push':
+        return NavigationStateUtils.push(currentState, {key: action.key});
+
+      case 'back':
+      case 'pop':
+        return currentState.index > 0 ?
+          NavigationStateUtils.pop(currentState) :
+          currentState;
+
+      default:
+        return currentState;
+    }
+  };
+}
+
+const ExampleReducer = reduceNavigationState({
+  index: 0,
+  children: [{key: 'First Route'}],
+});
+
 class NavigationCardStackExample extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    this.state = this._getInitialState();
+
+    this._renderNavigation = this._renderNavigation.bind(this);
     this._renderScene = this._renderScene.bind(this);
-    this._push = this._push.bind(this);
-    this._pop = this._pop.bind(this);
     this._toggleDirection = this._toggleDirection.bind(this);
+
+    this.state = {isHorizontal: true};
   }
 
   render() {
+    return (
+      <NavigationRootContainer
+        reducer={ExampleReducer}
+        renderNavigation={this._renderNavigation}
+        style={styles.main}
+      />
+    );
+  }
+
+  _renderNavigation(navigationState, onNavigate) {
     return (
       <NavigationCardStack
         direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
-        navigationState={this.state.navigationState}
+        navigationState={navigationState}
+        onNavigate={onNavigate}
         renderScene={this._renderScene}
         style={styles.main}
       />
     );
   }
 
-  _getInitialState() {
-    const navigationState = {
-      index: 0,
-      children: [{key: 'First Route'}],
-    };
-    return {
-      isHorizontal: true,
-      navigationState,
-    };
-  }
-
-  _push() {
-    const state = this.state.navigationState;
-    const nextState = NavigationStateUtils.push(
-      state,
-      {key: 'Route ' + (state.index + 1)},
-    );
-    this.setState({
-      navigationState: nextState,
-    });
-  }
-
-  _pop() {
-    const state = this.state.navigationState;
-    const nextState = state.index > 0 ?
-      NavigationStateUtils.pop(state) :
-      state;
-
-    this.setState({
-      navigationState: nextState,
-    });
-  }
-
   _renderScene(props) {
+    const {navigationParentState, onNavigate} = props;
     return (
       <ScrollView style={styles.scrollView}>
         <NavigationExampleRow
@@ -96,11 +103,20 @@ class NavigationCardStackExample extends React.Component {
         />
         <NavigationExampleRow
           text="Push Route"
-          onPress={this._push}
+          onPress={() => {
+            onNavigate({
+              type: 'push',
+              key: 'Route ' + navigationParentState.children.length,
+            });
+          }}
         />
         <NavigationExampleRow
           text="Pop Route"
-          onPress={this._pop}
+          onPress={() => {
+            onNavigate({
+              type: 'pop',
+            });
+          }}
         />
         <NavigationExampleRow
           text="Exit Card Stack Example"
@@ -115,6 +131,12 @@ class NavigationCardStackExample extends React.Component {
       isHorizontal: !this.state.isHorizontal,
     });
   }
+
+  _onNavigate(action) {
+    if (action && action.type === 'back') {
+      this._pop();
+    }
+  }
 }
 
 const styles = StyleSheet.create({