React Navigation installation in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to install the core React Navigation package using npm.

React Native

npm install [1]

Drag options to blanks, or click blank then click option'

Anavigation-react

Breact-navigation

C@react-navigation/native

Dreact-native-navigation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'react-navigation' which is the old package.

Installing unrelated packages like 'react-native-navigation'.

The core React Navigation package is @react-navigation/native. Installing it sets up the base navigation library.

2fill in blank

medium

Complete the command to install dependencies required by React Navigation for React Native projects.

React Native

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context [1]

Drag options to blanks, or click blank then click option'

A@react-native-community/masked-view

Breact-native-vector-icons

Creact-native-maps

Dreact-native-paper

Attempts:

3 left

💡 Hint

Common Mistakes

Installing unrelated UI libraries like 'react-native-paper'.

Forgetting to install masked-view causes navigation issues.

The package @react-native-community/masked-view is required for proper screen transitions in React Navigation.

3fill in blank

hard

Fix the error in the import statement to use the correct React Navigation hook.

React Native

import { [1] } from '@react-navigation/native';

Drag options to blanks, or click blank then click option'

AuseNavigation

BuseRoute

CuseNavigate

DuseRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useNavigate' which is from React Router, not React Navigation.

Using 'useRouter' which is unrelated.

The correct hook to access navigation object is useNavigation. useNavigate and useRouter are from other libraries.

4fill in blank

hard

Fill both blanks to complete the code that wraps the app with the Navigation container.

React Native

import { NavigationContainer } from '[1]';

export default function App() {
  return (
    <[2]>
      {/* Your app screens here */}
    </[2]>
  );
}

Drag options to blanks, or click blank then click option'

A@react-navigation/native

Breact-navigation

CNavigationContainer

DNavigationProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'react-navigation' which is outdated.

Using a wrong component name like 'NavigationProvider'.

The NavigationContainer component from @react-navigation/native wraps the app to manage navigation state.

5fill in blank

hard

Fill all three blanks to complete the code that installs and links React Navigation dependencies on iOS.

React Native

npx pod-install [1]
npx react-native [2] react-native-gesture-handler
npx react-native [3]

Drag options to blanks, or click blank then click option'

A--project-directory=ios

Blink

Crun-ios

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Skipping pod install causes build errors on iOS.

Using 'start' instead of 'run-ios' to launch the app.

First, pods are installed in the iOS project directory. Then dependencies are linked. Finally, the app is run on iOS simulator.

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