From 9bfc92baa5c875abf33ae497b163b4c5603d6768 Mon Sep 17 00:00:00 2001
From: Krzysztof Magiera <krzys@swmansion.com>
Date: Tue, 14 Aug 2018 14:32:19 +0200
Subject: [PATCH] Use ScreenContainer and Screen components in stack -
 currently they fallback to RN's View

---
 src/views/StackView/StackViewCard.js   | 23 +++++++++++++++++++----
 src/views/StackView/StackViewLayout.js |  5 +++--
 src/views/StackView/screens.js         |  6 ++++++
 3 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 src/views/StackView/screens.js

diff --git a/src/views/StackView/StackViewCard.js b/src/views/StackView/StackViewCard.js
index af54ab8c4..b9d3f1e7a 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 <StackView />.
  */
 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 (
-      <Animated.View
+      <Screen
         pointerEvents={pointerEvents}
         ref={this.props.onComponentRef}
         style={[styles.main, style]}
+        active={active}
       >
         {children}
-      </Animated.View>
+      </Screen>
     );
   }
 }
diff --git a/src/views/StackView/StackViewLayout.js b/src/views/StackView/StackViewLayout.js
index 4620fa191..07532b5d8 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 (
       <View {...handlers} style={containerStyle}>
-        <View style={styles.scenes}>
+        <ScreenContainer style={styles.scenes}>
           {scenes.map(s => this._renderCard(s))}
-        </View>
+        </ScreenContainer>
         {floatingHeader}
       </View>
     );
diff --git a/src/views/StackView/screens.js b/src/views/StackView/screens.js
new file mode 100644
index 000000000..fce1d3fb8
--- /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 };