Add lazy requiring screens components (#117)

* Add lazy requiring screens components

* Fix naming

* Lazily initialize AnimatedNativeScreen
This commit is contained in:
Satyajit Sahoo
2019-07-04 12:44:32 +02:00
committed by Krzysztof Magiera
parent b042571315
commit c1cbf77097

View File

@@ -30,8 +30,11 @@ function screensEnabled() {
return USE_SCREENS;
}
// We initialize these lazily so that importing the module doesn't throw error when not linked
// This is necessary coz libraries such as React Navigation import the library where it may not be enabled
let NativeScreenValue;
let NativeScreenContainerValue;
let AnimatedNativeScreen;
const ScreensNativeModules = {
get NativeScreen() {
@@ -48,10 +51,6 @@ const ScreensNativeModules = {
},
};
const AnimatedNativeScreen = Animated.createAnimatedComponent(
ScreensNativeModules.NativeScreen
);
class Screen extends React.Component {
setNativeProps(props) {
this._ref.setNativeProps(props);
@@ -70,22 +69,28 @@ class Screen extends React.Component {
const { active, onComponentRef, ...props } = this.props;
return <Animated.View {...props} ref={this.setRef} />;
} else if (version.minor >= 57) {
return <AnimatedNativeScreen {...this.props} ref={this.setRef} />;
} else {
// On RN version below 0.57 we need to wrap screen's children with an
// additional View because of a bug fixed in react-native/pull/20658 which
// was preventing a view from having both styles and some other props being
// "animated" (using Animated native driver)
const { style, children, ...rest } = this.props;
return (
<AnimatedNativeScreen
{...rest}
ref={this.setRef}
style={StyleSheet.absoluteFill}>
<Animated.View style={style}>{children}</Animated.View>
</AnimatedNativeScreen>
);
AnimatedNativeScreen =
AnimatedNativeScreen ||
Animated.createAnimatedComponent(ScreensNativeModules.NativeScreen);
if (version.minor >= 57) {
return <AnimatedNativeScreen {...this.props} ref={this.setRef} />;
} else {
// On RN version below 0.57 we need to wrap screen's children with an
// additional View because of a bug fixed in react-native/pull/20658 which
// was preventing a view from having both styles and some other props being
// "animated" (using Animated native driver)
const { style, children, ...rest } = this.props;
return (
<AnimatedNativeScreen
{...rest}
ref={this.setRef}
style={StyleSheet.absoluteFill}>
<Animated.View style={style}>{children}</Animated.View>
</AnimatedNativeScreen>
);
}
}
}
}