React Native React Native 2 — Questions and Answers
Question 1: Which React Native component is used to handle keyboard input and keep the focused field visible?
- ScrollView
- KeyboardAvoidingView (Correct answer)
- SafeAreaView
- FlatList
Correct answer: KeyboardAvoidingView
KeyboardAvoidingView automatically adjusts its height or padding when the software keyboard appears so the focused input remains visible.
Question 2: What is the purpose of the `useNativeDriver: true` option in Animated API calls?
- Enables hardware GPU rendering for all components
- Runs animations on the native thread instead of the JS thread (Correct answer)
- Disables JS-side animation calculations entirely
- Forces synchronous animation updates
Correct answer: Runs animations on the native thread instead of the JS thread
useNativeDriver: true offloads animation execution to the native thread, preventing JS thread jank and producing smoother animations.
Question 3: Which Metro bundler flag lets you start the packager on a custom port?
- --port (Correct answer)
- --server-port
- --listen
- --rn-port
Correct answer: --port
Running `npx react-native start --port 8082` starts Metro on a non-default port.
Question 4: In React Native, what does the `onLayout` prop provide to its callback?
- The component's z-index and opacity
- An event with the component's x, y, width, and height measurements (Correct answer)
- The parent container's dimensions
- A ref to the underlying native view
Correct answer: An event with the component's x, y, width, and height measurements
The onLayout callback receives a nativeEvent containing layout data: x, y, width, and height of the component.
Question 5: Which API would you use to detect whether the device is currently online or offline in React Native?
- AsyncStorage
- NetInfo from @react-native-community/netinfo (Correct answer)
- Linking API
- AppState API
Correct answer: NetInfo from @react-native-community/netinfo
The @react-native-community/netinfo library exposes NetInfo, which provides the network connection state and type.
Question 6: What is the default flex direction in React Native?
- row
- row-reverse
- column (Correct answer)
- column-reverse
Correct answer: column
Unlike CSS on the web, React Native defaults flexDirection to 'column', stacking children vertically.
Question 7: Which method on the `BackHandler` API removes a previously added back-press listener?
- BackHandler.removeEventListener
- BackHandler.clearListeners
- subscription.remove() (Correct answer)
- BackHandler.unsubscribe()
Correct answer: subscription.remove()
BackHandler.addEventListener returns a subscription object; calling subscription.remove() cleanly removes that specific listener.
React Native React Native 2
Which React Native component is used to handle keyboard input and keep the focused field visible?