feat: add support for pager component

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

@@ -113,9 +113,15 @@ export type MaterialTopTabNavigationConfig = Partial<
     | 'onSwipeEnd'
     | 'renderScene'
     | 'renderTabBar'
+    | 'renderPager'
     | 'renderLazyPlaceholder'
   >
 > & {
+  /**
+   * Function that returns a React element to use as the pager.
+   * The pager handles swipe gestures and page switching.
+   */
+  pager?: React.ComponentProps<typeof TabView>['renderPager'];
   /**
    * Function that returns a React element to render for routes that haven't been rendered yet.
    * Receives an object containing the route as the prop.

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TabView, SceneRendererProps } from 'react-native-tab-view';
-import { Route, useTheme } from '@react-navigation/native';
+import { useTheme } from '@react-navigation/native';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';
 
 import MaterialTopTabBar from './MaterialTopTabBar';
@@ -19,6 +19,7 @@ type Props = MaterialTopTabNavigationConfig & {
 };
 
 export default function MaterialTopTabView({
+  pager,
   lazyPlaceholder,
   tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,
   tabBarOptions,
@@ -30,14 +31,6 @@ export default function MaterialTopTabView({
 }: Props) {
   const { colors } = useTheme();
 
-  const renderLazyPlaceholder = (props: { route: Route<string> }) => {
-    if (lazyPlaceholder != null) {
-      return lazyPlaceholder(props);
-    }
-
-    return null;
-  };
-
   const renderTabBar = (props: SceneRendererProps) => {
     const route = state.routes[state.index];
     const options = descriptors[route.key].options;
@@ -69,7 +62,8 @@ export default function MaterialTopTabView({
       renderScene={({ route }) => descriptors[route.key].render()}
       navigationState={state}
       renderTabBar={renderTabBar}
-      renderLazyPlaceholder={renderLazyPlaceholder}
+      renderPager={pager}
+      renderLazyPlaceholder={lazyPlaceholder}
       onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
       onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
       sceneContainerStyle={[