React Native React Native 3 — Questions and Answers
Question 1: In a React Native FlatList, what prop would you use to render a separator between items?
- renderSeparator
- ItemSeparatorComponent (Correct answer)
- separatorComponent
- ListSeparator
Correct answer: ItemSeparatorComponent
ItemSeparatorComponent accepts a component to render between each pair of items in the FlatList.
Question 2: Which React Native API lets you copy text to the system clipboard?
- Clipboard.setString() from @react-native-clipboard/clipboard (Correct answer)
- AsyncStorage.setItem()
- Share.share()
- Linking.openURL()
Correct answer: Clipboard.setString() from @react-native-clipboard/clipboard
The @react-native-clipboard/clipboard package exposes Clipboard.setString() to write text to the device clipboard.
Question 3: What is the role of `react-native.config.js` in a React Native project?
- Configures Babel transpilation settings
- Declares native dependencies for autolinking and CLI options (Correct answer)
- Sets up the Metro bundler resolver
- Defines environment variables for the app
Correct answer: Declares native dependencies for autolinking and CLI options
react-native.config.js is used by the React Native CLI for autolinking native modules and setting project-level CLI configuration.
Question 4: How do you prevent a TextInput from auto-capitalizing the first letter of every sentence in React Native?
- autoCapitalize='off'
- autoCapitalize='none' (Correct answer)
- capitalize={false}
- textTransform='none'
Correct answer: autoCapitalize='none'
Setting autoCapitalize='none' disables automatic capitalization on a TextInput component.
Question 5: Which Animated method combines multiple animation values into a single tracked value?
- Animated.parallel
- Animated.sequence
- Animated.add (Correct answer)
- Animated.diffClamp
Correct answer: Animated.add
Animated.add creates a new Animated.Value that tracks the sum of two animated values, enabling derived animations.
Question 6: What does the `pointerEvents` prop on a React Native View control?
- Mouse cursor style on web targets
- Whether the view and its children can receive touch events (Correct answer)
- Z-axis stacking order for overlapping views
- Gesture responder priority
Correct answer: Whether the view and its children can receive touch events
The pointerEvents prop determines if a View ('none', 'box-none', 'box-only', 'auto') and/or its children can be the target of touch events.
Question 7: Which React Native hook would you use to run a side effect only when the app comes back to the foreground?
- useWindowDimensions
- useColorScheme
- AppState + useEffect (Correct answer)
- useFocusEffect from React Navigation
Correct answer: AppState + useEffect
AppState.addEventListener('change') inside a useEffect lets you run code specifically when the app transitions to the 'active' state.
React Native React Native 3
In a React Native FlatList, what prop would you use to render a separator between items?