Document detachInactiveScreens (#859)

Author: WoLewicki

versioned_docs/version-4.x/bottom-tab-navigator.md

@@ -35,6 +35,7 @@ The route configs object is a mapping from route name to a route config, which t
 - `order` - Array of routeNames which defines the order of the tabs.
 - `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
 - `backBehavior` - `initialRoute` to return to initial tab, `order` to return to previous tab, `history` to return to last visited tab, or `none`.
+- `detachInactiveScreens` - Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. Make sure to call `enableScreens` from [react-native-screens](https://github.com/software-mansion/react-native-screens) to make it work. Defaults to `true`.
 - `lazy` - Defaults to `true`. If `false`, all tabs are rendered immediately. When `true`, tabs are rendered only when they are made active for the first time. Note: tabs are **not** re-rendered upon subsequent visits.
 - `tabBarComponent` - Optional, override component to use as the tab bar.
 - `tabBarOptions` - An object with the following properties:
@@ -72,14 +73,14 @@ If you want to customize the `tabBarComponent`:
 ```js
 import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';
 
-const TabBarComponent = props => <BottomTabBar {...props} />;
+const TabBarComponent = (props) => <BottomTabBar {...props} />;
 
 const TabScreens = createBottomTabNavigator(
   {
     // other screens
   },
   {
-    tabBarComponent: props => (
+    tabBarComponent: (props) => (
       <TabBarComponent {...props} style={{ borderTopColor: '#605F60' }} />
     ),
   }

versioned_docs/version-4.x/drawer-navigator.md

@@ -53,6 +53,7 @@ Several options get passed to the underlying router to modify navigation logic:
 - `order` - Array of routeNames which defines the order of the drawer items.
 - `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
 - `backBehavior` - Should the back button cause switch to the initial route? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
+- `detachInactiveScreens` - Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. Make sure to call `enableScreens` from [react-native-screens](https://github.com/software-mansion/react-native-screens) to make it work. Defaults to `true`.
 
 ### Providing a custom `contentComponent`
 
@@ -62,7 +63,7 @@ The default component for the drawer is scrollable and only contains links for t
 import SafeAreaView from 'react-native-safe-area-view';
 import { DrawerItems } from 'react-navigation-drawer';
 
-const CustomDrawerContentComponent = props => (
+const CustomDrawerContentComponent = (props) => (
   <ScrollView>
     <SafeAreaView
       style={styles.container}
@@ -83,7 +84,7 @@ const styles = StyleSheet.create({
 `contentComponent` also received a prop called `drawerOpenProgress` which is an Reanimated Node that represents the animated position of the drawer (0 is closed; 1 is open). This allows you to do interesting animations in your `contentComponent`, such as parallax motion of the drawer contents:
 
 ```js
-const CustomDrawerContentComponent = props => {
+const CustomDrawerContentComponent = (props) => {
   const translateX = Animated.interpolate(drawerOpenProgress, {
     inputRange: [0, 1],
     outputRange: [-100, 0],

versioned_docs/version-4.x/stack-navigator.md

@@ -58,6 +58,7 @@ Options for the router:
 - `navigationOptions` - Navigation options for the navigator itself, to configure a parent navigator
 - `defaultNavigationOptions` - Default navigation options to use for screens
 - `paths` - A mapping of overrides for the paths set in the route configs
+- `detachInactiveScreens` - Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. Make sure to call `enableScreens` from [react-native-screens](https://github.com/software-mansion/react-native-screens) to make it work. Defaults to `true` on Android and `false` on iOS.
 
 Visual options:
 
@@ -79,6 +80,10 @@ Visual options:
 
 String that can be used as a fallback for `headerTitle`. Additionally, will be used as a fallback for `tabBarLabel` (if nested in a TabNavigator) or `drawerLabel` (if nested in a DrawerNavigator).
 
+#### `detachPreviousScreen`
+
+Boolean used to indicate whether to detach the previous screen from the view hierarchy to save memory. Set it to `false` if you need the previous screen to be seen through the active screen. Only applicable if `detachInactiveScreens` isn't set to `false`. Defaults to `false` for the last screen when `mode='modal'`, otherwise `true`.
+
 #### `header`
 
 Function that given `HeaderProps` returns a React Element, to display as a header.

versioned_docs/version-5.x/bottom-tab-navigator.md

@@ -53,6 +53,10 @@ The name of the route to render on first load of the navigator.
 
 Default options to use for the screens in the navigator.
 
+#### `detachInactiveScreens`
+
+Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. Make sure to call `enableScreens` from [react-native-screens](https://github.com/software-mansion/react-native-screens) to make it work. Defaults to `true`.
+
 #### `backBehavior`
 
 Behavior of back button handling.

versioned_docs/version-5.x/drawer-navigator.md

@@ -53,6 +53,10 @@ The name of the route to render on first load of the navigator.
 
 Default options to use for the screens in the navigator.
 
+#### `detachInactiveScreens`
+
+Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. Make sure to call `enableScreens` from [react-native-screens](https://github.com/software-mansion/react-native-screens) to make it work. Defaults to `true`.
+
 #### `backBehavior`
 
 Behavior of back button handling.

versioned_docs/version-5.x/stack-navigator.md

@@ -68,6 +68,10 @@ Defines the style for rendering and transitions:
   - Sets `headerMode` to `screen` for the stack unless specified
   - Make the screens slide in from the bottom on iOS which is a common iOS pattern.
 
+#### `detachInactiveScreens`
+
+Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. Make sure to call `enableScreens` from [react-native-screens](https://github.com/software-mansion/react-native-screens) to make it work. Defaults to `true` on Android and `false` on iOS.
+
 #### `headerMode`
 
 Specifies how the header should be rendered:
@@ -84,6 +88,10 @@ The following [options](screen-options.md) can be used to configure the screens
 
 String that can be used as a fallback for `headerTitle`.
 
+#### `detachPreviousScreen`
+
+Boolean used to indicate whether to detach the previous screen from the view hierarchy to save memory. Set it to `false` if you need the previous screen to be seen through the active screen. Only applicable if `detachInactiveScreens` isn't set to `false`. Defaults to `false` for the last screen when `mode='modal'`, otherwise `true`.
+
 #### `header`
 
 Function that given `HeaderProps` returns a React Element, to display as a header. Make sure to set `headerMode` to `screen` as well when using a custom header (see below for more details).