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"