diff --git a/src/views/StackView/StackViewCard.js b/src/views/StackView/StackViewCard.js index af54ab8..b9d3f1e 100644 --- a/src/views/StackView/StackViewCard.js +++ b/src/views/StackView/StackViewCard.js @@ -1,21 +1,36 @@ import React from 'react'; -import { Animated, StyleSheet } from 'react-native'; +import { StyleSheet } from 'react-native'; +import { Screen } from './screens'; import createPointerEventsContainer from './createPointerEventsContainer'; +const EPS = 1e-5; + /** * Component that renders the scene as card for the . */ class Card extends React.Component { render() { - const { children, pointerEvents, style } = this.props; + const { + children, + pointerEvents, + style, + position, + scene: { index }, + } = this.props; + const active = position.interpolate({ + inputRange: [index, index + 1 - EPS, index + 1], + outputRange: [1, 1, 0], + extrapolate: 'clamp', + }); return ( - {children} - + ); } } diff --git a/src/views/StackView/StackViewLayout.js b/src/views/StackView/StackViewLayout.js index 4620fa1..07532b5 100644 --- a/src/views/StackView/StackViewLayout.js +++ b/src/views/StackView/StackViewLayout.js @@ -21,6 +21,7 @@ import { import Card from './StackViewCard'; import Header from '../Header/Header'; +import { ScreenContainer } from './screens'; import TransitionConfigs from './StackViewTransitionConfigs'; import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures'; @@ -469,9 +470,9 @@ class StackViewLayout extends React.Component { return ( - + {scenes.map(s => this._renderCard(s))} - + {floatingHeader} ); diff --git a/src/views/StackView/screens.js b/src/views/StackView/screens.js new file mode 100644 index 0000000..fce1d3f --- /dev/null +++ b/src/views/StackView/screens.js @@ -0,0 +1,6 @@ +import { Animated, View } from 'react-native'; + +const ScreenContainer = View; +const Screen = Animated.View; + +export { ScreenContainer, Screen };