feat: move lazy to options for bottom-tabs and drawer

BREAKING CHANGE: The lazy prop now can be configured per screen instead of for the whole navigator. To keep previous behavior, you can specify it in screenOptions

packages/bottom-tabs/src/types.tsx

@@ -83,6 +83,12 @@ export type BottomTabNavigationOptions = {
    */
   title?: string;
 
+  /**
+   * Whether this screens should render the first time it's accessed. Defaults to `true`.
+   * Set it to `false` if you want to render the screen on initial render.
+   */
+  lazy?: boolean;
+
   /**
    * Title string of a tab displayed in the tab bar
    * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
@@ -224,11 +230,6 @@ export type BottomTabDescriptor = Descriptor<
 export type BottomTabDescriptorMap = Record<string, BottomTabDescriptor>;
 
 export type BottomTabNavigationConfig = {
-  /**
-   * Whether the screens should render the first time they are accessed. Defaults to `true`.
-   * Set it to `false` if you want to render all screens on initial render.
-   */
-  lazy?: boolean;
   /**
    * Function that returns a React element to display as the tab bar.
    */

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

@@ -57,10 +57,6 @@ function SceneContent({
 }
 
 export default class BottomTabView extends React.Component<Props, State> {
-  static defaultProps = {
-    lazy: true,
-  };
-
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
     const focusedRouteKey = nextProps.state.routes[nextProps.state.index].key;
 
@@ -139,7 +135,6 @@ export default class BottomTabView extends React.Component<Props, State> {
       state,
       descriptors,
       navigation,
-      lazy,
       detachInactiveScreens = true,
       sceneContainerStyle,
     } = this.props;
@@ -157,7 +152,7 @@ export default class BottomTabView extends React.Component<Props, State> {
             >
               {routes.map((route, index) => {
                 const descriptor = descriptors[route.key];
-                const { unmountOnBlur } = descriptor.options;
+                const { lazy = true, unmountOnBlur } = descriptor.options;
                 const isFocused = state.index === index;
 
                 if (unmountOnBlur && !isFocused) {
@@ -165,7 +160,7 @@ export default class BottomTabView extends React.Component<Props, State> {
                 }
 
                 if (lazy && !loaded.includes(route.key) && !isFocused) {
-                  // Don't render a screen if we've never navigated to it
+                  // Don't render a lazy screen if we've never navigated to it
                   return null;
                 }