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.

Practice

1.

What is the main purpose of React Navigation in a React Native app?

easy

A. To style components with CSS

B. To manage app state globally

C. To move between different screens in the app

D. To fetch data from the internet

Solution

1. Step 1: Understand React Navigation's role

   React Navigation is designed to help users switch between different screens or pages in a React Native app.

2. Step 2: Compare with other options

   Styling is done with stylesheets, state management uses other libraries, and data fetching is separate from navigation.

3. Final Answer:

   To move between different screens in the app -> Option C

4. Quick Check:

   Navigation = Moving between screens [OK]

Hint: React Navigation controls screen changes [OK]

Common Mistakes:

• Confusing navigation with styling
• Mixing navigation with state management
• Thinking it fetches data

2.

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

?

easy

A. npm install @react-navigation/native

B. npm install react-navigation

C. npm install navigation-react

D. npm install @react-navigation/core

Solution

1. Step 1: Identify the official package name

   The official core package for React Navigation is '@react-navigation/native'.

2. Step 2: Check other options

   'react-navigation' is outdated, 'navigation-react' and '@react-navigation/core' are incorrect package names.

3. Final Answer:

   npm install @react-navigation/native -> Option A

4. Quick Check:

   Core package = @react-navigation/native [OK]

Hint: Core package always starts with @react-navigation/native [OK]

Common Mistakes:

• Using outdated package names
• Misspelling package names
• Installing wrong packages

3.

After installing React Navigation core, you run npm install react-native-screens react-native-safe-area-context. What is the expected result?

medium

A. The app will lose navigation functionality

B. The app will crash immediately on start

C. These packages are unrelated and cause no effect

D. The app will have improved screen performance and safe area handling

Solution

1. Step 1: Understand the purpose of the packages

   'react-native-screens' improves screen rendering performance, and 'react-native-safe-area-context' manages safe areas on devices.

2. Step 2: Predict the effect on the app

   Installing these packages enhances navigation experience by improving performance and layout safety.

3. Final Answer:

   The app will have improved screen performance and safe area handling -> Option D

4. Quick Check:

   Supporting packages improve navigation quality [OK]

Hint: Supporting packages enhance navigation, not break it [OK]

Common Mistakes:

• Thinking these packages cause crashes
• Assuming no effect
• Confusing with unrelated packages

4.

You installed React Navigation and dependencies on iOS but forgot to run pod install. What issue will most likely occur?

medium

A. The app will work perfectly without any issues

B. The app will fail to build or crash due to missing native modules

C. The app will show navigation but with wrong colors

D. The app will only crash on Android devices

Solution

1. Step 1: Understand the role of pod install

   On iOS, pod install links native dependencies required by React Navigation.

2. Step 2: Predict the consequence of skipping it

   Without running pod install, native modules are missing, causing build failures or runtime crashes on iOS.

3. Final Answer:

   The app will fail to build or crash due to missing native modules -> Option B

4. Quick Check:

   Missing pod install = build failure [OK]

Hint: Always run pod install on iOS after npm installs [OK]

Common Mistakes:

• Skipping pod install on iOS
• Assuming Android needs pod install
• Ignoring build errors

5.

You want to install React Navigation in a new Expo project. Which sequence of commands is correct?

?

hard

A. expo install @react-navigation/native react-native-screens react-native-safe-area-context

B. npm install react-navigation && pod install

C. expo install react-navigation && npm install react-native-safe-area-context

D. npm install @react-navigation/native && npm install react-native-screens

Solution

1. Step 1: Identify Expo-specific installation

   Expo recommends using expo install to install compatible versions of React Navigation and dependencies.

2. Step 2: Check the correct packages

   The core package is '@react-navigation/native' plus 'react-native-screens' and 'react-native-safe-area-context' for performance and layout.

3. Step 3: Verify other options

   Options B and C use outdated or incomplete commands; D uses npm but misses safe-area-context and pod install is not needed in Expo.

4. Final Answer:

   expo install @react-navigation/native react-native-screens react-native-safe-area-context -> Option A

5. Quick Check:

   Expo uses expo install with core packages [OK]

Hint: Use expo install for React Navigation in Expo projects [OK]

Common Mistakes:

• Using npm instead of expo install in Expo
• Missing dependencies
• Running pod install in Expo projects