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.