fix: whitelist supported platforms (#886)

Added checks for Android and iOS in index.native.tsx and setting display: 'none' for inactive screens in the fallback.
software-mansion · Apr 14, 2021 · a7c5e10 · a7c5e10
1 parent 8f7a8c3
commit a7c5e10
Showing 1 changed file with 33 additions and 13 deletions.
diff --git a/src/index.native.tsx b/src/index.native.tsx
@@ -3,6 +3,7 @@ import {
   Animated,
   Image,
   ImageProps,
+  Platform,
   requireNativeComponent,
   StyleSheet,
   UIManager,
@@ -23,10 +24,13 @@ import {
   ScreenStackHeaderConfigProps,
 } from './types';
 
-let ENABLE_SCREENS = true;
+// web implementation is taken from `index.tsx`
+const isPlatformSupported = Platform.OS === 'ios' || Platform.OS === 'android';
+
+let ENABLE_SCREENS = isPlatformSupported;
 
 function enableScreens(shouldEnableScreens = true): void {
-  ENABLE_SCREENS = shouldEnableScreens;
+  ENABLE_SCREENS = isPlatformSupported && shouldEnableScreens;
   if (ENABLE_SCREENS && !UIManager.getViewManagerConfig('RNSScreen')) {
     console.error(
       `Screen native module hasn't been linked. Please check the react-native-screens README for more details`
@@ -102,12 +106,15 @@ class Screen extends React.Component<ScreenProps> {
   render() {
     const { enabled = ENABLE_SCREENS } = this.props;
 
-    if (enabled) {
+    if (enabled && isPlatformSupported) {
       AnimatedNativeScreen =
         AnimatedNativeScreen ||
         Animated.createAnimatedComponent(ScreensNativeModules.NativeScreen);
 
-      // same reason as above
+      // Filter out active prop in this case because it is unused and
+      // can cause problems depending on react-native version:
+      // https://github.com/react-navigation/react-navigation/issues/4886
+      // same for enabled prop
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       let { enabled, active, activityState, ...rest } = this.props;
       if (active !== undefined && activityState === undefined) {
@@ -124,15 +131,28 @@ class Screen extends React.Component<ScreenProps> {
         />
       );
     } else {
-      // Filter out active prop in this case because it is unused and
-      // can cause problems depending on react-native version:
-      // https://github.com/react-navigation/react-navigation/issues/4886
-      // same for enabled prop
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { active, enabled, onComponentRef, ...rest } = this.props;
+      // same reason as above
+      let {
+        active,
+        activityState,
+        style,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        enabled,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        onComponentRef,
+        ...rest
+      } = this.props;
 
-      return <Animated.View {...rest} ref={this.setRef} />;
+      if (active !== undefined && activityState === undefined) {
+        activityState = active !== 0 ? 2 : 0;
+      }
+      return (
+        <Animated.View
+          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
+          ref={this.setRef}
+          {...rest}
+        />
+      );
     }
   }
 }
@@ -141,7 +161,7 @@ class ScreenContainer extends React.Component<ScreenContainerProps> {
   render() {
     const { enabled = ENABLE_SCREENS, ...rest } = this.props;
 
-    if (enabled) {
+    if (enabled && isPlatformSupported) {
       return <ScreensNativeModules.NativeScreenContainer {...rest} />;
     }