fix: fix typescript definitions (#165)

Author: satya164

example/package.json

@@ -14,7 +14,7 @@
     "expo-asset": "^6.0.0",
     "expo-constants": "~5.0.1",
     "react": "16.8.3",
-    "react-navigation": "^4.0.1",
+    "react-navigation": "^4.0.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "react-native-safe-area-view": "0.13.1",
     "react-native-screens": "1.0.0-alpha.22",

example/yarn.lock

@@ -4594,10 +4594,10 @@ react-navigation-stack@1.5.3:
   dependencies:
     prop-types "^15.7.2"
 
-react-navigation@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.1.tgz#96c17ac90afcf0a5bc957358152326211a79d183"
-  integrity sha512-6XzuqvhOnY6FA6tCErD6+vfZdnP+O/7hCQper9qDulxxW2ZVkCF4xWdzoVcv3DDR6P5CK6l1tcbJ1ku256AdFQ==
+react-navigation@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724"
+  integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA==
   dependencies:
     "@react-navigation/core" "^3.5.0"
     "@react-navigation/native" "^3.6.2"

package.json

@@ -14,7 +14,7 @@
     "test": "jest",
     "typescript": "tsc --noEmit",
     "lint": "eslint --ext .js,.ts,.tsx .",
-    "bootstrap": "yarn && yarn --cwd example",
+    "bootstrap": "yarn --cwd example && yarn",
     "example": "yarn --cwd example",
     "release": "yarn release-it",
     "prepare": "bob build"
@@ -74,14 +74,14 @@
     "react-native": "~0.57.1",
     "react-native-gesture-handler": "^1.4.1",
     "react-native-reanimated": "^1.2.0",
-    "react-navigation": "^4.0.1",
+    "react-navigation": "^4.0.3",
     "react-test-renderer": "16.5.0",
     "release-it": "^10.3.1",
     "typescript": "^3.5.2"
   },
   "peerDependencies": {
     "react": "*",
-    "react-navigation": "^4.0.1",
+    "react-navigation": "^4.0.3",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0-alpha",

src/index.tsx

@@ -18,3 +18,14 @@ export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
  * Utils
  */
 export { default as createTabNavigator } from './utils/createTabNavigator';
+
+/**
+ * Types
+ */
+
+export {
+  NavigationTabState,
+  NavigationTabProp,
+  NavigationBottomTabOptions,
+  NavigationMaterialTabOptions,
+} from './types';

src/navigators/createBottomTabNavigator.tsx

@@ -5,6 +5,7 @@ import {
   AccessibilityRole,
   AccessibilityState,
 } from 'react-native';
+import { NavigationRoute } from 'react-navigation';
 
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
@@ -15,26 +16,25 @@ import createTabNavigator, {
 import BottomTabBar from '../views/BottomTabBar';
 import ResourceSavingScene from '../views/ResourceSavingScene';
 import {
-  NavigationProp,
-  Route,
-  SceneDescriptor,
+  NavigationTabProp,
   NavigationBottomTabOptions,
   BottomTabBarOptions,
+  SceneDescriptorMap,
 } from '../types';
 
 type Props = NavigationViewProps & {
   getAccessibilityRole: (props: {
-    route: Route;
+    route: NavigationRoute;
   }) => AccessibilityRole | undefined;
   getAccessibilityStates: (props: {
-    route: Route;
+    route: NavigationRoute;
     focused: boolean;
   }) => AccessibilityState[];
   lazy?: boolean;
   tabBarComponent?: React.ComponentType<any>;
   tabBarOptions?: BottomTabBarOptions;
-  navigation: NavigationProp;
-  descriptors: { [key: string]: SceneDescriptor<NavigationBottomTabOptions> };
+  navigation: NavigationTabProp;
+  descriptors: SceneDescriptorMap;
   screenProps?: unknown;
 };
 
@@ -68,7 +68,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
     loaded: [this.props.navigation.state.index],
   };
 
-  _getButtonComponent = ({ route }: { route: Route }) => {
+  _getButtonComponent = ({ route }: { route: NavigationRoute }) => {
     const { descriptors } = this.props;
     const descriptor = descriptors[route.key];
     const options = descriptor.options;

src/navigators/createMaterialTopTabNavigator.tsx

@@ -6,10 +6,10 @@ import createTabNavigator, {
 } from '../utils/createTabNavigator';
 import MaterialTopTabBar from '../views/MaterialTopTabBar';
 import {
-  NavigationProp,
-  SceneDescriptor,
+  NavigationTabProp,
   NavigationMaterialTabOptions,
   MaterialTabBarOptions,
+  SceneDescriptorMap,
 } from '../types';
 
 type Route = {
@@ -32,8 +32,8 @@ type Props = NavigationViewProps & {
   tabBarPosition?: 'top' | 'bottom';
   sceneContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
-  navigation: NavigationProp;
-  descriptors: { [key: string]: SceneDescriptor<NavigationMaterialTabOptions> };
+  navigation: NavigationTabProp;
+  descriptors: SceneDescriptorMap;
   screenProps?: unknown;
 };
 
@@ -119,9 +119,10 @@ class MaterialTabView extends React.PureComponent<Props> {
     const options = descriptor.options;
 
     let swipeEnabled =
+      // @ts-ignore
       options.swipeEnabled == null
         ? this.props.swipeEnabled
-        : options.swipeEnabled;
+        : (options as any).swipeEnabled;
 
     if (typeof swipeEnabled === 'function') {
       swipeEnabled = swipeEnabled(state);

src/types.tsx

@@ -8,41 +8,21 @@ import {
 } from 'react-native';
 import SafeAreaView from 'react-native-safe-area-view';
 import Animated from 'react-native-reanimated';
-
-export type Route = {
-  key: string;
-  routeName: string;
-} & (NavigationState | undefined);
-
-export type NavigationEventName =
-  | 'willFocus'
-  | 'didFocus'
-  | 'willBlur'
-  | 'didBlur';
-
-export type NavigationState = {
-  key: string;
-  index: number;
-  routes: Route[];
-  isTransitioning?: boolean;
-  params?: { [key: string]: unknown };
-};
-
-export type NavigationProp<RouteName = string, Params = object> = {
-  emit(eventName: string): void;
-  navigate(routeName: RouteName): void;
-  goBack(): void;
-  goBack(key: string | null): void;
-  addListener: (
-    event: NavigationEventName,
-    callback: () => void
-  ) => { remove: () => void };
-  isFocused(): boolean;
-  state: NavigationState;
-  setParams(params: Params): void;
-  getParam(): Params;
-  dispatch(action: { type: string }): boolean;
-  dangerouslyGetParent(): NavigationProp | undefined;
+import {
+  NavigationRoute,
+  NavigationState,
+  NavigationScreenProp,
+  NavigationParams,
+  NavigationDescriptor,
+} from 'react-navigation';
+
+export type NavigationTabState = NavigationState;
+
+export type NavigationTabProp<
+  State = NavigationRoute,
+  Params = NavigationParams
+> = NavigationScreenProp<State, Params> & {
+  jumpTo(routeName: string, key?: string): void;
 };
 
 export type ThemedColor =
@@ -75,22 +55,24 @@ export type BottomTabBarOptions = {
 };
 
 export type BottomTabBarProps = BottomTabBarOptions & {
-  navigation: NavigationProp;
-  onTabPress: (props: { route: Route }) => void;
-  onTabLongPress: (props: { route: Route }) => void;
-  getAccessibilityLabel: (props: { route: Route }) => string | undefined;
+  navigation: NavigationTabProp;
+  onTabPress: (props: { route: NavigationRoute }) => void;
+  onTabLongPress: (props: { route: NavigationRoute }) => void;
+  getAccessibilityLabel: (props: {
+    route: NavigationRoute;
+  }) => string | undefined;
   getAccessibilityRole: (props: {
-    route: Route;
+    route: NavigationRoute;
   }) => AccessibilityRole | undefined;
   getAccessibilityStates: (props: {
-    route: Route;
+    route: NavigationRoute;
     focused: boolean;
   }) => AccessibilityState[];
   getButtonComponent: (props: {
-    route: Route;
+    route: NavigationRoute;
   }) => React.ComponentType<any> | undefined;
   getLabelText: (props: {
-    route: Route;
+    route: NavigationRoute;
   }) =>
     | ((scene: {
         focused: boolean;
@@ -99,9 +81,9 @@ export type BottomTabBarProps = BottomTabBarOptions & {
       }) => string | undefined)
     | string
     | undefined;
-  getTestID: (props: { route: Route }) => string | undefined;
+  getTestID: (props: { route: NavigationRoute }) => string | undefined;
   renderIcon: (props: {
-    route: Route;
+    route: NavigationRoute;
     focused: boolean;
     tintColor?: string;
     horizontal?: boolean;
@@ -140,26 +122,28 @@ export type MaterialTabBarProps = MaterialTabBarOptions & {
   position: Animated.Node<number>;
   jumpTo: (key: string) => void;
   getLabelText: (scene: {
-    route: Route;
+    route: NavigationRoute;
   }) =>
     | ((scene: { focused: boolean; tintColor: string }) => string | undefined)
     | string
     | undefined;
-  getAccessible?: (scene: { route: Route }) => boolean | undefined;
-  getAccessibilityLabel: (scene: { route: Route }) => string | undefined;
-  getTestID: (scene: { route: Route }) => string | undefined;
+  getAccessible?: (scene: { route: NavigationRoute }) => boolean | undefined;
+  getAccessibilityLabel: (scene: {
+    route: NavigationRoute;
+  }) => string | undefined;
+  getTestID: (scene: { route: NavigationRoute }) => string | undefined;
   renderIcon: (scene: {
-    route: Route;
+    route: NavigationRoute;
     focused: boolean;
     tintColor: string;
     horizontal?: boolean;
   }) => React.ReactNode;
-  renderBadge?: (scene: { route: Route }) => React.ReactNode;
-  onTabPress?: (scene: { route: Route }) => void;
-  onTabLongPress?: (scene: { route: Route }) => void;
+  renderBadge?: (scene: { route: NavigationRoute }) => React.ReactNode;
+  onTabPress?: (scene: { route: NavigationRoute }) => void;
+  onTabLongPress?: (scene: { route: NavigationRoute }) => void;
   tabBarPosition?: 'top' | 'bottom';
   screenProps: unknown;
-  navigation: NavigationProp;
+  navigation: NavigationTabProp;
 };
 
 export type NavigationCommonTabOptions = {
@@ -176,11 +160,11 @@ export type NavigationCommonTabOptions = {
         horizontal?: boolean;
       }) => React.ReactNode);
   tabBarOnPress?: (props: {
-    navigation: NavigationProp;
+    navigation: NavigationTabProp;
     defaultHandler: () => void;
   }) => void;
   tabBarOnLongPress?: (props: {
-    navigation: NavigationProp;
+    navigation: NavigationTabProp;
     defaultHandler: () => void;
   }) => void;
 };
@@ -194,17 +178,10 @@ export type NavigationMaterialTabOptions = NavigationCommonTabOptions & {
   swipeEnabled?: boolean | ((state: NavigationState) => boolean);
 };
 
-export type SceneDescriptor<Options extends NavigationCommonTabOptions> = {
-  key: string;
-  options: Options;
-  navigation: NavigationProp;
-  getComponent(): React.ComponentType;
-};
-
-export type Screen<
-  Options extends NavigationCommonTabOptions
-> = React.ComponentType<any> & {
-  navigationOptions?: Options & {
-    [key: string]: any;
-  };
+export type SceneDescriptorMap = {
+  [key: string]: NavigationDescriptor<
+    NavigationParams,
+    NavigationBottomTabOptions | NavigationMaterialTabOptions,
+    NavigationTabProp
+  >;
 };