React Native React Native Navigation & Routing 2 — Questions and Answers
Question 1: How do you access parameters passed to a screen in React Navigation?
- props.params
- route.params (Correct answer)
- navigation.params
- this.props.navigation.state.params
Correct answer: route.params
Parameters passed during navigation are accessed via the route.params object, which is provided as a prop to screen components.
Question 2: Which method resets the navigation stack and navigates to a new screen?
- navigation.replace
- navigation.reset (Correct answer)
- navigation.clear
- navigation.flush
Correct answer: navigation.reset
navigation.reset() resets the navigation state to the specified state, useful for clearing history after login/logout.
Question 3: What is a Drawer Navigator in React Navigation?
- A component for drag-and-drop
- A side-menu navigation pattern (Correct answer)
- A bottom sheet component
- A collapsible list view
Correct answer: A side-menu navigation pattern
Drawer Navigator renders a navigation menu that slides in from the side of the screen, commonly used for app menus.
Question 4: How do you go back to the previous screen programmatically in React Navigation?
- navigation.previous()
- navigation.back()
- navigation.goBack() (Correct answer)
- navigation.pop()
Correct answer: navigation.goBack()
navigation.goBack() navigates to the previous screen in the stack, equivalent to pressing the hardware back button.
Question 5: What is the purpose of the useFocusEffect hook in React Navigation?
- To set screen focus styles
- To run effects when a screen gains or loses focus (Correct answer)
- To focus a TextInput on mount
- To track user attention metrics
Correct answer: To run effects when a screen gains or loses focus
useFocusEffect runs a callback when the screen comes into focus and optionally cleans up when it loses focus.
Question 6: Which React Navigation hook gives access to the navigation object inside a component?
- useNavigation (Correct answer)
- useNavigate
- useNavigator
- useRoute
Correct answer: useNavigation
useNavigation hook returns the navigation prop, allowing any component in the tree to trigger navigation actions without prop drilling.
React Native React Native Navigation & Routing 2
How do you access parameters passed to a screen in React Navigation?