add listener types (#861)

* add-listener-types

* Fix lint errors Stack.tsx

* Update withLayoutContext.tsx to fix lint errors

* Update useScreens.tsx to fix lint errors

---------

Co-authored-by: Mark Lawlor <[email protected]>

Author: muneebahmedayub

packages/expo-router/src/layouts/Drawer.tsx

@@ -1,15 +1,19 @@
 import {
   createDrawerNavigator,
+  DrawerNavigationEventMap,
   DrawerNavigationOptions,
 } from "@react-navigation/drawer";
+import { DrawerNavigationState, ParamListBase } from "@react-navigation/native";
 
 import { withLayoutContext } from "./withLayoutContext";
 
 const DrawerNavigator = createDrawerNavigator().Navigator;
 
 export const Drawer = withLayoutContext<
   DrawerNavigationOptions,
-  typeof DrawerNavigator
+  typeof DrawerNavigator,
+  DrawerNavigationState<ParamListBase>,
+  DrawerNavigationEventMap
 >(DrawerNavigator);
 
 export default Drawer;

packages/expo-router/src/layouts/Stack.tsx

@@ -1,5 +1,7 @@
+import { ParamListBase, StackNavigationState } from "@react-navigation/native";
 import {
   createNativeStackNavigator,
+  NativeStackNavigationEventMap,
   NativeStackNavigationOptions,
 } from "@react-navigation/native-stack";
 
@@ -9,7 +11,9 @@ const NativeStackNavigator = createNativeStackNavigator().Navigator;
 
 export const Stack = withLayoutContext<
   NativeStackNavigationOptions,
-  typeof NativeStackNavigator
+  typeof NativeStackNavigator,
+  StackNavigationState<ParamListBase>,
+  NativeStackNavigationEventMap
 >(NativeStackNavigator);
 
 export default Stack;

packages/expo-router/src/layouts/Tabs.tsx

@@ -1,8 +1,10 @@
 import { Pressable } from "@bacons/react-views";
 import {
   BottomTabNavigationOptions,
+  BottomTabNavigationEventMap,
   createBottomTabNavigator,
 } from "@react-navigation/bottom-tabs";
+import { TabNavigationState, ParamListBase } from "@react-navigation/native";
 import React from "react";
 import { Platform } from "react-native";
 
@@ -15,7 +17,9 @@ const BottomTabNavigator = createBottomTabNavigator().Navigator;
 
 export const Tabs = withLayoutContext<
   BottomTabNavigationOptions & { href?: Href | null },
-  typeof BottomTabNavigator
+  typeof BottomTabNavigator,
+  TabNavigationState<ParamListBase>,
+  BottomTabNavigationEventMap
 >(BottomTabNavigator, (screens) => {
   // Support the `href` shortcut prop.
   return screens.map((screen) => {

packages/expo-router/src/layouts/withLayoutContext.tsx

@@ -1,3 +1,4 @@
+import { EventMapBase, NavigationState } from "@react-navigation/native";
 import React from "react";
 
 import { useContextKey } from "../Route";
@@ -67,15 +68,19 @@ export function useFilterScreenChildren(
 /** Return a navigator that automatically injects matched routes and renders nothing when there are no children. Return type with children prop optional */
 export function withLayoutContext<
   TOptions extends object,
-  T extends React.ComponentType<any>
+  T extends React.ComponentType<any>,
+  State extends NavigationState,
+  EventMap extends EventMapBase
 >(
   Nav: T,
-  processor?: (options: ScreenProps<TOptions>[]) => ScreenProps<TOptions>[]
+  processor?: (
+    options: ScreenProps<TOptions, State, EventMap>[]
+  ) => ScreenProps<TOptions, State, EventMap>[]
 ): React.ForwardRefExoticComponent<
   React.PropsWithoutRef<PickPartial<React.ComponentProps<T>, "children">> &
     React.RefAttributes<unknown>
 > & {
-  Screen: (props: ScreenProps<TOptions>) => null;
+  Screen: (props: ScreenProps<TOptions, State, EventMap>) => null;
 } {
   const Navigator = React.forwardRef(
     (

packages/expo-router/src/useScreens.tsx

@@ -1,3 +1,10 @@
+import type {
+  EventMapBase,
+  NavigationState,
+  ParamListBase,
+  RouteProp,
+  ScreenListeners,
+} from "@react-navigation/native";
 import React from "react";
 
 import {
@@ -15,7 +22,9 @@ import { SuspenseFallback } from "./views/SuspenseFallback";
 import { Try } from "./views/Try";
 
 export type ScreenProps<
-  TOptions extends Record<string, any> = Record<string, any>
+  TOptions extends Record<string, any> = Record<string, any>,
+  State extends NavigationState = NavigationState,
+  EventMap extends EventMapBase = EventMapBase
 > = {
   /** Name is required when used inside a Layout component. */
   name?: string;
@@ -27,8 +36,12 @@ export type ScreenProps<
   initialParams?: { [key: string]: any };
   options?: TOptions;
 
-  // TODO: types
-  listeners?: any;
+  listeners?:
+    | ScreenListeners<State, EventMap>
+    | ((prop: {
+        route: RouteProp<ParamListBase, string>;
+        navigation: any;
+      }) => ScreenListeners<State, EventMap>);
 
   getId?: ({
     params,