Skip to content

Chapter 3 of 7

Navigation, Routing, and Screen Lifecycle

React Navigation is the de facto routing library for React Native, offering several navigator types. Stack.Navigator manages a stack of screens where users push and pop views, ideal for hierarchical flows like a list leading to a detail page. Tab.Navigator displays a persistent bar at the bottom (or top) for switching between peer-level screens, suitable for 3-5 top-level destinations. Drawer Navigator presents a side menu that slides in from the edge or via a hamburger icon, useful for apps with many destinations. The createNativeStackNavigator function uses UINavigationController on iOS and Fragment on Android, providing native-looking transitions and better performance compared to the JavaScript-based createStackNavigator from @react-navigation/stack.

Programmatic navigation is performed through the navigation prop, accessed directly in components or via the useNavigation hook. Methods include navigate, push, goBack, replace, and reset, allowing fine-grained control over the stack state. To pass typed parameters between screens in TypeScript, declare a RootStackParamList mapping route names to their param shapes and pass it as a type argument to the navigator. By default, screens in a navigation stack remain mounted, so component state persists when navigating away and back. The useFocusEffect hook runs an effect when a screen gains focus and cleans up when it loses focus, mirroring useEffect but tied to the navigation lifecycle rather than mount lifecycle, which is essential for refetching data when a user returns to a screen.

Deep linking connects URLs to specific screens. In React Navigation, configure the linking prop on NavigationContainer with prefixes and a config object mapping URL paths to screens, for example mapping screens to user/:id. On the native side, configure URL schemes in Info.plist for iOS and AndroidManifest for Android, and for universal links, host an apple-app-site-association file on your domain. The Linking module complements this by letting the app open outgoing URLs in other apps via Linking.openURL and verify scheme support with Linking.canOpenURL. expo-router offers an alternative file-based routing approach where the file structure inside an app/ directory automatically becomes the navigation tree, similar to Next.js but for native apps.

All chapters
  1. 1Foundations of React Native
  2. 2Hooks, State, and Side Effects
  3. 3Navigation, Routing, and Screen Lifecycle
  4. 4Native Features, Data, and Device APIs
  5. 5Animations, Gestures, and Performance
  6. 6Expo, Deployment, and the New Architecture
  7. 7Debugging, Testing, and Accessibility

Drill it

Reading is not remembering. These come from the React Native Mobile deck:

Q

What is the default flex direction in a React Native View container?

The default flexDirection is 'column' in React Native, which differs from the web's default of 'row'. Children stack vertically from top to bottom unless you ch...

Q

How do you make a Text component take up the full available width of its parent?

Apply style={{flex: 1}} or alignSelf: 'stretch' to the Text component. Without these, Text only wraps its content. flex: 1 grows the component to fill remaining...

Q

What is the purpose of the SafeAreaView component?

SafeAreaView renders content within device areas not covered by notches, status bars, or home indicators. It's primarily useful on iOS devices with notches and...

Q

Explain the difference between useState and useRef for storing mutable values.

useState triggers a re-render when updated and is meant for state that affects the UI. useRef returns a mutable object (.current) that persists across renders w...