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 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 };
|
||||||
|
|
Loading…
Reference in New Issue