React Native React Native Navigation & Routing 1 — Questions and Answers
Question 1: Which library is the most widely used for navigation in React Native applications?
- React Router Native
- React Navigation (Correct answer)
- React Native Router
- Native Navigation
Correct answer: React Navigation
React Navigation is the community-standard navigation library for React Native, supporting stack, tab, and drawer navigators.
Question 2: What does a Stack Navigator do in React Native?
- Manages app state in a stack
- Navigates screens in a last-in-first-out stack pattern (Correct answer)
- Stacks UI components vertically
- Manages API request queues
Correct answer: Navigates screens in a last-in-first-out stack pattern
Stack Navigator pushes screens onto a stack and allows users to navigate back by popping screens off the stack.
Question 3: Which React Navigation component wraps the entire navigation tree to provide context?
- NavigationContainer (Correct answer)
- NavigationProvider
- NavigationRoot
- AppNavigator
Correct answer: NavigationContainer
NavigationContainer manages the navigation tree and contains the navigation state, and must wrap all navigators.
Question 4: How do you navigate to a new screen using the navigation prop in React Navigation?
- navigation.open('ScreenName')
- navigation.navigate('ScreenName') (Correct answer)
- navigation.go('ScreenName')
- navigation.push('ScreenName')
Correct answer: navigation.navigate('ScreenName')
navigation.navigate('ScreenName') moves to the specified screen, and if the screen is already in the stack, it returns to it.
Question 5: What is the purpose of the Tab Navigator in React Navigation?
- To organize code into tabs
- To create bottom or top tab-based navigation (Correct answer)
- To manage tabular data display
- To handle keyboard tab focus
Correct answer: To create bottom or top tab-based navigation
Tab Navigator renders a tab bar at the bottom or top of the screen, allowing users to switch between screens quickly.
Question 6: How can you pass parameters to a screen when navigating in React Navigation?
- navigation.navigate('Screen', { key: value }) (Correct answer)
- navigation.navigate('Screen', params: { key: value })
- navigation.navigate('Screen').setParams({ key: value })
- navigation.navigate('Screen').params({ key: value })
Correct answer: navigation.navigate('Screen', { key: value })
You pass a second argument object to navigation.navigate() containing the params, which are accessed via route.params.
React Native React Native Navigation & Routing 1
Which library is the most widely used for navigation in React Native applications?