Passing Data to Routes in React Native
Think of it like passing arguments to a function. When you navigate to a new screen, you give it the data it needs, like a product ID. This is key for master-detail views. The footgun: only pass JSON-serializable data to avoid breaking state persistence.
Why it exists
Screens in an app rarely exist in isolation. A product detail screen needs to know which product to display. A profile screen needs to know whose profile to fetch. Passing parameters allows one screen to give context to the next, enabling dynamic user interfaces instead of just static pages.
The mental model
Treat navigating to a new screen like calling a function. The navigation.navigate() call is the function name, and the parameters object is its arguments. For example, navigation.navigate('Details', { itemId: 42 }) is like calling a function showDetailsScreen({ itemId: 42 }). The destination screen receives these arguments and uses them to render its state.
How it works
Passing data is a two-step process. First, in the source screen, you call navigation.navigate() or navigation.push() with two arguments: the route name (a string) and a parameters object. For example: navigation.navigate('Profile', { userId: 123 }). Second, in the destination screen component (e.g., ProfileScreen), React Navigation passes a route prop. You access the parameters via route.params. You can destructure it to get the data you need: const { userId } = route.params;.
When to use it
Use route params any time a screen's content depends on an action from a previous screen. This is the standard pattern for master-detail flows, where a user taps an item in a list and is taken to a screen showing details for that specific item. You pass the item's unique ID as a parameter.
When not to use it
For global state that needs to be accessed by many unrelated screens, such as authentication status or user preferences, route params are not a good fit. Passing this data with every navigation would be repetitive and inefficient. For this, use a dedicated state management solution like React's Context API.
One canonical example
A ProductListScreen displays a list of products. When a user taps a product, the app navigates to the ProductDetailScreen. The onPress handler calls navigation.navigate('ProductDetail', { productId: 'abc-123' }). The ProductDetailScreen component then accesses this ID using const { productId } = route.params; and uses it to fetch and display the details for product 'abc-123'.
Interview question
For which scenario would passing data via route parameters be considered an inefficient or inappropriate approach?
- a.Providing a user's unique ID to a profile screen to fetch their specific data.
- b.Sending a small, temporary message to a confirmation screen after an action.
- c.Displaying a specific product's details after a user selects it from a list.
- d.Managing a user's global authentication token that impacts multiple, unrelated parts of the application.Correct
Why? this is the answer
The card explicitly states that route parameters are not a good fit for global state like authentication status that needs to be accessed by many unrelated screens, recommending dedicated state management instead. The other options describe appropriate uses for route parameters, where data is specific to a navigation action.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
- #react native
- #react navigation
- #mobile
- #javascript
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles