[NavigationExperimental] Migrate NavigationCardStack

Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js

@@ -32,14 +32,15 @@
  */
 'use strict';
 
-const NavigationAnimatedView = require('NavigationAnimatedView');
+const NavigationTransitioner = require('NavigationTransitioner');
 const NavigationCard = require('NavigationCard');
 const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
 const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
 const NavigationPropTypes = require('NavigationPropTypes');
 const React = require('React');
 const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
 const StyleSheet = require('StyleSheet');
+const View = require('View');
 
 const emptyFunction = require('fbjs/lib/emptyFunction');
 
@@ -50,6 +51,7 @@ import type {
   NavigationState,
   NavigationSceneRenderer,
   NavigationSceneRendererProps,
+  NavigationTransitionProps,
 } from 'NavigationTypeDefinition';
 
 import type {
@@ -85,6 +87,7 @@ type DefaultProps = {
  *     +------------+
  */
 class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
+  _render : NavigationSceneRenderer;
   _renderScene : NavigationSceneRenderer;
 
   static propTypes = {
@@ -105,6 +108,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
   }
 
   componentWillMount(): void {
+    this._render = this._render.bind(this);
     this._renderScene = this._renderScene.bind(this);
   }
 
@@ -118,15 +122,56 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
 
   render(): ReactElement<any> {
     return (
-      <NavigationAnimatedView
+      <NavigationTransitioner
         navigationState={this.props.navigationState}
-        renderOverlay={this.props.renderOverlay}
-        renderScene={this._renderScene}
-        style={[styles.animatedView, this.props.style]}
+        render={this._render}
+        style={this.props.style}
       />
     );
   }
 
+  _render(props: NavigationTransitionProps): ReactElement<any> {
+    const {
+       navigationState,
+     } = props;
+
+     let overlay = null;
+
+    if (this.props.renderOverlay) {
+      const route = navigationState.routes[navigationState.index];
+
+      const activeScene = props.scenes.find(
+       scene => !scene.isStale && scene.route === route ? scene : undefined
+      );
+
+      overlay = this.props.renderOverlay({
+       ...props,
+       scene: activeScene
+      });
+    }
+
+    const scenes = props.scenes.map(
+     scene => this._renderScene({
+       ...props,
+       scene,
+     }),
+     this
+    );
+
+    return (
+      <View
+        style={styles.container}
+      >
+        <View
+          style={styles.scenes}
+        >
+          {scenes}
+        </View>
+        {overlay}
+      </View>
+    );
+  }
+
   _renderScene(props: NavigationSceneRendererProps): ReactElement<any> {
     const isVertical = this.props.direction === 'vertical';
 
@@ -155,7 +200,10 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
 }
 
 const styles = StyleSheet.create({
-  animatedView: {
+  container: {
+    flex: 1,
+  },
+  scenes: {
     flex: 1,
   },
 });