chore: publish

- @react-navigation/material-top-tabs@6.0.0-next.3

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.2...@react-navigation/material-top-tabs@6.0.0-next.3) (2021-04-08)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.1...@react-navigation/material-top-tabs@6.0.0-next.2) (2021-04-08)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "6.0.0-next.2",
+  "version": "6.0.0-next.3",
   "keywords": [
     "react-native-component",
     "react-component",

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<
+export type MaterialTopTabNavigationConfig = Omit<
-  Omit<
+  TabViewProps<Route<string>>,
-    React.ComponentProps<typeof TabView>,
+  | 'navigationState'
-    | 'navigationState'
+  | 'onIndexChange'
-    | 'onIndexChange'
+  | 'onSwipeStart'
-    | 'onSwipeStart'
+  | 'onSwipeEnd'
-    | 'onSwipeEnd'
+  | 'renderScene'
-    | 'renderScene'
+  | 'renderTabBar'
-    | 'renderTabBar'
+  | 'renderLazyPlaceholder'
-    | 'renderLazyPlaceholder'
+  | 'lazy'
-    | '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' })}