@react-navigation/drawer 8.0.0-alpha.4 → 8.0.0-alpha.40

package/src/views/DrawerView.tsx

@@ -1,5 +1,7 @@
 import { getHeaderTitle, Header } from '@react-navigation/elements';
 import {
+  ActivityView,
+  Container,
   SafeAreaProviderCompat,
   Screen as ScreenContent,
 } from '@react-navigation/elements/internal';
@@ -15,7 +17,6 @@ import {
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
-import { Screen, ScreenContainer } from 'react-native-screens';
 import useLatestCallback from 'use-latest-callback';
 
 import type {
@@ -24,6 +25,7 @@ import type {
   DrawerHeaderProps,
   DrawerNavigationConfig,
   DrawerNavigationHelpers,
+  DrawerNavigationOptions,
   DrawerNavigationProp,
 } from '../types';
 import { addCancelListener } from '../utils/addCancelListener';
@@ -52,13 +54,19 @@ function DrawerViewBase({
   descriptors,
   defaultStatus,
   drawerContent = renderDrawerContentDefault,
-  detachInactiveScreens = Platform.OS === 'web' ||
-    Platform.OS === 'android' ||
-    Platform.OS === 'ios',
 }: Props) {
   const { direction } = useLocale();
 
-  const focusedRouteKey = state.routes[state.index].key;
+  const focusedRoute = state.routes[state.index];
+
+  if (focusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const focusedRouteKey = focusedRoute.key;
+  const focusedOptions: DrawerNavigationOptions =
+    descriptors[focusedRouteKey]?.options ?? {};
+
   const {
     drawerHideStatusBarOnOpen,
     drawerPosition = direction === 'rtl' ? 'right' : 'left',
@@ -74,7 +82,7 @@ function DrawerViewBase({
     swipeMinDistance,
     overlayStyle,
     overlayAccessibilityLabel,
-  } = descriptors[focusedRouteKey].options;
+  } = focusedOptions;
 
   const [loaded, setLoaded] = React.useState([focusedRouteKey]);
 
@@ -209,13 +217,16 @@ function DrawerViewBase({
 
   const renderSceneContent = () => {
     return (
-      <ScreenContainer
-        enabled={detachInactiveScreens}
-        hasTwoStates
-        style={styles.content}
-      >
+      <Container style={styles.content}>
         {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
+
+          if (descriptor == null) {
+            throw new Error(
+              `Couldn't find a descriptor for route '${route.key}'.`
+            );
+          }
+
           const { lazy = true } = descriptor.options;
           const isFocused = state.index === index;
           const isPreloaded = state.preloadedRouteKeys.includes(route.key);
@@ -231,7 +242,7 @@ function DrawerViewBase({
           }
 
           const {
-            freezeOnBlur,
+            inactiveBehavior = 'pause',
             header = ({ options }: DrawerHeaderProps) => (
               <Header
                 {...options}
@@ -254,14 +265,20 @@ function DrawerViewBase({
             sceneStyle,
           } = descriptor.options;
 
+          // For preloaded screens and if lazy is false,
+          // Keep them active so that the effects can run
+          const isActive =
+            inactiveBehavior === 'none' ||
+            isFocused ||
+            isPreloaded ||
+            (lazy === false && !loaded.includes(route.key));
+
           return (
-            <Screen
+            <ActivityView
               key={route.key}
-              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
-              activityState={isFocused ? 2 : 0}
-              enabled={detachInactiveScreens}
-              freezeOnBlur={freezeOnBlur}
-              shouldFreeze={!isFocused && !isPreloaded}
+              mode={isFocused ? 'normal' : isActive ? 'inert' : 'paused'}
+              visible={isFocused}
+              style={{ ...StyleSheet.absoluteFill, zIndex: isFocused ? 0 : -1 }}
             >
               <ScreenContent
                 focused={isFocused}
@@ -280,10 +297,10 @@ function DrawerViewBase({
               >
                 {descriptor.render()}
               </ScreenContent>
-            </Screen>
+            </ActivityView>
           );
         })}
-      </ScreenContainer>
+      </Container>
     );
   };