How to type props of a route with Typescript?

[eivindml]

Is there an exported type we can use to type the props?

In Next.js this is type like:

context.params?.id // undefined | string | string[]

app/blog/[id].js

export default function BlogPost({ route }) {
  return (
    <Text>
      {route.params.id}
    </Text>
  );
}

[koka0012]

Expo Router is based in react-navigation, which that means you can use react-navigation props to type your rote params.
Here's an example:

https://reactnavigation.org/docs/typescript/

[karlhorky]

Edit for Expo Router v1: maybe the RootStackParamList ideas I originally wrote below were just leaks from the abstraction and not part of the plan for stable Expo Router.

Seems like in Expo Router v1, useLocalSearchParams may be a more idiomatic way of passing information across routes:

app/new-guest.tsx

export default function NewGuest() {
  // ...
  return (
    // ...
      <Link
        href={`/?firstName=${firstName}&lastName=${lastName}`}
      >
        Add
      </Link>

app/index.tsx

export default function Index() {
  const { firstName, lastName } = useLocalSearchParams(); // 💥 Not fully typed

As shown above, this is indeed still not typed - maybe useLocalSearchParams should have a way to centrally specify the types, so that they are enforced everywhere, also in the href of the <Link>.

Edit: Now useLocalSearchParams and useGlobalSearchParams can accept a generic argument, so this is now resolved 🙌

---

Original post below:

Would be good to get an example of usage of NativeStackScreenProps in a working example app eg. in apps/demo to see if there are any differences with the way that expo-router handles this vs vanilla react-navigation.

Eg. does this example below from the the link from @koka0012 translate 1-to-1 to usage in expo-router?

import type { NativeStackScreenProps } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Feed: { sort: 'latest' | 'top' } | undefined;
};

type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>;

For example, one difference that I could imagine would be that the keys would be lowercase in expo-router, eg:

type RootStackParamList = {
  home: undefined;
  profile: { userId: string };
  feed: { sort: 'latest' | 'top' } | undefined;
};

Maybe also in the app/details.js example on the Passing parameters to the routes docs page...

cc @EvanBacon

[JClackett]

Yes please to exported type for route's!

[danielkv]

Having that, directly from expo-router would be awesome 😎

[EvanBacon]

My focus is primarily on getting things working consistently without errors, but I would love to have some fully automated type system in the future.

Off the top, we probably need the following:

• <Link /> typed correctly.
• Some guide on manually typing the routes for useHref<...>()
• Improved types for useLink()

Further, it would be nice to have some automatic typing (far in the future as this is fragile and strenuous to maintain):

• useLink.replace('...') should autocomplete the available routes.
• <Link href /> should support autocomplete.
• Perhaps dynamic routes could be automatic.
• Could make a TypeScript service for vs code which adds autocomplete for ErrorBoundary and other exports.

@marklawlor probably has some good ideas for this.

[karlhorky]

Nice, thanks for the answer!

Do your lists above also include the route parameters, which were the things that the original discussion description and my comment above were referring to?

[JClackett]

Yeah I think one of the main things I needed was just a generic that would give me the props that each route has, I dont (right now) need type safe route params etc

e.g.

import { RouteProps } from "expo-router"

interface MyParams {
 id: string
}
export default function MyRoute(props: RouteProps<MyParams>) {
   const id = props.params.id // or whatever the actual route props object is
... 

[mon-jai]

The thing mentioned by @karlhorky is a deal breaker for me.

In React Navigation, we can type check parameters passed to routes with TypeScript.

import { NativeStackScreenProps } from "@react-navigation/native-stack"
import { Text, TouchableNativeFeedback } from "react-native"

export type RootStackParamList = {
  Entry: { nth_visitor: number }
  Greet: { message: string }
}

export default function EntryScreen({ route, navigation }: NativeStackScreenProps<RootStackParamList, "Entry">) {
  const { nth_visitor } = route.params

  return (
    <TouchableNativeFeedback
      onPress={() => navigation.push("Greet", { message: `Hi, you are the ${nth_visitor} visitor` })}
    >
      <Text>A Link</Text>
    </TouchableNativeFeedback>
  )
}

If anything gets wrong, TypeScript will raise errors.

// Accessing a non-existent property
const { non_existent_key } = route.params // Property 'non_existent_key' does not exist on type 'Readonly<{ nth_visitor: number; }>'.ts(2339)

// Pushing with a wrong value type
onPress={() => navigation.push("Greet", { message: 123 })} // Type 'number' is not assignable to type 'string'.ts(2322)

// Pushing without a required property
onPress={() => navigation.push("Greet", {})} // Argument of type '{}' is not assignable to parameter of type '{ message: string; }'.

[karlhorky]

I updated my post above to also mention useLocalSearchParams, which seems like it could be the idiomatic way of passing information between routes now... 🤔 but which also does not allow for a way to add TypeScript parameter types that are enforced across the whole app.

• How to type props of a route with Typescript? #272 (comment)

[mon-jai]

@karlhorky Maybe with a factory method?

That will be TypeScript only changes (no breaking change involved).

custom-expo-router.tsx

import expoRouterFactory from "expo-router"

type RootStackParamList = {
  home: undefined
  profile: { userId: string }
  feed: { sort: "latest" | "top" } | undefined
}

const { Link, useSearchParams, useRouter } = expoRouterFactory<RootStackParamList>()

export { Link, useSearchParams, useRouter }

ProfileScreen.tsx

import { useSearchParams, Link } from "./custom-expo-router.tsx"

export default function ProfileScreen() {
  const { userId } = useSearchParams<"profile">()

  return <Link href={{ pathname: "feed", param: { sort: "top" } }}>Feed</Link>
}

[mon-jai]

In fact, we can implement expoRouterFactory ourselves.

expoRouterFactory.ts

import { Link, useNavigation, useRouter, useSearchParams } from "expo-router"

export default function expoRouterFactory<T>() {
  return {
    Link: Link as <K extends keyof T>(
      props: Parameters<typeof Link> & {
        href: string | { pathname?: K; params: T[K] }
      }
    ) => ReturnType<typeof Link>,

    useNavigation: useNavigation as <K extends keyof T>() => T[K],

    useRouter: useRouter as () => {
      push: (href: keyof T) => void
      replace: (href: keyof T) => void
      back: () => void
      setParams: (params?: Record<string, string>) => void
    },

    useSearchParams: useSearchParams as <K extends keyof T>() => T[K],
  }
}

[mon-jai]

@EvanBacon Can this be implemented to the library?

[robyhuzwandar]

Hi how to use this ?

[AndresdoSantos]

It's like React Navigation, I do it like this.

// navigation.d.ts

export interface Screens {
  home: undefined
  signIn: undefined
}

export declare global {
  namespace ReactNavigation {
    interface RootParamList extends Screens {}
  }
}

Now I can use like this

navigate('home')

[tarasovladislav]

Saved my day!

[Akronae]

On the routed component side, I'm using that to get the right types, and validating data:

function useSearchParamsTyped<
  T extends Record<string, 'string' | 'number' | 'string[]' | 'number[]'>,
>(
  params: T,
): {
  [K in keyof T]: T[K] extends 'string'
    ? string
    : T[K] extends 'number'
    ? number
    : T[K] extends 'string[]'
    ? string[]
    : T[K] extends 'number[]'
    ? number[]
    : never
} {
  const searchParams = useSearchParams()
  const result = {} as any
  for (const key in params) {
    if (params[key] === `string`) {
      if (typeof searchParams[key] !== `string`)
        throw new Error(`Invalid type for '${key}': '${params[key]}'`)
      result[key] = searchParams[key]?.toString()
    } else if (params[key] === `number`) {
      if (Number.isNaN(Number(searchParams[key])))
        throw new Error(`Invalid type for '${key}': '${params[key]}'`)
      result[key] = Number(searchParams[key])
    } else if (params[key] === `string[]`) {
      if (!Array.isArray(searchParams[key]))
        throw new Error(`Invalid type for '${key}': '${params[key]}'`)
      result[key] = searchParams[key]
    } else if (params[key] === `number[]`) {
      if (!Array.isArray(searchParams[key]))
        throw new Error(`Invalid type for '${key}': '${params[key]}'`)
      result[key] = (searchParams[key] as Array<string>).map(Number)
    } else {
      throw new Error(`Invalid type ${params[key]}`)
    }
  }
  return result
}

[karlhorky]

Oh nice, it looks like both useLocalSearchParams and useGlobalSearchParams can now accept a generic argument 🙌

So it seems that this is resolved:

import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';

export default function Route() {
  const { user, query } = useLocalSearchParams<{ user: string; query?: string }>();

  return <Text>User: {user}</Text>;
}

[pdandradeb]

don't you get any warnings using this? here's like this:

[brunog2]

Any update? Still not able to type params.

[marklawlor]

If your still having this issue, make sure updated both Expo SDK and Expo Router. The type generation is performed via @expo/cli, not Expo Router, so it needs to be updated as well.

The types generated are

  type UnknownOutputParams = Record<string, string | string[]>;
  
  export function useLocalSearchParams<
    T extends AllRoutes | UnknownOutputParams = UnknownOutputParams
  >(): T extends AllRoutes ? SearchParams<T> : T;

You cannot type a search parameter as a number as we parse them from the URL string (and search parameters are always string on web)

[MaRaSu]

I got the generic argument working for useLocalSearchParams (passing query param to a route which is not dynamic) e.g.

const { name } = useLocalSearchParams<{ name: string }>();

however what about router.push()? I tried without type and with the following generic type, but TS does not like it.

router.push<{ name: string }>({pathname: 'offline-map-screen', params: { name: item.name }});

Both with and without type give TS error: "Argument of type '{ pathname: string; params: { name: string; }; }' is not assignable to parameter of type 'never'.ts(2345)".

I searched Expo docs, but could not find much about use of router.push() and nothing about how it should work with typed routes. My TS skills are at a beginner level, so maybe I'm missing something obvious here...

[GGraciet]

Actually, when using router.push() like : router.push({pathname: 'offline-map-screen', params: { name: item.name }});, your pathname need to match an auto generated type like DynamicRouteTemplate, StaticRoutes or RelativePathString.

Detailled explanation

The push method expect the first argument to be an Href which is : export type Href<T> = T extends Record<'pathname', string> ? HrefObject<T> : Route<T>;.

In our specific case, our type (generic T) have a "pathname" property, so the expected type will actually be an HrefObject that looks like :

  export type HrefObject<
    R extends Record<'pathname', string>,
    P = R['pathname']
  > = P extends DynamicRouteTemplate
    ? { pathname: P; params: InputRouteParams<P> }
    : P extends Route<P>
    ? { pathname: Route<P> | DynamicRouteTemplate; params?: never | InputRouteParams<never> }
    : never;

There are 3 cases :

1. Our path is dynamic (e.g. our component is in a "[id].tsx" file). P extends DynamicRouteTemplate means that generic P must extends DynamicRouteTemplate. So P (which is our pathname property) must excatly match DynamicRouteTemplate which is an auto-generated type containing "full" paths to your dynamic route components (e.g. "/(app)/[id].tsx").

2. Our path is not dynamic (e.g. our component is in a "component.tsx" file). P extends Route<P>means that generic P must extend Route. So P (still our path) should match the existing auto-generated StaticRoutes or RelativePathString (or some other possibilities that we can ignore here). The path must be valid according to these types (e.g. "/(app)/component.tsx" or "/component.tsx" but not "component.tsx").

3. None of the conditions above were fulfilled and the never case is applied, which raises an error.

[John-CFO]

First of all, i´m a neewby in TS and Expo-Router

I'm struggling some weeks with the issue to pass an object (images from a API) from one tab to an other tab.
I´ve readed a lot of docs and blog posts, try many potential solutions and nothing has helped.
I´ve try out to wrap the Details.tsx to [Details].tsx like the expo docs sayes and wrapped the flatlist in a

Currently the code looks like this:
The images are visible in a flatlist an i would like to pass the pushed image to a details tab.

Collection.tsx

{ router.push(`/Details/${item.id}`); }} >

Details.tsx

const { id } = router.params;
console.log("Selected Image in Details", id);

IDE warnings:
"message": "The argument of type "/Details/${string}" can be assigned to the parameter of type "StaticRoutes | RelativePathString | http${string}" cannot be assigned."

"message": "The property "params" does not exist for type "Router"."

What´s the right way to pass the object from the flatlist to the based in Details.tsx?

[Akronae]

const { id } = useLocalSearchParams<{ id: string }>()
// ....
router.push(`/Details/${item.id}` as never);

[John-CFO]

Thank´s a lot for your answer.
I couldn't connect the connection yet but all errors are gone.

current state is:

collection.tsx

const Collection: React.FC = ( ) => {
const { id } = useLocalSearchParams<{ id: string }>( );
<TouchableOpacity
key={ item.id }
onPress={ ( ) => { router.push (/Details/${ item.id } as never ); } }>
<ItemContainer imageSrc={ item.url } /> //container with image data from API

details.tsx

const Details: React.FC = ( ) => {
const { id } = useLocalSearchParams<{ id: string }>( );
console.log( "Selected Image in Details", id );

<Image style={ { .... } } source={ { uri: id } }/>

In the terminal i became the answer: LOG Selected Image in Details undefined
and if i klick a image in the flatlist the transition doesn´t work.

Any ideas what´s wrong?

[Akronae]

I think you should move details.tsx to details/[id].tsx
Mostly you should read the doc

[MariuzM]

Anyone can help me out to type correctly for params? This is on Expo Router V3