Use react-native-screens when native screen components are available
This commit is contained in:
parent
bdb7cdd826
commit
45fa2b0e48
|
@ -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 (
|
||||
<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 };
|
||||
|
|
Loading…
Reference in New Issue