refactor: move lazyPlaceholder to options

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

@@ -1,5 +1,5 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { SceneRendererProps, TabView } from 'react-native-tab-view';
+import type { SceneRendererProps, TabViewProps } from 'react-native-tab-view';
 import type {
   ParamListBase,
   Descriptor,
@@ -67,6 +67,16 @@ export type MaterialTopTabNavigationOptions = {
    */
   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.
@@ -187,37 +197,21 @@ export type MaterialTopTabDescriptorMap = Record<
   MaterialTopTabDescriptor
 >;
 
-export type MaterialTopTabNavigationConfig = Partial<
-  Omit<
-    React.ComponentProps<typeof TabView>,
-    | 'navigationState'
-    | 'onIndexChange'
-    | 'onSwipeStart'
-    | 'onSwipeEnd'
-    | 'renderScene'
-    | 'renderTabBar'
-    | 'renderLazyPlaceholder'
-    | 'lazy'
-  >
+export type MaterialTopTabNavigationConfig = Omit<
+  TabViewProps<Route<string>>,
+  | 'navigationState'
+  | 'onIndexChange'
+  | 'onSwipeStart'
+  | 'onSwipeEnd'
+  | 'renderScene'
+  | 'renderTabBar'
+  | 'renderLazyPlaceholder'
+  | 'lazy'
 > & {
-  /**
-   * 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.
-   * The lazy prop also needs to be enabled.
-   *
-   * This view is usually only shown for a split second. Keep it lightweight.
-   *
-   * By default, this renders null.
-   */
-  lazyPlaceholder?: (props: { route: Route<string> }) => React.ReactNode;
   /**
    * Function that returns a React element to display as the tab bar.
    */
   tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;
-  /**
-   * Position of the tab bar. Defaults to `top`.
-   */
-  tabBarPosition?: 'top' | 'bottom';
 };
 
 export type MaterialTopTabBarProps = SceneRendererProps & {

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

@@ -21,11 +21,9 @@ type Props = MaterialTopTabNavigationConfig & {
   state: TabNavigationState<ParamListBase>;
   navigation: MaterialTopTabNavigationHelpers;
   descriptors: MaterialTopTabDescriptorMap;
-  tabBarPosition?: 'top' | 'bottom';
 };
 
 export default function MaterialTopTabView({
-  lazyPlaceholder,
   tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,
   state,
   navigation,
@@ -57,7 +55,9 @@ export default function MaterialTopTabView({
         renderScene={({ route }) => descriptors[route.key].render()}
         navigationState={state}
         renderTabBar={renderTabBar}
-        renderLazyPlaceholder={lazyPlaceholder}
+        renderLazyPlaceholder={({ route }) =>
+          descriptors[route.key].options.lazyPlaceholder?.() ?? null
+        }
         lazy={({ route }) => descriptors[route.key].options.lazy === true}
         onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
         onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}