diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx index 00803ef7..5f81d9b1 100644 --- a/packages/material-top-tabs/src/types.tsx +++ b/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, - | 'navigationState' - | 'onIndexChange' - | 'onSwipeStart' - | 'onSwipeEnd' - | 'renderScene' - | 'renderTabBar' - | 'renderLazyPlaceholder' - | 'lazy' - > +export type MaterialTopTabNavigationConfig = Omit< + TabViewProps>, + | '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 }) => 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 & { diff --git a/packages/material-top-tabs/src/views/MaterialTopTabView.tsx b/packages/material-top-tabs/src/views/MaterialTopTabView.tsx index 737471a9..07bc4377 100644 --- a/packages/material-top-tabs/src/views/MaterialTopTabView.tsx +++ b/packages/material-top-tabs/src/views/MaterialTopTabView.tsx @@ -21,11 +21,9 @@ type Props = MaterialTopTabNavigationConfig & { state: TabNavigationState; navigation: MaterialTopTabNavigationHelpers; descriptors: MaterialTopTabDescriptorMap; - tabBarPosition?: 'top' | 'bottom'; }; export default function MaterialTopTabView({ - lazyPlaceholder, tabBar = (props: MaterialTopTabBarProps) => , 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' })}