fix: make sure disabling react-native-screens works

example/src/index.tsx

@@ -61,7 +61,7 @@ if (Platform.OS !== 'web') {
   LogBox.ignoreLogs(['Require cycle:']);
 }
 
-enableScreens(false);
+enableScreens();
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { StyleSheet, Platform } from 'react-native';
-import { ScreenContainer } from 'react-native-screens';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import {
   NavigationHelpersContext,
@@ -13,8 +12,7 @@ import {
   SafeAreaProviderCompat,
   getHeaderTitle,
 } from '@react-navigation/elements';
-
-import ScreenFallback from './ScreenFallback';
+import { MaybeScreenContainer, MaybeScreen } from './ScreenFallback';
 import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
 import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
 import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
@@ -93,8 +91,7 @@ export default function BottomTabView(props: Props) {
   return (
     <NavigationHelpersContext.Provider value={navigation}>
       <SafeAreaProviderCompat>
-        <ScreenContainer
-          // @ts-ignore
+        <MaybeScreenContainer
           enabled={detachInactiveScreens}
           style={styles.container}
         >
@@ -123,7 +120,7 @@ export default function BottomTabView(props: Props) {
             } = descriptor.options;
 
             return (
-              <ScreenFallback
+              <MaybeScreen
                 key={route.key}
                 style={StyleSheet.absoluteFill}
                 visible={isFocused}
@@ -149,10 +146,10 @@ export default function BottomTabView(props: Props) {
                     {descriptor.render()}
                   </Screen>
                 </BottomTabBarHeightContext.Provider>
-              </ScreenFallback>
+              </MaybeScreen>
             );
           })}
-        </ScreenContainer>
+        </MaybeScreenContainer>
         <BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}>
           {renderTabBar()}
         </BottomTabBarHeightCallbackContext.Provider>

packages/bottom-tabs/src/views/ScreenFallback.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { Screen, screensEnabled } from 'react-native-screens';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
 import { ResourceSavingView } from '@react-navigation/elements';
 
 type Props = {
@@ -10,12 +9,34 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-export default function ScreenFallback({ visible, children, ...rest }: Props) {
-  if (screensEnabled?.()) {
+let Screens: typeof import('react-native-screens') | undefined;
+
+try {
+  Screens = require('react-native-screens');
+} catch (e) {
+  // Ignore
+}
+
+export const MaybeScreenContainer = ({
+  enabled,
+  ...rest
+}: ViewProps & {
+  enabled: boolean;
+  children: React.ReactNode;
+}) => {
+  if (Screens?.screensEnabled?.()) {
+    return <Screens.ScreenContainer enabled={enabled} {...rest} />;
+  }
+
+  return <View {...rest} />;
+};
+
+export function MaybeScreen({ visible, children, ...rest }: Props) {
+  if (Screens?.screensEnabled?.()) {
     return (
-      <Screen activityState={visible ? 2 : 0} {...rest}>
+      <Screens.Screen activityState={visible ? 2 : 0} {...rest}>
         {children}
-      </Screen>
+      </Screens.Screen>
     );
   }
 

packages/drawer/src/views/DrawerView.tsx

@@ -6,7 +6,6 @@ import {
   Platform,
   BackHandler,
 } from 'react-native';
-import { ScreenContainer } from 'react-native-screens';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import Animated from 'react-native-reanimated';
 import {
@@ -22,9 +21,8 @@ import {
   SafeAreaProviderCompat,
   getHeaderTitle,
 } from '@react-navigation/elements';
-
+import { MaybeScreenContainer, MaybeScreen } from './ScreenFallback';
 import { GestureHandlerRootView } from './GestureHandler';
-import ScreenFallback from './ScreenFallback';
 import DrawerToggleButton from './DrawerToggleButton';
 import DrawerContent from './DrawerContent';
 import DrawerStatusContext from '../utils/DrawerStatusContext';
@@ -191,8 +189,10 @@ function DrawerViewBase({
 
   const renderSceneContent = () => {
     return (
-      // @ts-ignore
-      <ScreenContainer enabled={detachInactiveScreens} style={styles.content}>
+      <MaybeScreenContainer
+        enabled={detachInactiveScreens}
+        style={styles.content}
+      >
         {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
           const { lazy = true, unmountOnBlur } = descriptor.options;
@@ -223,7 +223,7 @@ function DrawerViewBase({
           } = descriptor.options;
 
           return (
-            <ScreenFallback
+            <MaybeScreen
               key={route.key}
               style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
               visible={isFocused}
@@ -245,10 +245,10 @@ function DrawerViewBase({
               >
                 {descriptor.render()}
               </Screen>
-            </ScreenFallback>
+            </MaybeScreen>
           );
         })}
-      </ScreenContainer>
+      </MaybeScreenContainer>
     );
   };
 

packages/drawer/src/views/ScreenFallback.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { Screen, screensEnabled } from 'react-native-screens';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
 import { ResourceSavingView } from '@react-navigation/elements';
 
 type Props = {
@@ -10,12 +9,34 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-export default function ScreenFallback({ visible, children, ...rest }: Props) {
-  if (screensEnabled?.()) {
+let Screens: typeof import('react-native-screens') | undefined;
+
+try {
+  Screens = require('react-native-screens');
+} catch (e) {
+  // Ignore
+}
+
+export const MaybeScreenContainer = ({
+  enabled,
+  ...rest
+}: ViewProps & {
+  enabled: boolean;
+  children: React.ReactNode;
+}) => {
+  if (Screens?.screensEnabled?.()) {
+    return <Screens.ScreenContainer enabled={enabled} {...rest} />;
+  }
+
+  return <View {...rest} />;
+};
+
+export function MaybeScreen({ visible, children, ...rest }: Props) {
+  if (Screens?.screensEnabled?.()) {
     return (
-      <Screen activityState={visible ? 2 : 0} {...rest}>
+      <Screens.Screen activityState={visible ? 2 : 0} {...rest}>
         {children}
-      </Screen>
+      </Screens.Screen>
     );
   }
 

packages/stack/src/views/Screens.tsx

@@ -17,10 +17,7 @@ export const MaybeScreenContainer = ({
   children: React.ReactNode;
 }) => {
   if (Screens != null) {
-    return (
-      // @ts-ignore
-      <Screens.ScreenContainer enabled={enabled} {...rest} />
-    );
+    return <Screens.ScreenContainer enabled={enabled} {...rest} />;
   }
 
   return <View {...rest} />;