Add back old drawer behavior with unmountInactiveRoutes config

packages/drawer/example/App.js

@@ -5,12 +5,21 @@ import { createAppContainer } from '@react-navigation/native';
 // eslint-disable-next-line import/named
 import { createStackNavigator } from 'react-navigation-stack';
 import { List, Divider } from 'react-native-paper';
-import SimpleDrawer from './src/SimpleDrawer';
+import { SimpleDrawer, SimpleDrawerUnmountInactive } from './src/SimpleDrawer';
 import StyledDrawer from './src/StyledDrawer';
 import GestureInteraction from './src/GestureInteraction';
 
 const data = [
-  { component: SimpleDrawer, title: 'Simple', routeName: 'SimpleDrawer' },
+  {
+    component: SimpleDrawer,
+    title: 'Simple - persistent routes like tabs',
+    routeName: 'SimpleDrawer',
+  },
+  {
+    component: SimpleDrawerUnmountInactive,
+    title: 'Simple - unmount inactive routes',
+    routeName: 'SimpleDrawerUnmountInactive',
+  },
   { component: StyledDrawer, title: 'Styled', routeName: 'StyledDrawer' },
   {
     component: GestureInteraction,

packages/drawer/example/src/SimpleDrawer.js

@@ -122,27 +122,35 @@ DraftsStack.navigationOptions = {
   ),
 };
 
-const DrawerExample = createDrawerNavigator(
-  {
-    Inbox: {
-      path: '/',
-      screen: InboxStack,
+function createDrawerExample(options = {}) {
+  let DrawerExample = createDrawerNavigator(
+    {
+      Inbox: {
+        path: '/',
+        screen: InboxStack,
+      },
+      Drafts: {
+        path: '/sent',
+        screen: DraftsStack,
+      },
     },
-    Drafts: {
-      path: '/sent',
-      screen: DraftsStack,
-    },
-  },
-  {
-    initialRouteName: 'Drafts',
-    drawerWidth: 210,
-    navigationOptions: {
-      header: null,
-    },
-    contentOptions: {
-      activeTintColor: '#e91e63',
-    },
-  }
-);
+    {
+      initialRouteName: 'Drafts',
+      drawerWidth: 210,
+      navigationOptions: {
+        header: null,
+      },
+      contentOptions: {
+        activeTintColor: '#e91e63',
+      },
+      ...options,
+    }
+  );
 
-export default DrawerExample;
+  return DrawerExample;
+}
+
+export const SimpleDrawer = createDrawerExample();
+export const SimpleDrawerUnmountInactive = createDrawerExample({
+  unmountInactiveRoutes: true,
+});

packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`createDrawerNavigator renders successfully 1`] = `
 <RCTView
+  contentContainerStyle={undefined}
   drawerBackgroundColor="white"
   drawerLockMode={undefined}
   drawerPosition="left"

packages/drawer/src/routers/DrawerRouter.js

@@ -19,7 +19,11 @@ const getActiveRouteKey = route => {
 
 export default (routeConfigs, config = {}) => {
   config = { ...config };
-  config = withDefaultValue(config, 'resetOnBlur', false);
+  config = withDefaultValue(
+    config,
+    'resetOnBlur',
+    config.unmountInactiveRoutes ? true : !!config.resetOnBlur
+  );
   config = withDefaultValue(config, 'backBehavior', 'initialRoute');
 
   const switchRouter = SwitchRouter(routeConfigs, config);

packages/drawer/src/views/DrawerSidebar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { NavigationActions, StackActions } from '@react-navigation/core';
+import { NavigationActions } from '@react-navigation/core';
 import invariant from '../utils/invariant';
 
 /**

packages/drawer/src/views/DrawerView.js

@@ -139,12 +139,59 @@ export default class DrawerView extends React.PureComponent {
     );
   };
 
+  _renderContent = () => {
+    let { lazy, navigation } = this.props;
+    let { loaded } = this.state;
+    let { routes } = navigation.state;
+
+    if (this.props.navigationConfig.unmountInactiveRoutes) {
+      let activeKey = navigation.state.routes[navigation.state.index].key;
+      let descriptor = this.props.descriptors[activeKey];
+
+      return (
+        <SceneView
+          navigation={descriptor.navigation}
+          screenProps={this.props.screenProps}
+          component={descriptor.getComponent()}
+        />
+      );
+    } else {
+      return (
+        <ScreenContainer style={styles.pages}>
+          {routes.map((route, index) => {
+            if (lazy && !loaded.includes(index)) {
+              // Don't render a screen if we've never navigated to it
+              return null;
+            }
+
+            let isFocused = navigation.state.index === index;
+            let descriptor = this.props.descriptors[route.key];
+
+            return (
+              <ResourceSavingScene
+                key={route.key}
+                style={[
+                  StyleSheet.absoluteFill,
+                  { opacity: isFocused ? 1 : 0 },
+                ]}
+                isVisible={isFocused}
+              >
+                <SceneView
+                  navigation={descriptor.navigation}
+                  screenProps={this.props.screenProps}
+                  component={descriptor.getComponent()}
+                />
+              </ResourceSavingScene>
+            );
+          })}
+        </ScreenContainer>
+      );
+    }
+  };
+
   render() {
-    const { lazy, navigation } = this.props;
-    const { loaded } = this.state;
-    const { state } = navigation;
-    const { routes } = state;
-    const activeKey = routes[state.index].key;
+    const { navigation } = this.props;
+    const activeKey = navigation.state.routes[navigation.state.index].key;
     const { drawerLockMode } = this.props.descriptors[activeKey].options;
 
     return (
@@ -180,37 +227,12 @@ export default class DrawerView extends React.PureComponent {
         statusBarAnimation={this.props.navigationConfig.statusBarAnimation}
         minSwipeDistance={this.props.navigationConfig.minSwipeDistance}
         overlayColor={this.props.navigationConfig.overlayColor}
-        contentContainerStyle={this.props.navigationConfig.contentContainerStyle}
+        contentContainerStyle={
+          this.props.navigationConfig.contentContainerStyle
+        }
       >
         <DrawerGestureContext.Provider value={this.drawerGestureRef}>
-          <ScreenContainer style={styles.pages}>
-            {routes.map((route, index) => {
-              if (lazy && !loaded.includes(index)) {
-                // Don't render a screen if we've never navigated to it
-                return null;
-              }
-
-              const isFocused = navigation.state.index === index;
-              const descriptor = this.props.descriptors[route.key];
-
-              return (
-                <ResourceSavingScene
-                  key={route.key}
-                  style={[
-                    StyleSheet.absoluteFill,
-                    { opacity: isFocused ? 1 : 0 },
-                  ]}
-                  isVisible={isFocused}
-                >
-                  <SceneView
-                    navigation={descriptor.navigation}
-                    screenProps={this.props.screenProps}
-                    component={descriptor.getComponent()}
-                  />
-                </ResourceSavingScene>
-              );
-            })}
-          </ScreenContainer>
+          {this._renderContent()}
         </DrawerGestureContext.Provider>
       </DrawerLayout>
     );