From 45fa2b0e4830c2725ed728de137c85f7de46bc88 Mon Sep 17 00:00:00 2001
From: Krzysztof Magiera <krzys@swmansion.com>
Date: Tue, 14 Aug 2018 14:47:48 +0200
Subject: [PATCH] Use react-native-screens when native screen components are
 available

---
 src/views/StackView/screens.js | 47 +++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/views/StackView/screens.js b/src/views/StackView/screens.js
index 914f215..02da639 100644
--- a/src/views/StackView/screens.js
+++ b/src/views/StackView/screens.js
@@ -1,9 +1,7 @@
 import React from 'react';
-import { Animated, View } from 'react-native';
+import { Animated, View, UIManager, StyleSheet } from 'react-native';
 
-const ScreenContainer = View;
-
-class Screen extends React.Component {
+class ScreenComponent extends React.Component {
   render() {
     // Filter out active prop in this case because it is unused and
     // can cause problems depending on react-native version:
@@ -16,4 +14,45 @@ class Screen extends React.Component {
   }
 }
 
+let ScreenContainer = View;
+let Screen = ScreenComponent;
+
+// If RNSScreen native component is available, instead of using plain RN Views
+// for ScreenContainer and Screen components, we can use native component
+// provided by react-native-screens lib. Note that we don't specify
+// react-native-screens as a dependency, but instead we check whether the library
+// is linked natively (we only `require` the lib if native components are installed)
+if (UIManager['RNSScreen']) {
+  // native screen components are available
+  const screens = require('react-native-screens');
+
+  const NativeScreen = screens.Screen;
+  class WrappedNativeScreen extends React.Component {
+    setNativeProps(props) {
+      this._ref.setNativeProps(props);
+    }
+    render() {
+      const { style, children, ...rest } = this.props;
+      return (
+        <NativeScreen
+          {...rest}
+          ref={ref => (this._ref = ref)}
+          style={StyleSheet.absoluteFill}>
+          {/*
+            We need to wrap children in additional Animated.View because
+            of a bug in native driver preventing from both `active` and `styles`
+            props begin animated in `NativeScreen` component. Once
+            react-native/pull/20658 is merged we can export screens.Screen directly
+            and avoid wrapping with `Animated.View`.
+          */}
+          <Animated.View style={style}>{children}</Animated.View>
+        </NativeScreen>
+      );
+    }
+  }
+
+  Screen = WrappedNativeScreen;
+  ScreenContainer = screens.ScreenContainer;
+}
+
 export { ScreenContainer, Screen };