fix: don't enable screens for modal stacks

Author: satya164

example/package.json

@@ -25,6 +25,7 @@
     "babel-plugin-module-resolver": "^3.2.0"
   },
   "resolutions": {
-    "react-native-safe-area-view": "0.14.6"
+    "react-native-safe-area-view": "0.14.6",
+    "react-native-screens": "1.0.0-alpha.23"
   }
 }

example/yarn.lock

@@ -1778,6 +1778,11 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4664,10 +4669,12 @@ react-native-safe-module@^1.1.0:
   dependencies:
     dedent "^0.6.0"
 
-react-native-screens@1.0.0-alpha.22, "react-native-screens@^1.0.0 || ^1.0.0-alpha":
-  version "1.0.0-alpha.22"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz#7a120377b52aa9bbb94d0b8541a014026be9289b"
-  integrity sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA==
+react-native-screens@1.0.0-alpha.22, react-native-screens@1.0.0-alpha.23, "react-native-screens@^1.0.0 || ^1.0.0-alpha":
+  version "1.0.0-alpha.23"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.23.tgz#25d7ea4d11bda4fcde2d1da7ae50271c6aa636e0"
+  integrity sha512-tOxHGQUN83MTmQB4ghoQkibqOdGiX4JQEmeyEv96MKWO/x8T2PJv84ECUos9hD3blPRQwVwSpAid1PPPhrVEaw==
+  dependencies:
+    debounce "^1.2.0"
 
 react-native-svg@9.4.0:
   version "9.4.0"

package.json

@@ -18,7 +18,7 @@
     "prepare": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
-    "bootstrap": "yarn && yarn example"
+    "bootstrap": "yarn example && yarn"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

src/views/Stack/Stack.tsx

@@ -8,7 +8,7 @@ import {
   ViewProps,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { ScreenContainer, NativeScreen } from 'react-native-screens';
+import * as Screens from 'react-native-screens'; // Import with * as to prevent getters being called
 import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import StackItem from './StackItem';
@@ -66,26 +66,41 @@ type State = {
 const dimensions = Dimensions.get('window');
 const layout = { width: dimensions.width, height: dimensions.height };
 
-const AnimatedScreen = Animated.createAnimatedComponent(
-  NativeScreen
-) as React.ComponentType<
+let AnimatedScreen: React.ComponentType<
   ViewProps & { active: number | Animated.Node<number> }
 >;
 
-const MaybeScreenContainer = Platform.OS === 'ios' ? View : ScreenContainer;
+const MaybeScreenContainer = ({
+  enabled,
+  ...rest
+}: ViewProps & {
+  enabled: boolean;
+  children: React.ReactNode;
+}) => {
+  if (Platform.OS !== 'ios' && enabled && Screens.screensEnabled()) {
+    return <Screens.ScreenContainer {...rest} />;
+  }
+
+  return <View {...rest} />;
+};
 
 const MaybeScreen = ({
+  enabled,
   active,
   ...rest
 }: ViewProps & {
+  enabled: boolean;
   active: number | Animated.Node<number>;
   children: React.ReactNode;
 }) => {
-  if (Platform.OS === 'ios') {
-    return <View {...rest} />;
+  if (Platform.OS !== 'ios' && enabled && Screens.screensEnabled()) {
+    AnimatedScreen =
+      AnimatedScreen || Animated.createAnimatedComponent(Screens.NativeScreen);
+
+    return <AnimatedScreen active={active} {...rest} />;
   }
 
-  return <AnimatedScreen active={active} {...rest} />;
+  return <View {...rest} />;
 };
 
 const { cond, eq } = Animated;
@@ -300,6 +315,7 @@ export default class Stack extends React.Component<Props, State> {
     return (
       <React.Fragment>
         <MaybeScreenContainer
+          enabled={mode !== 'modal'}
           style={styles.container}
           onLayout={this.handleLayout}
         >
@@ -340,6 +356,7 @@ export default class Stack extends React.Component<Props, State> {
               <MaybeScreen
                 key={route.key}
                 style={StyleSheet.absoluteFill}
+                enabled={mode !== 'modal'}
                 active={isScreenActive}
                 pointerEvents="box-none"
               >