diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js index a4a50c298..ed09cdafd 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js +++ b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js @@ -32,7 +32,7 @@ */ 'use strict'; -const NavigationAnimatedView = require('NavigationAnimatedView'); +const NavigationTransitioner = require('NavigationTransitioner'); const NavigationCard = require('NavigationCard'); const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator'); const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder'); @@ -40,6 +40,7 @@ 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 { + _render : NavigationSceneRenderer; _renderScene : NavigationSceneRenderer; static propTypes = { @@ -105,6 +108,7 @@ class NavigationCardStack extends React.Component { } componentWillMount(): void { + this._render = this._render.bind(this); this._renderScene = this._renderScene.bind(this); } @@ -118,15 +122,55 @@ class NavigationCardStack extends React.Component { render(): ReactElement { return ( - ); } + _render(props: NavigationTransitionProps): ReactElement { + const { + navigationState, + } = props; + + let overlay = null; + const renderOverlay = this.props.renderOverlay; + + if (renderOverlay) { + const route = navigationState.routes[navigationState.index]; + + const activeScene = props.scenes.find( + scene => !scene.isStale && scene.route === route ? scene : undefined + ); + + overlay = renderOverlay({ + ...props, + scene: activeScene + }); + } + + const scenes = props.scenes.map( + scene => this._renderScene({ + ...props, + scene, + }), + this + ); + + return ( + + + {scenes} + + {overlay} + + ); + } + _renderScene(props: NavigationSceneRendererProps): ReactElement { const isVertical = this.props.direction === 'vertical'; @@ -155,7 +199,10 @@ class NavigationCardStack extends React.Component { } const styles = StyleSheet.create({ - animatedView: { + container: { + flex: 1, + }, + scenes: { flex: 1, }, });