fix: fix typescript definitions. closes #163

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' },
+    },
+  }
+);

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<any>;
   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<NavigationBottomTabOptions, Props>(
+export default createTabNavigator<Config, NavigationBottomTabOptions, Props>(
   TabNavigationView
 );

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<ViewStyle>;
   style?: StyleProp<ViewStyle>;
-  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<Props> {
   _renderLazyPlaceholder = (props: { route: Route }) => {
     const { lazyPlaceholderComponent: LazyPlaceholder } = this.props;
@@ -140,6 +144,6 @@ class MaterialTabView extends React.PureComponent<Props> {
   }
 }
 
-export default createTabNavigator<NavigationMaterialTabOptions, Props>(
+export default createTabNavigator<Config, NavigationMaterialTabOptions, Props>(
   MaterialTabView
 );

packages/tabs/src/utils/createTabNavigator.tsx

@@ -27,8 +27,8 @@ type CommonProps = {
   screenProps?: unknown;
 };
 
-type ExtraProps = {
-  navigationConfig: any;
+type ExtraProps<Config extends {}> = {
+  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<Props>
+  TabView: React.ComponentType<Props & Config & Options>
 ): (
   routes: RouteConfig<Options>,
   config?: CreateNavigatorConfig<
-    {},
+    Partial<Config>,
     NavigationTabRouterConfig,
     Partial<Options>,
     NavigationTabProp<NavigationRoute, any>
   >
-) => React.ComponentType<
-  Pick<Props, Exclude<keyof Props, keyof NavigationViewProps>> & ExtraProps
-> {
+) => React.ComponentType<{}> {
   class NavigationView extends React.Component<
-    Pick<Props, Exclude<keyof Props, keyof NavigationViewProps>> & ExtraProps
+    Exclude<Props, NavigationViewProps> & ExtraProps<Config>
   > {
     _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
         <TabView
-          {...options}
+          {...navigationConfig}
+          {...descriptor.options}
           getLabelText={this._getLabelText}
           getAccessibilityLabel={this._getAccessibilityLabel}
           getTestID={this._getTestID}
@@ -259,7 +257,7 @@ export default function createTabNavigator<
   return (
     routes: RouteConfig<Options>,
     config: CreateNavigatorConfig<
-      {},
+      Partial<Config>,
       NavigationTabRouterConfig,
       Partial<Options>,
       NavigationTabProp<NavigationRoute, any>