React Native React Native 5 — Questions and Answers
Question 1: What does the `keyExtractor` prop in FlatList do?
- Extracts the sort key for ordering items
- Provides a unique string key for each item to optimize re-rendering (Correct answer)
- Maps items to their index positions
- Extracts nested keys from complex data objects
Correct answer: Provides a unique string key for each item to optimize re-rendering
keyExtractor returns a unique string for each item so React Native can efficiently identify which items changed, added, or removed.
Question 2: Which React Native API would you use to open the device's default email client with a pre-filled address?
- Share.share()
- Linking.openURL('mailto:user@example.com') (Correct answer)
- Communications.openEmail()
- IntentLauncher.openEmail()
Correct answer: Linking.openURL('mailto:user@example.com')
Linking.openURL with a 'mailto:' URI opens the native email client with the specified address pre-filled.
Question 3: How do you create a shadow effect that works on both iOS and Android in React Native?
- Use the shadow* style props which work identically on both platforms
- Use shadow* props for iOS and elevation for Android (Correct answer)
- Use boxShadow which is supported on both platforms
- Use a third-party library since React Native has no built-in shadow support
Correct answer: Use shadow* props for iOS and elevation for Android
iOS uses shadowColor, shadowOffset, shadowOpacity, and shadowRadius, while Android uses the elevation prop to cast a native material shadow.
Question 4: What is the purpose of the `windowSize` prop in FlatList?
- Sets the visible scroll area in pixels
- Determines how many viewport-heights of items to render above and below the visible area (Correct answer)
- Limits the maximum number of items in memory
- Controls the scroll deceleration speed
Correct answer: Determines how many viewport-heights of items to render above and below the visible area
windowSize defines the number of viewport-sized render windows kept in memory (centered on visible area), balancing memory and scroll performance.
Question 5: Which React Native component would you use to render HTML-style rich text with mixed styles in a single block?
- RichText
- Nested Text components with different style props (Correct answer)
- HTMLView
- StyledText
Correct answer: Nested Text components with different style props
Nesting Text components with individual styles inside a parent Text component enables inline mixed styling, similar to HTML spans.
Question 6: What does `react-native link` do in older React Native projects?
- Links JavaScript modules between projects
- Manually connects native module dependencies to the iOS and Android build systems (Correct answer)
- Links the app to a specific Metro bundler instance
- Creates symbolic links for shared assets
Correct answer: Manually connects native module dependencies to the iOS and Android build systems
react-native link was the pre-autolinking command that added native module code references to Xcode and Gradle build files.
Question 7: In React Navigation, what is the purpose of the `screenOptions` prop on a navigator?
- Defines which screens are included in the navigator
- Sets default options applied to every screen in that navigator (Correct answer)
- Controls the animation type for the entire navigator
- Specifies the initial route of the navigator
Correct answer: Sets default options applied to every screen in that navigator
screenOptions provides default header, gesture, and animation options that apply to all screens within that navigator unless overridden per-screen.
React Native React Native 5
What does the `keyExtractor` prop in FlatList do?