Add compatibility layer for screens so that they can be used when native lib is not installed.

package.json

@@ -45,8 +45,9 @@
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-flowtype": "^2.50.0",
     "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-jest": "^21.17.0",
+    "eslint-plugin-jest": "^21.22.0",
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-promise": "^3.8.0",
     "eslint-plugin-react": "^7.9.1",

src/screens.js

@@ -1,14 +1,71 @@
-import { Animated, requireNativeComponent } from 'react-native';
+import React from 'react';
+import {
+  Animated,
+  requireNativeComponent,
+  View,
+  UIManager,
+  StyleSheet,
+} from 'react-native';
 
-export const Screen = Animated.createAnimatedComponent(
-  requireNativeComponent('RNSScreen', null)
-);
+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
 
-export const ScreenContainer = requireNativeComponent(
-  'RNSScreenContainer',
-  null
-);
+    /* eslint-disable no-unused-vars */
+    const { active, onComponentRef, ...props } = this.props;
 
-export const ScreenStack = Animated.createAnimatedComponent(
-  requireNativeComponent('RNSScreenStack', null)
-);
+    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
+
+  const NativeScreen = Animated.createAnimatedComponent(
+    requireNativeComponent('RNSScreen', null)
+  );
+
+  const NativeScreenContainer = requireNativeComponent(
+    'RNSScreenContainer',
+    null
+  );
+
+  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 native 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

@@ -2145,6 +2145,12 @@ eslint-module-utils@^2.2.0:
     debug "^2.6.8"
     pkg-dir "^1.0.0"
 
+eslint-plugin-flowtype@^2.50.0:
+  version "2.50.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.0.tgz#953e262fa9b5d0fa76e178604892cf60dfb916da"
+  dependencies:
+    lodash "^4.17.10"
+
 eslint-plugin-import@^2.12.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.13.0.tgz#df24f241175e312d91662dc91ca84064caec14ed"
@@ -2160,9 +2166,9 @@ eslint-plugin-import@^2.12.0:
     read-pkg-up "^2.0.0"
     resolve "^1.6.0"
 
-eslint-plugin-jest@^21.17.0:
-  version "21.17.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.17.0.tgz#fdb00e2f9ff16987d6ebcf2c75c7add105760bbb"
+eslint-plugin-jest@^21.22.0:
+  version "21.22.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.22.0.tgz#1b9e49b3e5ce9a3d0a51af4579991d517f33726e"
 
 eslint-plugin-node@^6.0.1:
   version "6.0.1"