Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
React Native · Question Set
Navigation & Routing interview questions for placements and exams.
Questions
14
Included in this set
Subject
React Native
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for React Native.
React Navigation exports the createStackNavigator function from @react-navigation/stack. It returns two components — Stack.Navigator and Stack.Screen — that define navigation structure and screens.
import { createStackNavigator } from '@react-navigation/stack';For complete preparation, combine this set with full subject-wise practice for React Native. You can also explore other subjects and sets from the links below.
React Navigation is a popular library for managing navigation in React Native apps. It allows developers to move between screens, handle stacks, tabs, and drawers, and maintain a predictable navigation state across the app.
React Navigation version 5 and above is installed with @react-navigation/native as the core package. You must also install required peer dependencies like react-native-screens and react-native-safe-area-context to make it work.
React Navigation uses react-native-gesture-handler to handle swipe and tap gestures for screen transitions. It must be installed and linked correctly before using navigators like StackNavigator or DrawerNavigator.
Stack Navigator allows navigation between screens in a stack-like manner. Each new screen is pushed on top of the previous one, and going back pops the current screen off the stack.
You can pass parameters to another screen by adding an object as the second argument to navigation.navigate. The receiving screen accesses the data via route.params.
navigation.navigate('Details', { id: 10 });Each screen in React Navigation receives two props — navigation and route. The route object contains information about the current route, including any params passed from previous screens.
const { id } = route.params;The @react-navigation/tabs package provides BottomTabNavigator and MaterialTopTabNavigator. It’s ideal for organizing multiple related sections of an app like Home, Profile, or Settings.
A Drawer Navigator provides a sidebar that slides in from the left or right. It’s used when you have multiple major sections like Settings, Profile, and Help. It helps users navigate across top-level destinations without crowding the main UI. Drawer navigation is common in enterprise or dashboard-type apps.
The navigation stack works on the principle of push and pop. When a screen is opened using navigation.navigate, it’s pushed on top of the stack. When you press the back button or call navigation.goBack(), the current screen is popped off and control returns to the previous one.
Yes, you can pass functions as parameters using navigation.navigate('ScreenB', { callback }) and call them from the target screen. However, it’s often better to use a global state manager like Context or Redux when multiple screens need to share logic or callbacks.
Deep linking allows external links (like myapp://profile/123 or https://myapp.com/profile/123) to open specific screens in your app. It’s configured in NavigationContainer with a linking object that defines routes and URL patterns. It helps integrate React Native apps with the broader web or external systems.
Each screen receives a navigation prop that provides methods to control navigation. navigation.navigate('ScreenB') moves to ScreenB if it’s part of the navigator hierarchy.
navigation.navigate('Profile');React Navigation supports nesting navigators inside one another to create complex navigation structures. For example, you can have a TabNavigator inside a StackNavigator or vice versa. Each nested navigator manages its own navigation state but still communicates with parent navigators for transitions and back actions.