Use new version of rn-screens that provids compatibility layer to Views when native modules aren't available

package.json

@@ -33,7 +33,7 @@
   },
   "homepage": "https://github.com/react-navigation/react-navigation-stack#readme",
   "dependencies": {
-    "react-native-screens": "^1.0.0-alpha.3"
+    "react-native-screens": "^1.0.0-alpha.6"
   },
   "devDependencies": {
     "@expo/vector-icons": "^6.2.0",

src/views/StackView/StackViewCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Platform } from 'react-native';
-import { Screen } from './screens';
+import { Screen } from 'react-native-screens';
 import createPointerEventsContainer from './createPointerEventsContainer';
 
 const EPS = 1e-5;

src/views/StackView/StackViewLayout.js

@@ -18,10 +18,10 @@ import {
   withOrientation,
   NavigationProvider,
 } from 'react-navigation';
+import { ScreenContainer } from 'react-native-screens';
 
 import Card from './StackViewCard';
 import Header from '../Header/Header';
-import { ScreenContainer } from './screens';
 
 import TransitionConfigs from './StackViewTransitionConfigs';
 import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';

src/views/StackView/screens.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Animated, View, UIManager, StyleSheet } from 'react-native';
-import {
-  ScreenContainer as NativeScreenContainer,
-  Screen as NativeScreen,
-} from 'react-native-screens';
-
-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:
-    // https://github.com/react-navigation/react-navigation/issues/4886
-
-    /* eslint-disable no-unused-vars */
-    const { active, onComponentRef, ...props } = this.props;
-
-    return <Animated.View {...props} ref={onComponentRef} />;
-  }
-}
-
-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
-  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 = NativeScreenContainer;
-}
-
-export { ScreenContainer, Screen };

yarn.lock

@@ -4981,9 +4981,9 @@ react-native-safe-area-view@^0.8.0:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
-react-native-screens@^1.0.0-alpha.3:
-  version "1.0.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.5.tgz#439f2f753e1773032f3259cf211f6a30c87cdc01"
+react-native-screens@^1.0.0-alpha.6:
+  version "1.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.6.tgz#f0684c8bed2b6d739b058fff4fe47ab28aa65e8f"
 
 react-native-tab-view@^0.0.77:
   version "0.0.77"