React Native React Native 4 — Questions and Answers
Question 1: In React Native, what is the purpose of `InteractionManager.runAfterInteractions()`?
- Schedules code to run after all pending animations and interactions complete (Correct answer)
- Delays a network request until the user interacts with the UI
- Batches setState calls to reduce re-renders
- Runs code synchronously on the UI thread
Correct answer: Schedules code to run after all pending animations and interactions complete
InteractionManager.runAfterInteractions defers expensive work until animations and touch interactions have finished, keeping the UI responsive.
Question 2: What is the correct way to apply platform-specific styles in React Native using StyleSheet?
- Using CSS media queries inside StyleSheet.create
- Using Platform.select() inside the style object (Correct answer)
- Using inline conditional JSX for each platform
- Using separate .ios.js and .android.js style files only
Correct answer: Using Platform.select() inside the style object
Platform.select({ ios: {}, android: {} }) inside a StyleSheet.create call returns the appropriate style object for the current platform.
Question 3: How does React Native's `PanResponder` differ from the `Gesture` API in react-native-gesture-handler?
- PanResponder runs on the native thread; Gesture runs on JS thread
- PanResponder is a JS-thread-based responder system; Gesture handler runs gesture recognition natively (Correct answer)
- They are functionally identical but with different syntax
- PanResponder only works on iOS; Gesture handler is cross-platform
Correct answer: PanResponder is a JS-thread-based responder system; Gesture handler runs gesture recognition natively
PanResponder processes gestures in the JS thread and can suffer from lag, while react-native-gesture-handler runs recognition natively for better performance.
Question 4: Which prop on Image component controls how the image is resized to fit its container in React Native?
- objectFit
- resizeMode (Correct answer)
- imageStyle
- contentMode
Correct answer: resizeMode
The resizeMode prop (values: cover, contain, stretch, repeat, center) controls how an Image scales within its bounds.
Question 5: What is Hermes in the context of React Native?
- A third-party navigation library for React Native
- A lightweight JavaScript engine optimized for React Native mobile apps (Correct answer)
- An alternative to Metro for bundling React Native code
- A testing framework for React Native components
Correct answer: A lightweight JavaScript engine optimized for React Native mobile apps
Hermes is an open-source JavaScript engine built by Meta, optimized for React Native with faster startup times and lower memory usage.
Question 6: Which method would you call to programmatically dismiss the software keyboard in React Native?
- TextInput.blur()
- Keyboard.dismiss() (Correct answer)
- KeyboardAvoidingView.hide()
- InputAccessoryView.dismiss()
Correct answer: Keyboard.dismiss()
Keyboard.dismiss() is the React Native API method that hides the software keyboard regardless of which input is currently focused.
Question 7: In React Native's New Architecture, what replaces the bridge for communication between JS and native code?
- WebSockets
- JSON serialization over sockets
- JSI (JavaScript Interface) (Correct answer)
- AsyncBridge
Correct answer: JSI (JavaScript Interface)
JSI (JavaScript Interface) allows JS to hold references to C++ objects and call native methods synchronously, replacing the async bridge.
React Native React Native 4
In React Native, what is the purpose of `InteractionManager.runAfterInteractions()`?