refactor: drop unmountInactiveScreens in favor of unmountOnBlur… (react-navigation#317)

The `unmountInactiveScreens` prop lets user unmount all inactive screens for the whole navigator when they go out of focus. It'll be better to have the option to do that per screen, so I have added the `unmountOnBlur` option instead.

To get the previous behaviour, user can specify the option in `screenOptions`.

Author: satya164

packages/bottom-tabs/src/types.tsx

@@ -99,6 +99,12 @@ export type BottomTabNavigationOptions = {
    * Renders `TouchableWithoutFeedback` by default.
    */
   tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
+
+  /**
+   * Whether this screen should be unmounted when navigating away from it.
+   * Defaults to `false`.
+   */
+  unmountOnBlur?: boolean;
 };
 
 export type BottomTabDescriptor = Descriptor<
@@ -118,11 +124,6 @@ export type BottomTabNavigationConfig = {
    * Set it to `false` if you want to render all screens on initial render.
    */
   lazy?: boolean;
-  /**
-   * Whether a screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountInactiveScreens?: boolean;
   /**
    * Function that returns a React element to display as the tab bar.
    */

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

@@ -92,7 +92,7 @@ export default class BottomTabView extends React.Component<Props, State> {
   };
 
   render() {
-    const { state, descriptors, lazy, unmountInactiveScreens } = this.props;
+    const { state, descriptors, lazy } = this.props;
     const { routes } = state;
     const { loaded } = this.state;
 
@@ -101,25 +101,27 @@ export default class BottomTabView extends React.Component<Props, State> {
         <View style={styles.container}>
           <ScreenContainer style={styles.pages}>
             {routes.map((route, index) => {
-              if (unmountInactiveScreens && index !== state.index) {
+              const descriptor = descriptors[route.key];
+              const { unmountOnBlur } = descriptor.options;
+              const isFocused = state.index === index;
+
+              if (unmountOnBlur && !isFocused) {
                 return null;
               }
 
-              if (lazy && !loaded.includes(index)) {
+              if (lazy && !loaded.includes(index) && !isFocused) {
                 // Don't render a screen if we've never navigated to it
                 return null;
               }
 
-              const isFocused = state.index === index;
-
               return (
                 <ResourceSavingScene
                   key={route.key}
                   style={StyleSheet.absoluteFill}
                   isVisible={isFocused}
                 >
                   <SceneContent isFocused={isFocused}>
-                    {descriptors[route.key].render()}
+                    {descriptor.render()}
                   </SceneContent>
                 </ResourceSavingScene>
               );

packages/drawer/src/types.tsx

@@ -63,11 +63,6 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
    * Set it to `false` if you want to render all screens on initial render.
    */
   lazy?: boolean;
-  /**
-   * Whether a screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountInactiveScreens?: boolean;
   /**
    * Function that returns React element to render as the content of the drawer, for example, navigation items.
    * Defaults to `DrawerContent`.
@@ -117,6 +112,11 @@ export type DrawerNavigationOptions = {
    * Defaults to `true`
    */
   gestureEnabled?: boolean;
+  /**
+   * Whether this screen should be unmounted when navigating away from it.
+   * Defaults to `false`.
+   */
+  unmountOnBlur?: boolean;
 };
 
 export type DrawerContentComponentProps<T = DrawerContentOptions> = T & {

packages/drawer/src/views/DrawerView.tsx

@@ -77,7 +77,6 @@ export default function DrawerView({
   gestureHandlerProps,
   minSwipeDistance,
   sceneContainerStyle,
-  unmountInactiveScreens,
 }: Props) {
   const [loaded, setLoaded] = React.useState([state.index]);
   const [drawerWidth, setDrawerWidth] = React.useState(() =>
@@ -135,18 +134,19 @@ export default function DrawerView({
     return (
       <ScreenContainer style={styles.content}>
         {state.routes.map((route, index) => {
-          if (unmountInactiveScreens && index !== state.index) {
+          const descriptor = descriptors[route.key];
+          const { unmountOnBlur } = descriptor.options;
+          const isFocused = state.index === index;
+
+          if (unmountOnBlur && !isFocused) {
             return null;
           }
 
-          if (lazy && !loaded.includes(index) && index !== state.index) {
+          if (lazy && !loaded.includes(index) && !isFocused) {
             // Don't render a screen if we've never navigated to it
             return null;
           }
 
-          const isFocused = state.index === index;
-          const descriptor = descriptors[route.key];
-
           return (
             <ResourceSavingScene
               key={route.key}