NavigationCardStack - Add card stack item.

Summary: Add card stack item that moves from the right or the bottom.

Reviewed By: ericvicenti

Differential Revision: D2975659

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

Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.js

@@ -33,35 +33,36 @@ class NavigationCardStackExample extends React.Component {
     this._renderScene = this._renderScene.bind(this);
     this._push = this._push.bind(this);
     this._pop = this._pop.bind(this);
+    this._toggleDirection = this._toggleDirection.bind(this);
   }
 
   render() {
     return (
       <NavigationCardStack
-        style={styles.main}
-        renderScene={this._renderScene}
+        direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
         navigationState={this.state.navigationState}
+        renderScene={this._renderScene}
+        style={styles.main}
       />
     );
   }
 
   _getInitialState() {
-    const route = {key: 'First Route'};
     const navigationState = {
       index: 0,
-      children: [route],
+      children: [{key: 'First Route'}],
     };
     return {
+      isHorizontal: true,
       navigationState,
     };
   }
 
   _push() {
     const state = this.state.navigationState;
-    const nextRoute = {key: 'Route ' + (state.index + 1)};
     const nextState = NavigationStateUtils.push(
       state,
-      nextRoute,
+      {key: 'Route ' + (state.index + 1)},
     );
     this.setState({
       navigationState: nextState,
@@ -83,7 +84,15 @@ class NavigationCardStackExample extends React.Component {
     return (
       <ScrollView style={styles.scrollView}>
         <NavigationExampleRow
-          text={JSON.stringify(props.navigationState)}
+          text={
+            this.state.isHorizontal ?
+            'direction = "horizontal"' :
+            'direction = "vertical"'
+          }
+          onPress={this._toggleDirection}
+        />
+        <NavigationExampleRow
+          text={'route = ' + props.navigationState.key}
         />
         <NavigationExampleRow
           text="Push Route"
@@ -100,6 +109,12 @@ class NavigationCardStackExample extends React.Component {
       </ScrollView>
     );
   }
+
+  _toggleDirection() {
+    this.setState({
+      isHorizontal: !this.state.isHorizontal,
+    });
+  }
 }
 
 const styles = StyleSheet.create({