diff --git a/package.json b/package.json
index 9d2e3938..23b4bdfd 100644
--- a/package.json
+++ b/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",
diff --git a/src/screens.js b/src/screens.js
index ce610807..2dd186de 100644
--- a/src/screens.js
+++ b/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 ;
+ }
+}
+
+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 (
+ (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`.
+ */}
+ {children}
+
+ );
+ }
+ }
+
+ Screen = WrappedNativeScreen;
+ ScreenContainer = NativeScreenContainer;
+}
+
+export { ScreenContainer, Screen };
diff --git a/yarn.lock b/yarn.lock
index e7f58e62..54a16658 100644
--- a/yarn.lock
+++ b/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"