React Navigation installation in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is React Navigation used for in React Native apps?

React Navigation helps you move between different screens or pages in a React Native app, like flipping through pages in a book.

beginner

Which command installs the core React Navigation library?

You run npm install @react-navigation/native or yarn add @react-navigation/native to add React Navigation to your project.

intermediate

Why do you need to install additional dependencies like react-native-screens and react-native-safe-area-context?

These help React Navigation work smoothly with native device features like screen optimizations and safe areas (like notches on phones).

intermediate

What is the purpose of installing react-native-gesture-handler when setting up React Navigation?

It enables smooth touch gestures like swiping between screens, making navigation feel natural and responsive.

beginner

After installing React Navigation and its dependencies, what is the next step to start using it in your app?

You wrap your app in a NavigationContainer component and define navigators like stack or tab navigators to manage screen transitions.

Which command installs the core React Navigation library?

A npm install navigation-react

B npm install @react-navigation/native

C npm install react-navigation

D npm install react-native-navigation

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

Which dependency is required for handling gestures in React Navigation?

A react-native-reanimated

B react-native-safe-area-context

C react-native-screens

D react-native-gesture-handler

react-native-gesture-handler enables touch gestures like swiping.

What component should wrap your app to enable React Navigation?

A NavigationWrapper

B NavigationProvider

C NavigationContainer

D AppNavigator

NavigationContainer is the main wrapper for React Navigation.

Why do you install react-native-screens with React Navigation?

A To optimize memory and performance for screens

B To add screen animations

C To handle safe areas on devices

D To add gesture support

react-native-screens improves performance by optimizing screen management.

Which of these is NOT a step in installing React Navigation?

A Installing react-native-navigation

B Installing react-native-gesture-handler

C Installing react-native-safe-area-context

D Installing @react-navigation/native

react-native-navigation is a different library, not part of React Navigation setup.

Explain the main steps to install React Navigation in a React Native project.

Think about the commands you run and how you prepare your app to use navigation.

Why is it important to install react-native-gesture-handler and react-native-screens when using React Navigation?

Consider how navigation feels and performs on a real phone.

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