diff --git a/packages/tabs/example/src/MaterialTopTabs.tsx b/packages/tabs/example/src/MaterialTopTabs.tsx index 615d0bd2..d6c8c878 100644 --- a/packages/tabs/example/src/MaterialTopTabs.tsx +++ b/packages/tabs/example/src/MaterialTopTabs.tsx @@ -34,8 +34,16 @@ class ContactsScreen extends React.Component { } } -export default createMaterialTopTabNavigator({ - AlbumsScreen, - ArticleScreen, - ContactsScreen, -}); +export default createMaterialTopTabNavigator( + { + AlbumsScreen, + ArticleScreen, + ContactsScreen, + }, + { + lazy: true, + tabBarOptions: { + style: { backgroundColor: '#5620E4' }, + }, + } +); diff --git a/packages/tabs/src/navigators/createBottomTabNavigator.tsx b/packages/tabs/src/navigators/createBottomTabNavigator.tsx index 8cccbbeb..164df27d 100644 --- a/packages/tabs/src/navigators/createBottomTabNavigator.tsx +++ b/packages/tabs/src/navigators/createBottomTabNavigator.tsx @@ -22,22 +22,26 @@ import { SceneDescriptorMap, } from '../types'; -type Props = NavigationViewProps & { - getAccessibilityRole: (props: { - route: NavigationRoute; - }) => AccessibilityRole | undefined; - getAccessibilityStates: (props: { - route: NavigationRoute; - focused: boolean; - }) => AccessibilityState[]; +type Config = { lazy?: boolean; tabBarComponent?: React.ComponentType; tabBarOptions?: BottomTabBarOptions; - navigation: NavigationTabProp; - descriptors: SceneDescriptorMap; - screenProps?: unknown; }; +type Props = NavigationViewProps & + Config & { + getAccessibilityRole: (props: { + route: NavigationRoute; + }) => AccessibilityRole | undefined; + getAccessibilityStates: (props: { + route: NavigationRoute; + focused: boolean; + }) => AccessibilityState[]; + navigation: NavigationTabProp; + descriptors: SceneDescriptorMap; + screenProps?: unknown; + }; + type State = { loaded: number[]; }; @@ -176,6 +180,6 @@ const styles = StyleSheet.create({ }, }); -export default createTabNavigator( +export default createTabNavigator( TabNavigationView ); diff --git a/packages/tabs/src/navigators/createMaterialTopTabNavigator.tsx b/packages/tabs/src/navigators/createMaterialTopTabNavigator.tsx index 63c838c3..2d51e445 100644 --- a/packages/tabs/src/navigators/createMaterialTopTabNavigator.tsx +++ b/packages/tabs/src/navigators/createMaterialTopTabNavigator.tsx @@ -17,13 +17,11 @@ type Route = { routeName: string; }; -type Props = NavigationViewProps & { +type Config = { keyboardDismissMode?: 'none' | 'on-drag'; swipeEnabled?: boolean; swipeDistanceThreshold?: number; swipeVelocityThreshold?: number; - onSwipeStart?: () => void; - onSwipeEnd?: () => void; initialLayout?: { width?: number; height?: number }; lazy?: boolean; lazyPlaceholderComponent?: React.ComponentType<{ route: Route }>; @@ -32,11 +30,17 @@ type Props = NavigationViewProps & { tabBarPosition?: 'top' | 'bottom'; sceneContainerStyle?: StyleProp; style?: StyleProp; - navigation: NavigationTabProp; - descriptors: SceneDescriptorMap; - screenProps?: unknown; }; +type Props = NavigationViewProps & + Config & { + onSwipeStart?: () => void; + onSwipeEnd?: () => void; + navigation: NavigationTabProp; + descriptors: SceneDescriptorMap; + screenProps?: unknown; + }; + class MaterialTabView extends React.PureComponent { _renderLazyPlaceholder = (props: { route: Route }) => { const { lazyPlaceholderComponent: LazyPlaceholder } = this.props; @@ -140,6 +144,6 @@ class MaterialTabView extends React.PureComponent { } } -export default createTabNavigator( +export default createTabNavigator( MaterialTabView ); diff --git a/packages/tabs/src/utils/createTabNavigator.tsx b/packages/tabs/src/utils/createTabNavigator.tsx index c8764a28..4d63cd6d 100644 --- a/packages/tabs/src/utils/createTabNavigator.tsx +++ b/packages/tabs/src/utils/createTabNavigator.tsx @@ -27,8 +27,8 @@ type CommonProps = { screenProps?: unknown; }; -type ExtraProps = { - navigationConfig: any; +type ExtraProps = { + navigationConfig: Config; }; export type RenderIconProps = { @@ -52,23 +52,22 @@ export type NavigationViewProps = { }; export default function createTabNavigator< + Config extends {}, Options extends NavigationCommonTabOptions, Props extends NavigationViewProps & CommonProps >( - TabView: React.ComponentType + TabView: React.ComponentType ): ( routes: RouteConfig, config?: CreateNavigatorConfig< - {}, + Partial, NavigationTabRouterConfig, Partial, NavigationTabProp > -) => React.ComponentType< - Pick> & ExtraProps -> { +) => React.ComponentType<{}> { class NavigationView extends React.Component< - Pick> & ExtraProps + Exclude & ExtraProps > { _renderScene = ({ route }: { route: { key: string } }) => { const { screenProps, descriptors } = this.props; @@ -232,14 +231,13 @@ export default function createTabNavigator< const { state } = navigation; const route = state.routes[state.index]; const descriptor = descriptors[route.key]; - const options = { - ...navigationConfig, - ...descriptor.options, - }; return ( + // TODO: don't have time to fix it right now + // @ts-ignore , config: CreateNavigatorConfig< - {}, + Partial, NavigationTabRouterConfig, Partial, NavigationTabProp