Academy
mediumReact Native#6

React Navigation stack setup

Prompt

Configure a React Navigation stack with two screens: Home and Profile. Home has a button that navigates to Profile, passing a userId param. Profile displays the userId.

Solution

const Stack = createNativeStackNavigator()
function HomeScreen({ navigation }) {
  return <Button title="Go to Profile" onPress={() => navigation.navigate('Profile', { userId: 42 })} />
}
function ProfileScreen({ route }) {
  return <Text>User ID: {route.params.userId}</Text>
}
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
Mentor's take

React Navigation keeps navigation state in JavaScript — a serializable object describing the stack — which is what makes deep linking, state persistence, and web support possible. Choosing createNativeStackNavigator over the JS stack is itself a decision worth naming: native-stack delegates each screen to UINavigationController on iOS and Fragment transitions on Android, so pushes, pops, and back-swipes are the platform's own — you trade away custom JS transition interpolators for platform fidelity and better performance.

The data flow is the interview core: navigation.navigate('Profile', { userId: 42 }) writes params into the navigation state; the target screen reads them from route.params. Params ride inside that serializable state, which drives the key discipline: pass identifiers, not objects. Passing a whole user object (or worse, a callback) breaks deep links, state restoration, and leaves the Profile screen showing stale data when the user updates elsewhere. Pass userId, fetch or select the user on the target screen.

Red flag: passing full objects or functions through params. It works until deep linking, persistence, or a data refresh exposes it — interviewers probe exactly this.

Say it: "Navigation state is serializable JS state, so I pass ids through params and resolve data on the target screen — and I use native-stack for platform-fidelity transitions unless I need custom interpolators."