React Navigation installation in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding React Navigation dependencies

Which package is required to enable gesture-based navigation in React Navigation for React Native apps?

A @react-navigation/native

B react-native-gesture-handler

C react-native-reanimated

D react-native-screens

💡 Hint

Think about what handles touch and swipe gestures in React Native navigation.

The package react-native-gesture-handler is essential for handling gestures like swipes and taps in React Navigation.

❓ ui_behavior

intermediate

Effect of missing react-native-screens installation

What happens if you do NOT install and configure react-native-screens when using React Navigation?

A App crashes immediately on navigation

B Navigation works normally without any difference

C Navigation transitions become slower and less memory efficient

D App fails to build due to missing dependency

💡 Hint

This package optimizes screen rendering and memory usage.

react-native-screens improves performance by using native primitives for screen management. Without it, transitions are slower and use more memory.

📝 Syntax

advanced

Correct installation command for React Navigation core

Which command correctly installs the core React Navigation library using npm?

A npm install @react-navigation/native

B npm install @react-navigation/core

C npm install react-native-navigation

D npm install react-navigation

💡 Hint

The official React Navigation package uses a scoped name starting with @react-navigation.

The core React Navigation library is installed with npm install @react-navigation/native.

❓ lifecycle

advanced

Linking native dependencies after installation

After installing react-native-gesture-handler and react-native-reanimated, what is the next required step to ensure they work properly in a React Native app?

A Run react-native link to link native modules

B No additional steps needed, just import and use

C Restart the Metro bundler only

D Rebuild the app and restart the bundler

💡 Hint

Native modules require rebuilding the app to integrate properly.

After installing native dependencies, you must rebuild the app (e.g., rerun react-native run-android or run-ios) and restart the bundler to apply changes.

🔧 Debug

expert

Troubleshooting navigation not working after installation

You installed @react-navigation/native and its dependencies, but navigation does not work and shows a blank screen. Which is the MOST likely cause?

A You forgot to wrap your app in NavigationContainer

B You did not install react-native-gesture-handler

C You used the wrong version of React Native

D You did not import React in your component

💡 Hint

React Navigation requires a special container component at the root.

NavigationContainer is required to manage navigation state and linking. Without it, navigation components render nothing.