tezvyn:

Passing params between Stack Navigator screens

AI-drafted, machine-checkedintermediate
WHAT IT TESTS

navigation params basics.

OUTLINE

navigate to the route with a params object, read it via route.params on the target, pass an id not a huge object.

RED FLAG

using global state or refs to smuggle data instead of route params, or passing.

WHAT THIS TESTS The interviewer wants to confirm you know the idiomatic React Navigation way to move data between screens and understand why params should stay small and serializable.

A GOOD ANSWER COVERS In React Navigation each screen receives navigation and route props. To send data you call navigation.navigate('Details', { userId: 42 }) from the List screen, attaching a params object as the second argument. On the Details screen you read it from route.params, either via the route prop passed by the navigator or with the useRoute hook, for example const { userId } = route.params. With TypeScript you type the param list so this is checked. The recommended pattern is to pass only an identifier and have the Details screen fetch or look up the full record, because params should be lightweight, serializable values. This keeps the navigation state serializable, which is required for state persistence and deep linking. You can also set default params and update params later with navigation.setParams.

COMMON WRONG ANSWERS Smuggling data through a global variable, a module-level singleton, or a ref defeats the navigator's data flow and breaks deep linking and state restoration. Passing entire large objects or functions as params makes the navigation state non-serializable and bloated. Relying on a shared context for transient per-navigation data is heavier than needed.

LIKELY FOLLOW-UPS Why keep params serializable? So React Navigation can persist and restore state and support deep links. How do you pass data back to the List screen? Use navigation.navigate back to it with params, or a callback param sparingly, or shared state. How do you type params? Define a ParamList type and use NativeStackScreenProps.

ONE CONCRETE EXAMPLE On the List screen a row's onPress calls navigation.navigate('Details', { userId: item.id }). The Details screen reads const { userId } = useRoute().params, then calls a hook like useUser(userId) to load and show that user's profile, fetching the heavy data by id rather than passing it through navigation.

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.