From 4147e4f869c8b1de4d8d7b3e94c57778accfb089 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sun, 5 Jan 2020 01:26:20 +0100
Subject: [PATCH] feat: add support for pager component

---
 .../createMaterialTopTabNavigator.tsx         | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/tabs/src/navigators/createMaterialTopTabNavigator.tsx b/packages/tabs/src/navigators/createMaterialTopTabNavigator.tsx
index 2d51e445..4333ecd6 100644
--- a/packages/tabs/src/navigators/createMaterialTopTabNavigator.tsx
+++ b/packages/tabs/src/navigators/createMaterialTopTabNavigator.tsx
@@ -25,6 +25,9 @@ type Config = {
   initialLayout?: { width?: number; height?: number };
   lazy?: boolean;
   lazyPlaceholderComponent?: React.ComponentType<{ route: Route }>;
+  pagerComponent?: React.ComponentType<
+    Parameters<React.ComponentProps<typeof TabView>['renderPager']>[0]
+  >;
   tabBarComponent?: React.ComponentType<any>;
   tabBarOptions?: MaterialTabBarOptions;
   tabBarPosition?: 'top' | 'bottom';
@@ -42,17 +45,7 @@ type Props = NavigationViewProps &
   };
 
 class MaterialTabView extends React.PureComponent<Props> {
-  _renderLazyPlaceholder = (props: { route: Route }) => {
-    const { lazyPlaceholderComponent: LazyPlaceholder } = this.props;
-
-    if (LazyPlaceholder != null) {
-      return <LazyPlaceholder {...props} />;
-    }
-
-    return null;
-  };
-
-  _renderTabBar = (props: SceneRendererProps) => {
+  private renderTabBar = (props: SceneRendererProps) => {
     const { state } = this.props.navigation;
     const route = state.routes[state.index];
     const { descriptors } = this.props;
@@ -107,10 +100,11 @@ class MaterialTabView extends React.PureComponent<Props> {
       onTabPress,
       onTabLongPress,
       screenProps,
-      lazyPlaceholderComponent,
       tabBarComponent,
       tabBarOptions,
       /* eslint-enable @typescript-eslint/no-unused-vars */
+      lazyPlaceholderComponent,
+      pagerComponent,
       navigation,
       descriptors,
       ...rest
@@ -137,8 +131,17 @@ class MaterialTabView extends React.PureComponent<Props> {
         {...rest}
         navigationState={navigation.state}
         swipeEnabled={swipeEnabled}
-        renderTabBar={this._renderTabBar}
-        renderLazyPlaceholder={this._renderLazyPlaceholder}
+        renderTabBar={this.renderTabBar}
+        renderLazyPlaceholder={
+          lazyPlaceholderComponent !== undefined
+            ? props => React.createElement(lazyPlaceholderComponent, props)
+            : undefined
+        }
+        renderPager={
+          pagerComponent !== undefined
+            ? props => React.createElement(pagerComponent, props)
+            : undefined
+        }
       />
     );
   }