From 45fa2b0e4830c2725ed728de137c85f7de46bc88 Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Tue, 14 Aug 2018 14:47:48 +0200 Subject: [PATCH 1/6] 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 ( + (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`. + */} + {children} + + ); + } + } + + Screen = WrappedNativeScreen; + ScreenContainer = screens.ScreenContainer; +} + export { ScreenContainer, Screen }; From 7bae3b249910bb234a8e3981b0328bc25b1ef35b Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Fri, 17 Aug 2018 12:09:42 +0200 Subject: [PATCH 2/6] Add react-native-screens as dependency --- package.json | 1 + src/views/StackView/screens.js | 9 +++++---- yarn.lock | 4 ++++ 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 8f16f81..ccf4d1f 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ }, "homepage": "https://github.com/react-navigation/react-navigation-stack#readme", "dependencies": { + "react-native-screens": "^1.0.0-alpha.3" }, "devDependencies": { "@expo/vector-icons": "^6.2.0", diff --git a/src/views/StackView/screens.js b/src/views/StackView/screens.js index 02da639..e3ef122 100644 --- a/src/views/StackView/screens.js +++ b/src/views/StackView/screens.js @@ -1,5 +1,9 @@ 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() { @@ -24,9 +28,6 @@ let Screen = ScreenComponent; // 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); @@ -52,7 +53,7 @@ if (UIManager['RNSScreen']) { } Screen = WrappedNativeScreen; - ScreenContainer = screens.ScreenContainer; + ScreenContainer = NativeScreenContainer; } export { ScreenContainer, Screen }; diff --git a/yarn.lock b/yarn.lock index ae2a0a2..2fa41cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4981,6 +4981,10 @@ 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.3" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.3.tgz#22180cf91b4bc797428cde0d01b9b29809f82077" + react-native-tab-view@^0.0.77: version "0.0.77" resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz#11ceb8e7c23100d07e628dc151b57797524d00d4" From 1406f0f8ef709160afed2d95c62a1d5bcaf6e73d Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Fri, 7 Sep 2018 13:14:17 +0200 Subject: [PATCH 3/6] Bump screens version --- src/views/StackView/screens.js | 3 ++- yarn.lock | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/views/StackView/screens.js b/src/views/StackView/screens.js index e3ef122..193efdb 100644 --- a/src/views/StackView/screens.js +++ b/src/views/StackView/screens.js @@ -38,7 +38,8 @@ if (UIManager['RNSScreen']) { (this._ref = ref)} - style={StyleSheet.absoluteFill}> + 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` diff --git a/yarn.lock b/yarn.lock index 2fa41cc..6cde79a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4982,8 +4982,8 @@ react-native-safe-area-view@^0.8.0: hoist-non-react-statics "^2.3.1" react-native-screens@^1.0.0-alpha.3: - version "1.0.0-alpha.3" - resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.3.tgz#22180cf91b4bc797428cde0d01b9b29809f82077" + 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-tab-view@^0.0.77: version "0.0.77" From 1f2b50c083a30d00e701dff765a73e17b74d226c Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Fri, 7 Sep 2018 18:09:20 +0200 Subject: [PATCH 4/6] Use new version of rn-screens that provids compatibility layer to Views when native modules aren't available --- package.json | 2 +- src/views/StackView/StackViewCard.js | 2 +- src/views/StackView/StackViewLayout.js | 2 +- src/views/StackView/screens.js | 60 -------------------------- yarn.lock | 6 +-- 5 files changed, 6 insertions(+), 66 deletions(-) delete mode 100644 src/views/StackView/screens.js diff --git a/package.json b/package.json index ccf4d1f..fee5291 100644 --- a/package.json +++ b/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", diff --git a/src/views/StackView/StackViewCard.js b/src/views/StackView/StackViewCard.js index ba4098f..c21239b 100644 --- a/src/views/StackView/StackViewCard.js +++ b/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; diff --git a/src/views/StackView/StackViewLayout.js b/src/views/StackView/StackViewLayout.js index f9716e2..af16a5f 100644 --- a/src/views/StackView/StackViewLayout.js +++ b/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'; diff --git a/src/views/StackView/screens.js b/src/views/StackView/screens.js deleted file mode 100644 index 193efdb..0000000 --- a/src/views/StackView/screens.js +++ /dev/null @@ -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 ; - } -} - -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 ( - (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`. - */} - {children} - - ); - } - } - - Screen = WrappedNativeScreen; - ScreenContainer = NativeScreenContainer; -} - -export { ScreenContainer, Screen }; diff --git a/yarn.lock b/yarn.lock index 6cde79a..3654c35 100644 --- a/yarn.lock +++ b/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" From 71adcb712d46ebcc8720ed639576de9840f9455f Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Tue, 11 Sep 2018 11:37:46 +0200 Subject: [PATCH 5/6] Bump screens version to the one with feature flagging --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index fee5291..e8981d7 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ }, "homepage": "https://github.com/react-navigation/react-navigation-stack#readme", "dependencies": { - "react-native-screens": "^1.0.0-alpha.6" + "react-native-screens": "^1.0.0-alpha.7" }, "devDependencies": { "@expo/vector-icons": "^6.2.0", diff --git a/yarn.lock b/yarn.lock index 3654c35..6c6b4e1 100644 --- a/yarn.lock +++ b/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.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-screens@^1.0.0-alpha.7: + version "1.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.7.tgz#40a5851d434c11c54becca4c5f6c2182c4cc65bd" react-native-tab-view@^0.0.77: version "0.0.77" From b3e95f3006466c5759c10f877d68f5eb875ee06c Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Tue, 11 Sep 2018 14:44:59 +0200 Subject: [PATCH 6/6] Update screens versions --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index e8981d7..8edbd1a 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ }, "homepage": "https://github.com/react-navigation/react-navigation-stack#readme", "dependencies": { - "react-native-screens": "^1.0.0-alpha.7" + "react-native-screens": "^1.0.0-alpha.8" }, "devDependencies": { "@expo/vector-icons": "^6.2.0", diff --git a/yarn.lock b/yarn.lock index 6c6b4e1..63e1cdc 100644 --- a/yarn.lock +++ b/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.7: - version "1.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.7.tgz#40a5851d434c11c54becca4c5f6c2182c4cc65bd" +react-native-screens@^1.0.0-alpha.8: + version "1.0.0-alpha.8" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.8.tgz#c70b2d753420b9b9a64c4354bb301628f3a7d580" react-native-tab-view@^0.0.77: version "0.0.77"