feat: move some props to screenOptions in material top tabs

packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx

@@ -33,7 +33,10 @@ function MaterialTopTabNavigator({
   children,
   screenListeners,
   screenOptions,
+  swipeEnabled,
   lazy,
+  lazyPlaceholder,
+  lazyPreloadDistance,
   tabBarOptions,
   ...rest
 }: Props) {
@@ -53,6 +56,8 @@ function MaterialTopTabNavigator({
       tabBarIconStyle: tabBarOptions.iconStyle,
       tabBarLabelStyle: tabBarOptions.labelStyle,
       tabBarItemStyle: tabBarOptions.tabStyle,
+      tabBarBadge: tabBarOptions.renderBadge,
+      tabBarIndicator: tabBarOptions.renderIndicator,
       tabBarIndicatorStyle: tabBarOptions.indicatorStyle,
       tabBarIndicatorContainerStyle: tabBarOptions.indicatorContainerStyle,
       tabBarContentContainerStyle: tabBarOptions.contentContainerStyle,
@@ -80,14 +85,24 @@ function MaterialTopTabNavigator({
     );
   }
 
-  if (typeof lazy === 'boolean') {
-    defaultScreenOptions.lazy = lazy;
+  const deprecatedProps = {
+    swipeEnabled,
+    lazy,
+    lazyPlaceholder,
+    lazyPreloadDistance,
+  } as const;
 
-    warnOnce(
-      true,
-      `Material Top Tab Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/6.x/material-top-tab-navigator#lazy for more details.`
-    );
-  }
+  Object.entries(deprecatedProps).forEach(([propName, propValue]) => {
+    if (propValue !== undefined) {
+      // @ts-expect-error: Object.entries doesn't return strict types
+      defaultScreenOptions[propName] = propValue;
+
+      warnOnce(
+        true,
+        `Material Top Tab Navigator: '${propName}' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/6.x/material-top-tab-navigator#${propName.toLowerCase()} for more details.`
+      );
+    }
+  });
 
   const { state, descriptors, navigation, NavigationContent } =
     useNavigationBuilder<

packages/material-top-tabs/src/types.tsx

@@ -67,21 +67,6 @@ export type MaterialTopTabNavigationOptions = {
    */
   title?: string;
 
-  /**
-   * Whether this screens should render the first time it's accessed. Defaults to `false`.
-   */
-  lazy?: boolean;
-
-  /**
-   * Function that returns a React element to render if this screen hasn't been rendered yet.
-   * The `lazy` option also needs to be enabled for this to work.
-   *
-   * This view is usually only shown for a split second. Keep it lightweight.
-   *
-   * By default, this renders null.
-   */
-  lazyPlaceholder?: () => React.ReactNode;
-
   /**
    * Title string of a tab displayed in the tab bar
    * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
@@ -92,11 +77,32 @@ export type MaterialTopTabNavigationOptions = {
     | string
     | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
+  /**
+   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+   * It's recommended to set this if you don't have a label for the tab.
+   */
+  tabBarAccessibilityLabel?: string;
+
+  /**
+   * Whether label font should scale to respect Text Size accessibility settings.
+   */
+  tabBarAllowFontScaling?: boolean;
+
+  /**
+   * Whether the tab label should be visible. Defaults to `true`.
+   */
+  tabBarShowLabel?: boolean;
+
   /**
    * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
   tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
 
+  /**
+   * Whether the tab icon should be visible. Defaults to `false`.
+   */
+  tabBarShowIcon?: boolean;
+
   /**
    * Function that returns a React element to use as a badge for the tab.
    */
@@ -122,12 +128,6 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;
 
-  /**
-   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * It's recommended to set this if you don't have a label for the tab.
-   */
-  tabBarAccessibilityLabel?: string;
-
   /**
    * ID to locate this tab button in tests.
    */
@@ -153,21 +153,6 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarPressOpacity?: number;
 
-  /**
-   * Whether the tab label should be visible. Defaults to `true`.
-   */
-  tabBarShowLabel?: boolean;
-
-  /**
-   * Whether the tab icon should be visible. Defaults to `false`.
-   */
-  tabBarShowIcon?: boolean;
-
-  /**
-   * Whether label font should scale to respect Text Size accessibility settings.
-   */
-  tabBarAllowFontScaling?: boolean;
-
   /**
    * Boolean indicating whether the tab bar bounces when overscrolling.
    */
@@ -204,6 +189,42 @@ export type MaterialTopTabNavigationOptions = {
    * Style object for the the tab bar.
    */
   tabBarStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Whether to enable swipe gestures when this screen is focused.
+   * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
+   * but the user can still switch tabs by pressing the tab bar.
+   */
+  swipeEnabled?: boolean;
+
+  /**
+   * Whether this screen should be lazily rendered. When this is set to `true`,
+   * the screen will be rendered as it comes into the viewport.
+   * By default all screens are rendered to provide a smoother swipe experience.
+   * But you might want to defer the rendering of screens out of the viewport until the user sees them.
+   * To enable lazy rendering for this screen, set `lazy` to `true`.
+   *
+   * When you enable `lazy`, the lazy loaded screens will usually take some time to render
+   * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize
+   * what the user sees during this short period.
+   */
+  lazy?: boolean;
+
+  /**
+   * When `lazy` is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop.
+   * This value defaults to `0` which means lazy pages are loaded as they come into the viewport.
+   */
+  lazyPreloadDistance?: number;
+
+  /**
+   * Function that returns a React element to render if this screen hasn't been rendered yet.
+   * The `lazy` option also needs to be enabled for this to work.
+   *
+   * This view is usually only shown for a split second. Keep it lightweight.
+   *
+   * By default, this renders `null`.
+   */
+  lazyPlaceholder?: () => React.ReactNode;
 };
 
 export type MaterialTopTabDescriptor = Descriptor<
@@ -226,7 +247,10 @@ export type MaterialTopTabNavigationConfig = Omit<
   | 'renderScene'
   | 'renderTabBar'
   | 'renderLazyPlaceholder'
+  | 'swipeEnabled'
   | 'lazy'
+  | 'lazyPreloadDistance'
+  | 'lazyPlaceholder'
 > & {
   /**
    * Function that returns a React element to display as the tab bar.

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -41,6 +41,8 @@ export default function MaterialTopTabView({
     });
   };
 
+  const focusedOptions = descriptors[state.routes[state.index].key].options;
+
   return (
     <TabView<Route<string>>
       {...rest}
@@ -57,6 +59,8 @@ export default function MaterialTopTabView({
         descriptors[route.key].options.lazyPlaceholder?.() ?? null
       }
       lazy={({ route }) => descriptors[route.key].options.lazy === true}
+      lazyPreloadDistance={focusedOptions.lazyPreloadDistance}
+      swipeEnabled={focusedOptions.swipeEnabled}
       onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
       onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
       sceneContainerStyle={[