Use react-native-screens when native screen components are available

This commit is contained in:
Krzysztof Magiera 2018-08-14 14:47:48 +02:00
parent bdb7cdd826
commit 45fa2b0e48
1 changed files with 43 additions and 4 deletions

View File

@ -1,9 +1,7 @@
import React from 'react'; import React from 'react';
import { Animated, View } from 'react-native'; import { Animated, View, UIManager, StyleSheet } from 'react-native';
const ScreenContainer = View; class ScreenComponent extends React.Component {
class Screen extends React.Component {
render() { render() {
// Filter out active prop in this case because it is unused and // Filter out active prop in this case because it is unused and
// can cause problems depending on react-native version: // 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 (
<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 = screens.ScreenContainer;
}
export { ScreenContainer, Screen }; export { ScreenContainer, Screen };