@react-navigation/drawer 8.0.0-alpha.5 → 8.0.0-alpha.51

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,7 +25,7 @@ import type {
   DrawerHeaderProps,
   DrawerNavigationConfig,
   DrawerNavigationHelpers,
-  DrawerNavigationProp,
+  DrawerNavigationOptions,
 } from '../types';
 import { addCancelListener } from '../utils/addCancelListener';
 import { DrawerPositionContext } from '../utils/DrawerPositionContext';
@@ -52,13 +53,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 +81,7 @@ function DrawerViewBase({
     swipeMinDistance,
     overlayStyle,
     overlayAccessibilityLabel,
-  } = descriptors[focusedRouteKey].options;
+  } = focusedOptions;
 
   const [loaded, setLoaded] = React.useState([focusedRouteKey]);
 
@@ -91,11 +98,17 @@ function DrawerViewBase({
       previousRouteKey !== focusedRouteKey &&
       descriptors[previousRouteKey]?.options.popToTopOnBlur
     ) {
-      const prevRoute = state.routes.find(
+      const currentState = navigation.getState();
+      const prevRoute = currentState.routes.find(
         (route) => route.key === previousRouteKey
       );
 
-      if (prevRoute?.state?.type === 'stack' && prevRoute.state.key) {
+      if (
+        prevRoute?.state?.type === 'stack' &&
+        prevRoute.state.key &&
+        ((prevRoute.state.index ?? prevRoute.state.routes.length - 1) > 0 ||
+          prevRoute.state.routes[0]?.history?.length)
+      ) {
         navigation.dispatch({
           ...StackActions.popToTop(),
           target: prevRoute.state.key,
@@ -104,7 +117,7 @@ function DrawerViewBase({
     }
 
     previousRouteKeyRef.current = focusedRouteKey;
-  }, [descriptors, focusedRouteKey, navigation, state.routes]);
+  }, [descriptors, focusedRouteKey, navigation]);
 
   const { colors } = useTheme();
 
@@ -209,13 +222,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 +247,7 @@ function DrawerViewBase({
           }
 
           const {
-            freezeOnBlur,
+            inactiveBehavior = 'pause',
             header = ({ options }: DrawerHeaderProps) => (
               <Header
                 {...options}
@@ -254,14 +270,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}
@@ -272,18 +294,17 @@ function DrawerViewBase({
                 headerTransparent={headerTransparent}
                 header={header({
                   route: descriptor.route,
-                  navigation:
-                    descriptor.navigation as DrawerNavigationProp<ParamListBase>,
+                  navigation: descriptor.navigation,
                   options: descriptor.options,
                 })}
                 style={sceneStyle}
               >
                 {descriptor.render()}
               </ScreenContent>
-            </Screen>
+            </ActivityView>
           );
         })}
-      </ScreenContainer>
+      </Container>
     );
   };