fix: fix typescript definitions (#214)

packages/stack/src/index.tsx

@@ -31,3 +31,13 @@ export { CardStyleInterpolators, HeaderStyleInterpolators, TransitionPresets };
  */
 
 export { default as StackGestureContext } from './utils/StackGestureContext';
+
+/**
+ * Types
+ */
+export {
+  NavigationStackState,
+  NavigationStackProp,
+  NavigationStackOptions,
+  NavigationStackConfig,
+} from './types';

packages/stack/src/navigators/__tests__/NestedNavigator.test.tsx

@@ -17,7 +17,7 @@ const NavNestedDirect = StackNavigator({
 
 const NavNestedIndirect = StackNavigator({
   Sub: {
-    screen: props => <SubNavigator {...props} />,
+    screen: (props: any) => <SubNavigator {...props} />,
   },
 });
 

packages/stack/src/navigators/__tests__/StackNavigator.test.tsx

@@ -10,7 +10,7 @@ import createAppContainer, {
   _TESTING_ONLY_reset_container_count,
   // @ts-ignore
 } from '@react-navigation/native/src/createAppContainer';
-import { NavigationProp } from '../../types';
+import { NavigationStackProp } from '../../types';
 
 const NavigationTestUtils = {
   resetInternalState: _TESTING_ONLY_reset_container_count,
@@ -26,7 +26,7 @@ class HomeScreen extends Component {
   static navigationOptions = ({
     navigation,
   }: {
-    navigation: NavigationProp;
+    navigation: NavigationStackProp;
   }) => ({
     title: `Welcome ${
       navigation.state.params ? navigation.state.params.user : 'anonymous'
@@ -78,8 +78,8 @@ describe('StackNavigator', () => {
     const spy = jest.fn();
 
     class TestComponent extends React.Component<{
-      onPress: (navigation: NavigationProp) => undefined;
-      navigation: NavigationProp;
+      onPress: (navigation: NavigationStackProp) => undefined;
+      navigation: NavigationStackProp;
     }> {
       render() {
         return <View>{this.props.onPress(this.props.navigation)}</View>;

packages/stack/src/navigators/createStackNavigator.tsx

@@ -1,29 +1,30 @@
 import * as React from 'react';
-import { StackRouter, createNavigator } from 'react-navigation';
+import {
+  StackRouter,
+  createNavigator,
+  NavigationRouteConfigMap,
+  NavigationStackRouterConfig,
+  CreateNavigatorConfig,
+} from 'react-navigation';
 import { Platform } from 'react-native';
 import StackView from '../views/Stack/StackView';
 import {
   NavigationStackConfig,
   NavigationStackOptions,
-  NavigationProp,
-  Screen,
+  NavigationStackProp,
 } from '../types';
 import KeyboardManager from '../views/KeyboardManager';
 
 function createStackNavigator(
-  routeConfigMap: {
-    [key: string]:
-      | Screen
-      | ({ screen: Screen } | { getScreen(): Screen }) & {
-          path?: string;
-          navigationOptions?:
-            | NavigationStackOptions
-            | ((options: {
-                navigation: NavigationProp;
-              }) => NavigationStackOptions);
-        };
-  },
-  stackConfig: NavigationStackConfig = {}
+  routeConfigMap: NavigationRouteConfigMap<
+    NavigationStackOptions,
+    NavigationStackProp
+  >,
+  stackConfig: CreateNavigatorConfig<
+    NavigationStackConfig,
+    NavigationStackRouterConfig,
+    NavigationStackOptions
+  > = {}
 ) {
   const router = StackRouter(routeConfigMap, stackConfig);
 

packages/stack/src/types.tsx

@@ -5,44 +5,47 @@ import {
   LayoutChangeEvent,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import {
+  NavigationRoute,
+  NavigationState,
+  NavigationScreenProp,
+  NavigationParams,
+  NavigationNavigateAction,
+  NavigationAction,
+  NavigationEventCallback,
+  NavigationEventSubscription,
+  NavigationDescriptor,
+} from 'react-navigation';
 
-export type Route = {
-  key: string;
-  routeName: string;
-};
-
-export type NavigationEventName =
+export type NavigationStackEventName =
   | 'willFocus'
   | 'didFocus'
   | 'willBlur'
   | 'didBlur';
 
-export type NavigationState = {
-  key: string;
-  index: number;
-  routes: Route[];
-  transitions: {
-    pushing: string[];
-    popping: string[];
-  };
-  params?: { [key: string]: unknown };
-};
+export type NavigationStackState = NavigationState;
 
-export type NavigationProp<RouteName = string, Params = object> = {
-  navigate(routeName: RouteName): void;
-  goBack(): void;
-  goBack(key: string | null): void;
+export type NavigationStackProp<
+  State = NavigationRoute,
+  Params = NavigationParams
+> = NavigationScreenProp<State, Params> & {
+  push: (
+    routeName: string,
+    params?: NavigationParams,
+    action?: NavigationNavigateAction
+  ) => boolean;
+  replace: (
+    routeName: string,
+    params?: NavigationParams,
+    action?: NavigationNavigateAction
+  ) => boolean;
+  reset: (actions: NavigationAction[], index: number) => boolean;
+  pop: (n?: number, params?: { immediate?: boolean }) => boolean;
+  popToTop: (params?: { immediate?: boolean }) => boolean;
   addListener: (
-    event: NavigationEventName,
-    callback: () => void
-  ) => { remove: () => void };
-  isFocused(): boolean;
-  state: NavigationState;
-  setParams(params: Params): void;
-  getParam(): Params;
-  dispatch(action: { type: string }): boolean;
-  isFirstRouteInParent(): boolean;
-  dangerouslyGetParent(): NavigationProp | undefined;
+    event: NavigationStackEventName,
+    callback: NavigationEventCallback
+  ) => NavigationEventSubscription;
 };
 
 export type Layout = { width: number; height: number };
@@ -51,9 +54,9 @@ export type GestureDirection = 'horizontal' | 'vertical' | 'vertical-inverted';
 
 export type HeaderMode = 'float' | 'screen' | 'none';
 
-export type HeaderScene<T> = {
+export type HeaderScene<T = NavigationRoute> = {
   route: T;
-  descriptor: SceneDescriptor;
+  descriptor: NavigationDescriptor<NavigationParams, NavigationStackOptions>;
   progress: {
     current: Animated.Node<number>;
     next?: Animated.Node<number>;
@@ -89,9 +92,9 @@ export type HeaderOptions = {
 export type HeaderProps = {
   mode: 'float' | 'screen';
   layout: Layout;
-  scene: HeaderScene<Route>;
-  previous?: HeaderScene<Route>;
-  navigation: NavigationProp;
+  scene: HeaderScene;
+  previous?: HeaderScene;
+  navigation: NavigationStackProp;
   styleInterpolator: HeaderStyleInterpolator;
 };
 
@@ -123,15 +126,16 @@ export type NavigationStackConfig = {
   disableKeyboardHandling?: boolean;
 };
 
-export type SceneDescriptor = {
-  key: string;
-  options: NavigationStackOptions;
-  navigation: NavigationProp;
-  getComponent(): React.ComponentType;
+export type SceneDescriptorMap = {
+  [key: string]:
+    | NavigationDescriptor<
+        NavigationParams,
+        NavigationStackOptions,
+        NavigationStackProp
+      >
+    | undefined;
 };
 
-export type SceneDescriptorMap = { [key: string]: SceneDescriptor | undefined };
-
 export type HeaderBackButtonProps = {
   disabled?: boolean;
   onPress?: () => void;
@@ -156,12 +160,6 @@ export type HeaderTitleProps = {
   style?: StyleProp<TextStyle>;
 };
 
-export type Screen = React.ComponentType<any> & {
-  navigationOptions?: NavigationStackOptions & {
-    [key: string]: any;
-  };
-};
-
 export type SpringConfig = {
   damping: number;
   mass: number;

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { NavigationRoute } from 'react-navigation';
 import {
   Layout,
-  Route,
   HeaderScene,
-  NavigationProp,
+  NavigationStackProp,
   HeaderStyleInterpolator,
 } from '../../types';
 import Header from './Header';
@@ -13,10 +13,15 @@ import { forStatic } from '../../TransitionConfigs/HeaderStyleInterpolators';
 export type Props = {
   mode: 'float' | 'screen';
   layout: Layout;
-  scenes: Array<HeaderScene<Route> | undefined>;
-  navigation: NavigationProp;
-  getPreviousRoute: (props: { route: Route }) => Route | undefined;
-  onContentHeightChange?: (props: { route: Route; height: number }) => void;
+  scenes: Array<HeaderScene | undefined>;
+  navigation: NavigationStackProp;
+  getPreviousRoute: (props: {
+    route: NavigationRoute;
+  }) => NavigationRoute | undefined;
+  onContentHeightChange?: (props: {
+    route: NavigationRoute;
+    height: number;
+  }) => void;
   styleInterpolator: HeaderStyleInterpolator;
   style?: StyleProp<ViewStyle>;
 };
@@ -78,7 +83,7 @@ export default function HeaderContainer({
           layout,
           scene,
           previous,
-          navigation: scene.descriptor.navigation,
+          navigation: scene.descriptor.navigation as NavigationStackProp,
           styleInterpolator: isHeaderStatic ? forStatic : styleInterpolator,
         };
 

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -14,7 +14,6 @@ import memoize from '../../utils/memoize';
 import {
   Layout,
   HeaderStyleInterpolator,
-  Route,
   HeaderBackButtonProps,
   HeaderTitleProps,
   HeaderOptions,
@@ -32,7 +31,7 @@ type Props = HeaderOptions & {
   onGoBack?: () => void;
   title?: string;
   leftLabel?: string;
-  scene: HeaderScene<Route>;
+  scene: HeaderScene;
   styleInterpolator: HeaderStyleInterpolator;
 };
 

packages/stack/src/views/Stack/Stack.tsx

@@ -7,6 +7,7 @@ import {
   Platform,
   ViewProps,
 } from 'react-native';
+import { NavigationRoute } from 'react-navigation';
 import Animated from 'react-native-reanimated';
 import * as Screens from 'react-native-screens'; // Import with * as to prevent getters being called
 import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
@@ -18,10 +19,9 @@ import {
 } from '../../TransitionConfigs/TransitionPresets';
 import { forNoAnimation } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import {
-  Route,
   Layout,
   HeaderMode,
-  NavigationProp,
+  NavigationStackProp,
   HeaderScene,
   SceneDescriptorMap,
   NavigationStackOptions,
@@ -33,18 +33,20 @@ type ProgressValues = {
 
 type Props = {
   mode: 'card' | 'modal';
-  navigation: NavigationProp;
+  navigation: NavigationStackProp;
   descriptors: SceneDescriptorMap;
-  routes: Route[];
+  routes: NavigationRoute[];
   openingRoutes: string[];
   closingRoutes: string[];
-  onGoBack: (props: { route: Route }) => void;
-  onOpenRoute: (props: { route: Route }) => void;
-  onCloseRoute: (props: { route: Route }) => void;
-  getPreviousRoute: (props: { route: Route }) => Route | undefined;
-  getGesturesEnabled: (props: { route: Route }) => boolean;
+  onGoBack: (props: { route: NavigationRoute }) => void;
+  onOpenRoute: (props: { route: NavigationRoute }) => void;
+  onCloseRoute: (props: { route: NavigationRoute }) => void;
+  getPreviousRoute: (props: {
+    route: NavigationRoute;
+  }) => NavigationRoute | undefined;
+  getGesturesEnabled: (props: { route: NavigationRoute }) => boolean;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  renderScene: (props: { route: Route }) => React.ReactNode;
+  renderScene: (props: { route: NavigationRoute }) => React.ReactNode;
   headerMode: HeaderMode;
   onPageChangeStart?: () => void;
   onPageChangeConfirm?: () => void;
@@ -52,9 +54,9 @@ type Props = {
 };
 
 type State = {
-  routes: Route[];
+  routes: NavigationRoute[];
   descriptors: SceneDescriptorMap;
-  scenes: HeaderScene<Route>[];
+  scenes: HeaderScene<NavigationRoute>[];
   progress: ProgressValues;
   layout: Layout;
   floatingHeaderHeights: { [key: string]: number };
@@ -105,7 +107,7 @@ const { cond, eq } = Animated;
 const ANIMATED_ONE = new Animated.Value(1);
 
 const getFloatingHeaderHeights = (
-  routes: Route[],
+  routes: NavigationRoute[],
   layout: Layout,
   previous: { [key: string]: number }
 ) => {
@@ -237,7 +239,7 @@ export default class Stack extends React.Component<Props, State> {
     route,
     height,
   }: {
-    route: Route;
+    route: NavigationRoute;
     height: number;
   }) => {
     const previousHeight = this.state.floatingHeaderHeights[route.key];
@@ -255,7 +257,7 @@ export default class Stack extends React.Component<Props, State> {
   };
 
   private handleTransitionStart = (
-    { route }: { route: Route },
+    { route }: { route: NavigationRoute },
     closing: boolean
   ) => {
     const { descriptors } = this.props;
@@ -267,7 +269,7 @@ export default class Stack extends React.Component<Props, State> {
   };
 
   private handleTransitionEnd = (
-    { route }: { route: Route },
+    { route }: { route: NavigationRoute },
     closing: boolean
   ) => {
     const descriptor = this.props.descriptors[route.key];

packages/stack/src/views/Stack/StackItem.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { NavigationRoute } from 'react-navigation';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import {
-  Route,
   HeaderScene,
   Layout,
   HeaderMode,
-  NavigationProp,
+  NavigationStackProp,
   TransitionPreset,
 } from '../../types';
 
@@ -19,22 +19,30 @@ type Props = TransitionPreset & {
   closing: boolean;
   layout: Layout;
   current: Animated.Value<number>;
-  previousScene?: HeaderScene<Route>;
-  scene: HeaderScene<Route>;
-  navigation: NavigationProp;
+  previousScene?: HeaderScene;
+  scene: HeaderScene;
+  navigation: NavigationStackProp;
   cardTransparent?: boolean;
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;
   cardStyle?: StyleProp<ViewStyle>;
   gestureEnabled?: boolean;
-  getPreviousRoute: (props: { route: Route }) => Route | undefined;
+  getPreviousRoute: (props: {
+    route: NavigationRoute;
+  }) => NavigationRoute | undefined;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  renderScene: (props: { route: Route }) => React.ReactNode;
-  onOpenRoute: (props: { route: Route }) => void;
-  onCloseRoute: (props: { route: Route }) => void;
-  onGoBack: (props: { route: Route }) => void;
-  onTransitionStart?: (props: { route: Route }, closing: boolean) => void;
-  onTransitionEnd?: (props: { route: Route }, closing: boolean) => void;
+  renderScene: (props: { route: NavigationRoute }) => React.ReactNode;
+  onOpenRoute: (props: { route: NavigationRoute }) => void;
+  onCloseRoute: (props: { route: NavigationRoute }) => void;
+  onGoBack: (props: { route: NavigationRoute }) => void;
+  onTransitionStart?: (
+    props: { route: NavigationRoute },
+    closing: boolean
+  ) => void;
+  onTransitionEnd?: (
+    props: { route: NavigationRoute },
+    closing: boolean
+  ) => void;
   onPageChangeStart?: () => void;
   onPageChangeConfirm?: () => void;
   onPageChangeCancel?: () => void;

packages/stack/src/views/Stack/StackView.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-import { SceneView, StackActions } from 'react-navigation';
+import { SceneView, StackActions, NavigationRoute } from 'react-navigation';
 import Stack from './Stack';
 import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
 import {
-  NavigationProp,
+  NavigationStackProp,
   NavigationStackConfig,
-  Route,
   SceneDescriptorMap,
 } from '../../types';
 
 type Props = {
-  navigation: NavigationProp;
+  navigation: NavigationStackProp;
   descriptors: SceneDescriptorMap;
   navigationConfig: NavigationStackConfig;
   onPageChangeStart?: () => void;
@@ -24,7 +23,7 @@ type Props = {
 
 type State = {
   // Local copy of the routes which are actually rendered
-  routes: Route[];
+  routes: NavigationRoute[];
   // List of routes being opened, we need to animate pushing of these new routes
   opening: string[];
   // List of routes being closed, we need to animate popping of these routes
@@ -85,7 +84,7 @@ class StackView extends React.Component<Props, State> {
       // We only need to animate routes if the focused route changed
       // Animating previous routes won't be visible coz the focused route is on top of everything
 
-      const isAnimationEnabled = (route: Route) => {
+      const isAnimationEnabled = (route: NavigationRoute) => {
         const descriptor =
           props.descriptors[route.key] || state.descriptors[route.key];
 
@@ -175,7 +174,7 @@ class StackView extends React.Component<Props, State> {
     descriptors: {},
   };
 
-  private getGesturesEnabled = ({ route }: { route: Route }) => {
+  private getGesturesEnabled = ({ route }: { route: NavigationRoute }) => {
     const descriptor = this.state.descriptors[route.key];
 
     if (descriptor) {
@@ -195,7 +194,7 @@ class StackView extends React.Component<Props, State> {
     return false;
   };
 
-  private getPreviousRoute = ({ route }: { route: Route }) => {
+  private getPreviousRoute = ({ route }: { route: NavigationRoute }) => {
     const { closing, replacing } = this.state;
     const routes = this.state.routes.filter(
       r =>
@@ -207,7 +206,7 @@ class StackView extends React.Component<Props, State> {
     return routes[index - 1];
   };
 
-  private renderScene = ({ route }: { route: Route }) => {
+  private renderScene = ({ route }: { route: NavigationRoute }) => {
     const descriptor =
       this.state.descriptors[route.key] || this.props.descriptors[route.key];
 
@@ -236,14 +235,14 @@ class StackView extends React.Component<Props, State> {
     this.props.navigation.dispatch(StackActions.completeTransition());
   };
 
-  private handleGoBack = ({ route }: { route: Route }) => {
+  private handleGoBack = ({ route }: { route: NavigationRoute }) => {
     // This event will trigger when a gesture ends
     // We need to perform the transition before removing the route completely
     // @ts-ignore
     this.props.navigation.dispatch(StackActions.pop({ key: route.key }));
   };
 
-  private handleOpenRoute = ({ route }: { route: Route }) => {
+  private handleOpenRoute = ({ route }: { route: NavigationRoute }) => {
     this.handleTransitionComplete();
     this.setState(state => ({
       routes: state.replacing.length
@@ -255,7 +254,7 @@ class StackView extends React.Component<Props, State> {
     }));
   };
 
-  private handleCloseRoute = ({ route }: { route: Route }) => {
+  private handleCloseRoute = ({ route }: { route: NavigationRoute }) => {
     this.handleTransitionComplete();
 
     // This event will trigger when the animation for closing the route ends