diff --git a/src/screens.native.js b/src/screens.native.js index 831c2e3a..345285d5 100644 --- a/src/screens.native.js +++ b/src/screens.native.js @@ -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 ; - } else if (version.minor >= 57) { - return ; } 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 ( - - {children} - - ); + AnimatedNativeScreen = + AnimatedNativeScreen || + Animated.createAnimatedComponent(ScreensNativeModules.NativeScreen); + + if (version.minor >= 57) { + return ; + } 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 ( + + {children} + + ); + } } } }