Top 30 React Native Concepts Quiz

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   For displaying long, scrolling lists of data in React Native, which component is recommended for optimal performance?

   • aA third-party library, as core components lack advanced list virtualization.
   • bA combination of View and Text components, managed with custom state.
   • cScrollView, as it provides basic scrolling functionality for all content.
   • dFlatList, because it efficiently renders only the items currently visible on screen.
   Show the answer

   Answer: d · FlatList, because it efficiently renders only the items currently visible on screen.

   FlatList is the recommended component for long lists because it optimizes performance by only rendering items currently visible on screen. ScrollView, while providing scrolling, renders all its children at once, which can lead to performance issues with extensive content.

   Read the full bite: React Native Core Components: Your UI Building Blocks

2. Question 2 of 30

   Which of the following is a key benefit of using StyleSheet.create() for styling in React Native?

   • aIt allows developers to write styles using standard CSS syntax directly within JavaScript files.
   • bIt automatically applies styles globally across all components without explicit referencing.
   • cIt optimizes performance by processing style objects once and referencing them efficiently on the native side.
   • dIt is primarily designed for creating highly dynamic styles that change frequently based on user interaction.
   Show the answer

   Answer: c · It optimizes performance by processing style objects once and referencing them efficiently on the native side.

   The card explicitly states that StyleSheet.create() processes style objects once and sends them to the native side, which is much faster than re-serializing raw JavaScript style objects on every render. Its primary use is for static styling, not dynamic changes, although it can be combined with dynamic styles.

   Read the full bite: Styling in React Native with StyleSheet

3. Question 3 of 30

   To perfectly center a child component both horizontally and vertically within its parent using Flexbox, which properties should be applied to the parent container?

   • aposition: 'absolute', top: '50%', left: '50%'
   • bflexDirection: 'row', justifyContent: 'center', alignItems: 'center'
   • cflex: 1, justifyContent: 'center', alignItems: 'center'
   • dflex: 1, alignSelf: 'center', margin: 'auto'
   Show the answer

   Answer: c · flex: 1, justifyContent: 'center', alignItems: 'center'

   Option C is correct because 'flex: 1' makes the parent fill available space, 'justifyContent: 'center'' centers children along the primary axis (vertical by default), and 'alignItems: 'center'' centers them along the cross axis (horizontal by default). Option B is incorrect because setting 'flexDirection: 'row'' would change the primary axis, altering how 'justifyContent' and 'alignItems' center the content relative axes.

   Read the full bite: Flexbox: Responsive Layouts in React Native

4. Question 4 of 30

   Which statement accurately describes Metro's primary role in a React Native project?

   • aIt handles the compilation of platform-specific native code for iOS and Android.
   • bIt manages the installation and versioning of third-party JavaScript libraries.
   • cIt compiles multiple JavaScript source files into a single, optimized bundle for execution.
   • dIt provides the core framework for building user interfaces with React components.
   Show the answer

   Answer: c · It compiles multiple JavaScript source files into a single, optimized bundle for execution.

   Metro's core function is to act as a "specialized compiler" that takes numerous JavaScript files, resolves dependencies, transforms code, and combines them into a single, optimized bundle for efficient loading on devices. Option B describes a package manager, C describes native build tools, and D describes the React Native framework itself.

   Read the full bite: Metro: The JavaScript Bundler for React Native

5. Question 5 of 30

   For which scenario is using platform-specific file extensions (e.g., MyComponent.ios.js) the most appropriate solution?

   • aAdjusting a single style property, like background color, for each platform.
   • bApplying a minor API workaround based on the operating system version.
   • cSetting a boolean configuration flag that varies between iOS and Android.
   • dImplementing a component with fundamentally different structure and behavior on iOS and Android.
   Show the answer

   Answer: d · Implementing a component with fundamentally different structure and behavior on iOS and Android.

   Platform-specific file extensions are recommended when a component's structure, behavior, or dependencies are fundamentally different between platforms. Options A, C, and D describe small, inline differences that are best handled with the Platform module's select method or OS checks, as using separate files for these would be overkill.

   Read the full bite: React Native: Platform-Specific Code

6. Question 6 of 30

   What is the fundamental mechanism by which Hermes improves React Native app startup performance?

   • aIt dynamically optimizes JavaScript code during runtime using a Just-In-Time (JIT) compiler.
   • bIt replaces JavaScript with a more performant native language for critical UI components.
   • cIt significantly reduces the final app's JavaScript bundle size by automatically tree-shaking unused modules.
   • dIt performs Ahead-Of-Time (AOT) compilation of JavaScript into optimized bytecode during the app's build phase.
   Show the answer

   Answer: d · It performs Ahead-Of-Time (AOT) compilation of JavaScript into optimized bytecode during the app's build phase.

   Hermes is an Ahead-Of-Time (AOT) focused engine that pre-compiles JavaScript into optimized bytecode during the build process, reducing the work the device has to do at startup. While it contributes to a smaller app size, its primary mechanism for faster startup is not tree-shaking or JIT compilation.

   Read the full bite: Hermes: The JS Engine for Faster React Native Apps

7. Question 7 of 30

   Which fundamental design aspect of the React Native Bridge is primarily responsible for its performance limitations and visible UI jank?

   • aThe necessity of compiling JavaScript code to native machine instructions.
   • bIts asynchronous message passing mechanism between the JavaScript and native threads.
   • cThe overhead introduced by serializing and deserializing all messages into JSON format.
   • dThe requirement for all UI components to be rendered directly by the JavaScript thread.
   Show the answer

   Answer: b · Its asynchronous message passing mechanism between the JavaScript and native threads.

   The card explicitly states that the Bridge's asynchronous nature and the inherent delays it causes are the source of its main limitations, leading to UI jank and preventing synchronous UI layout access. While JSON serialization adds overhead, the core problem causing delays and visual 'jumps' is the asynchronous communication.

   Read the full bite: The React Native Bridge: Why It's Being Replaced

8. Question 8 of 30

   When is it most appropriate to use Expo Application Services (EAS)?

   • aDuring the initial phase of development to quickly prototype UI components in Expo Go.
   • bFor managing project dependencies and installing native modules directly on your local machine.
   • cTo start a local development server and debug JavaScript code on a simulator or device.
   • dWhen preparing a production-ready build for app store submission or pushing over-the-air updates.
   Show the answer

   Answer: d · When preparing a production-ready build for app store submission or pushing over-the-air updates.

   EAS is designed for production workflows, handling cloud builds, app store submissions, and over-the-air updates for React Native apps. It is explicitly stated as distinct from local development tools like the `expo` CLI, which are used for prototyping and running local development servers.

   Read the full bite: Expo Application Services (EAS): The Cloud Toolchain for React Native

9. Question 9 of 30

   Which scenario requires creating a custom development build in Expo?

   • aAdding a new JavaScript-only utility library to your project.
   • bUtilizing a native device feature like the camera, which is already part of the Expo SDK.
   • cOptimizing app performance by pre-compiling all JavaScript code into native binaries.
   • dIntegrating a React Native library that includes native Android/iOS code not part of the Expo SDK.
   Show the answer

   Answer: d · Integrating a React Native library that includes native Android/iOS code not part of the Expo SDK.

   Custom development builds are specifically for integrating React Native libraries that contain native code not already included in the Expo SDK. Pure JavaScript libraries or features already in the SDK do not require a custom build, and performance optimization through pre-compilation is not the primary purpose of this process.

   Read the full bite: Adding Native Code to Expo (The Modern 'Eject')

10. Question 10 of 30

    Which action would cause an error or unexpected behavior when using React Native's View component?

    • aDirectly placing plain text content, like "Hello World", as a child of a View.
    • bUsing a View to apply a background color and padding to a section of the UI.
    • cApplying flexDirection: 'row' to arrange child components horizontally.
    • dNesting a View component inside another View component to create complex layouts.
    Show the answer

    Answer: a · Directly placing plain text content, like "Hello World", as a child of a View.

    The card explicitly states that 'All text content must be placed inside a <Text> component, or your app will throw an error.' The other options describe valid and common uses of the View component for layout and styling.

    Read the full bite: The View Component: React Native's UI Building Block

11. Question 11 of 30

    What is the primary reason styles applied to a parent View component do not directly affect text within a child Text component?

    • aOnly global stylesheet definitions can influence the appearance of Text components without direct application.
    • bText components operate within a distinct "text world" where styles must be explicitly defined or nested.
    • cReact Native's styling engine prioritizes platform-specific text rendering over inherited CSS-like properties.
    • dView components are solely for layout and cannot transmit stylistic properties to text.
    Show the answer

    Answer: b · Text components operate within a distinct "text world" where styles must be explicitly defined or nested.

    The Text component creates a special "text world" with its own layout and styling rules, meaning styles from a parent View are not inherited. Instead, styles must be applied directly to the Text component itself or through nested Text components.

    Read the full bite: React Native's Text Component: Beyond Displaying Words

12. Question 12 of 30

    When displaying an image from a network URL using React Native's Image component, which of the following is a critical requirement for the image to be visible?

    • aYou must specify explicit width and height in the style prop.
    • bThe source prop must include a headers object for authentication.
    • cIt must be wrapped within a View component that defines its layout.
    • dThe image must be pre-cached on the device for optimal performance.
    Show the answer

    Answer: a · You must specify explicit width and height in the style prop.

    The card explicitly states that for network images, 'you must provide an explicit width and height in the style prop' because React Native cannot know remote image dimensions, and 'Without these styles, the image will have zero dimensions and be invisible'. While wrapping in a View (C) is common for layout, the Image component itself needs the dimensions to render a network image.

    Read the full bite: React Native's Image Component

13. Question 13 of 30

    Which characteristic primarily explains why ScrollView is discouraged for long, dynamic lists?

    • aIts scrolling performance degrades due to complex layout calculations for many off-screen elements.
    • bIt struggles to update individual items efficiently when data changes.
    • cIt renders all its child components into a single view at once, consuming significant resources.
    • dIt does not provide built-in optimizations for displaying large numbers of similar items.
    Show the answer

    Answer: c · It renders all its child components into a single view at once, consuming significant resources.

    The card explicitly states that ScrollView renders every single item, even those off-screen, leading to poor performance and high memory consumption. This simultaneous rendering of all content is the fundamental limitation, while other options describe consequences or secondary issues.

    Read the full bite: ScrollView: For Simple, Bounded Content

14. Question 14 of 30

    What is the recommended approach for managing user input in a React Native TextInput?

    • aProvide an initial defaultValue prop and access the current input using a ref's getText() method.
    • bAllow the TextInput to manage its own internal state, retrieving the final value with a ref.
    • cSet the value prop to a state variable and update it via the onChangeText callback.
    • dDirectly modify the TextInput's content from a global store whenever the user types.
    Show the answer

    Answer: c · Set the value prop to a state variable and update it via the onChangeText callback.

    The card emphasizes treating TextInput as a controlled component, where the app's state is the single source of truth, updated by onChangeText and reflected by the value prop. Option B describes an uncontrolled component, which is not the recommended mental model for TextInput.

    Read the full bite: React Native TextInput: Handling User Input

15. Question 15 of 30

    For which scenario is React Native's Pressable component most beneficial compared to a simple Button or View with an onPress handler?

    • aWhen you need to ensure the component is always rendered with native performance optimizations.
    • bWhen you need to prevent accidental presses by requiring a double-tap gesture.
    • cWhen you want to detect specific touch stages like a finger pressing down, holding, or releasing.
    • dWhen you need a standard, platform-styled button with minimal custom logic.
    Show the answer

    Answer: c · When you want to detect specific touch stages like a finger pressing down, holding, or releasing.

    Pressable's core purpose is to provide granular control over touch interactions, allowing detection of events like onPressIn, onLongPress, and onPressOut. The card explicitly states that for standard, platform-styled buttons with minimal logic, the basic Button component is simpler, making option D incorrect.

    Read the full bite: Pressable: A More Powerful Way to Handle Touches

16. Question 16 of 30

    When is it appropriate to use alignSelf on a child component instead of alignItems on its parent container?

    • aWhen the parent container needs to be centered within its own parent.
    • bWhen you want to ensure all children expand to fill the cross-axis space.
    • cWhen you want to align all children uniformly along the container's main axis.
    • dWhen a single child needs to be aligned differently on the cross axis than its siblings.
    Show the answer

    Answer: d · When a single child needs to be aligned differently on the cross axis than its siblings.

    alignSelf is specifically designed to override the parent's alignItems property for a single, individual child component. Option C describes the function of justifyContent, while option B describes a specific value (stretch) of alignItems, not the choice between alignItems and alignSelf.

    Read the full bite: alignItems: Aligning Children on the Cross Axis

17. Question 17 of 30

    What is the primary consequence of omitting or incorrectly handling the onRequestClose prop for a React Native Modal on Android?

    • aThe modal's animation will default to 'none', regardless of the specified animationType.
    • bAndroid users will be unable to dismiss the modal using the hardware back button.
    • cThe modal will not render its content on Android devices.
    • dThe modal will automatically dismiss after a short, fixed duration.
    Show the answer

    Answer: b · Android users will be unable to dismiss the modal using the hardware back button.

    The card explicitly states that forgetting onRequestClose "disables the Android back button, trapping your user." This prop is crucial for allowing users to dismiss the modal via the hardware back button on Android. The modal will still render its content even if this prop is omitted.

    Read the full bite: React Native Modal: Presenting Content Above Other Views

18. Question 18 of 30

    For which scenario is Platform.select the most appropriate tool in React Native?

    • aAdjusting minor UI properties like padding or background color based on the operating system.
    • bStructuring an application with entirely separate screen components for iOS and Android.
    • cConditionally loading different data models from a backend API for each platform.
    • dImplementing distinct, complex business logic flows for iOS and Android.
    Show the answer

    Answer: a · Adjusting minor UI properties like padding or background color based on the operating system.

    Platform.select is designed for small-to-medium platform differences, such as tweaking styles like padding or background colors. It is explicitly advised against for entire screens or complex logic flows, which are better handled by platform-specific file extensions.

    Read the full bite: Platform.select: Write Once, Adapt Anywhere

19. Question 19 of 30

    What is a critical behavior of Dimensions.get('window') that developers must account for?

    • aIt provides a reactive value that updates synchronously with device rotation or folding.
    • bIt is the preferred API for managing responsive layouts within modern functional components.
    • cIts returned value is a static snapshot that does not update automatically on dimension changes.
    • dIt automatically triggers a re-render of React components when the window size changes.
    Show the answer

    Answer: c · Its returned value is a static snapshot that does not update automatically on dimension changes.

    The card explicitly states that Dimensions.get() takes a 'single photograph' of the screen's size and 'won't update on rotation,' meaning its value is static at the time of the call. Option D describes the behavior of the useWindowDimensions hook, which is designed for automatic updates and re-renders in functional components.

    Read the full bite: React Native's Dimensions API: The Manual Approach

20. Question 20 of 30

    Which scenario is the primary reason to opt for React Native's Pressable component over the Button component?

    • aThe button requires a custom background gradient and an embedded image.
    • bThe button's label must be dynamically updated based on application state.
    • cThe button must be disabled under certain conditions.
    • dThe button needs to execute an asynchronous network request.
    Show the answer

    Answer: a · The button requires a custom background gradient and an embedded image.

    The card explicitly states that the Button component should not be used for significant custom styling, such as adding an icon or applying a gradient background, recommending Pressable for these needs. Options A, B, and D describe functionalities that are either supported by the Button component or are handled by the onPress callback and state management, not by the component's styling limitations.

    Read the full bite: React Native's Basic Button Component

21. Question 21 of 30

    What is the primary consequence if you forget to update your app's state within the onValueChange callback for a React Native Switch?

    • aThe application will crash due to an unhandled state inconsistency.
    • bThe Switch will visually revert to its previous state after the user interaction.
    • cThe onValueChange callback will not be triggered when the user taps the Switch.
    • dThe Switch will visually appear toggled, but its associated state variable will not change.
    Show the answer

    Answer: b · The Switch will visually revert to its previous state after the user interaction.

    The card explicitly states that if the state isn't updated, "the switch will appear to snap back to its original position." This is because the Switch's visual state is controlled by the 'value' prop, which won't change if the underlying state isn't updated. Option D is incorrect because the visual state does not persist; it reverts.

    Read the full bite: React Native's Controlled Switch Component

22. Question 22 of 30

    How does a React Native Slider typically update and display its current selected value?

    • aThe slider manages its own internal state, automatically reflecting user drags without external state updates.
    • bThe onValueChange prop directly sets the slider's value prop, triggering an immediate UI update.
    • cThe slider's position is determined by the initial value prop and does not change after the component mounts.
    • dThe onValueChange callback updates a state variable, and this state variable is then passed back to the slider's value prop.
    Show the answer

    Answer: d · The onValueChange callback updates a state variable, and this state variable is then passed back to the slider's value prop.

    The card explicitly states that the onValueChange callback must be used to update your component's state, which then re-renders the slider with its new value, making it a controlled component. Option A is a common misconception, as forgetting to update state is described as a 'footgun' and the slider does not manage its own state automatically.

    Read the full bite: React Native Slider: Selecting a Value from a Range

23. Question 23 of 30

    A ScrollView contains a TouchableOpacity. If a user touches an item and then drags, which statement accurately describes the default interaction using the Gesture Responder System?

    • aThe TouchableOpacity handles the entire gesture, and the ScrollView only responds if the touch starts outside the TouchableOpacity.
    • bBoth the ScrollView and the TouchableOpacity receive the touch event simultaneously, requiring manual conflict resolution.
    • cThe TouchableOpacity is asked first to respond to the initial touch, and if movement occurs, the ScrollView can then request to become the responder.
    • dThe ScrollView immediately intercepts the touch, preventing the TouchableOpacity from ever receiving it.
    Show the answer

    Answer: c · The TouchableOpacity is asked first to respond to the initial touch, and if movement occurs, the ScrollView can then request to become the responder.

    By default, the deepest component (TouchableOpacity) is asked first to handle the touch. However, during movement, a parent component like a ScrollView can use onMoveShouldSetResponder to request control and take over the gesture, as described in the canonical example. Option D describes the capture phase, which is not the default behavior.

    Read the full bite: The Gesture Responder System: Who Gets the Touch?

24. Question 24 of 30

    When dragging an element with PanResponder, which gestureState properties should be used to update its position based on the total distance moved from the gesture's start?

    • agestureState.numberActiveTouches
    • bgestureState.dx and gestureState.dy
    • cgestureState.moveX and gestureState.moveY
    • dgestureState.vx and gestureState.vy
    Show the answer

    Answer: b · gestureState.dx and gestureState.dy

    The card explicitly states that 'dx and dy are perfect for this because they represent the total change from where the drag started, not the absolute screen coordinates.' moveX/Y represent absolute screen coordinates, not the accumulated distance from the drag's origin.

    Read the full bite: PanResponder: The Gesture State Machine

25. Question 25 of 30

    Why can wrapping a view with TouchableOpacity silently break a parent flexbox layout?

    • aIt permanently sets the wrapped view's opacity to 0.2
    • bIt requires manual wiring of the gesture responder system
    • cIt inserts an extra Animated.View node into the component tree
    • dIt strips flex properties from the immediate child container
    Show the answer

    Answer: c · It inserts an extra Animated.View node into the component tree

    TouchableOpacity wraps its children in an Animated.View to animate dimming, and that injected node can alter flexbox sizing or spacing in ways that are not obvious from the JSX. Option A is tempting because 0.2 is the default activeOpacity value, but the dimming only occurs while the finger is pressed, not permanently.

    Read the full bite: Touchable Components in React Native

26. Question 26 of 30

    What is the most crucial step to ensure the RefreshControl spinner remains visible during a data fetch?

    • aProviding a 'key' prop to the RefreshControl component.
    • bSetting the 'refreshing' prop to true immediately when 'onRefresh' is called.
    • cNesting RefreshControl within a FlatList or ScrollView.
    • dEnsuring the data fetching logic is asynchronous.
    Show the answer

    Answer: b · Setting the 'refreshing' prop to true immediately when 'onRefresh' is called.

    The card emphasizes that RefreshControl is a controlled component; the 'refreshing' prop must be explicitly set to true at the start of the 'onRefresh' callback to keep the spinner visible during data fetching. Option C is necessary for RefreshControl to function, but not specifically for maintaining its visibility during the fetch itself.

    Read the full bite: RefreshControl: The Pull-to-Refresh Handler

27. Question 27 of 30

    What is the primary reason to choose React Native Reanimated for animations involving user gestures or heavy JS computation?

    • aIt simplifies the creation of complex animation sequences with fewer lines of code.
    • bIt ensures that all animation calculations are performed exclusively on the JavaScript thread for better debugging.
    • cIt allows animation logic to execute independently on the native UI thread, preventing stuttering.
    • dIt provides a more extensive set of pre-built animation components and effects.
    Show the answer

    Answer: c · It allows animation logic to execute independently on the native UI thread, preventing stuttering.

    The card explicitly states that Reanimated moves animation logic off the JavaScript thread onto the native UI thread, allowing animations to run smoothly at 60-120 fps even when the JS thread is busy. Option A is incorrect because the card mentions Reanimated introduces its own concepts, implying it's not always simpler, and its core benefit is performance, not code brevity.

    Read the full bite: React Native Reanimated: Off-Thread Animations

28. Question 28 of 30

    Under which circumstance would a developer most likely choose Stack Navigator over a native navigation solution?

    • aIf the app's navigation flow is entirely flat, without any hierarchical structure.
    • bWhen the application requires the absolute fastest possible screen transitions.
    • cTo ensure seamless integration with native platform-specific UI components.
    • dFor applications where a highly unique and custom navigation appearance is crucial.
    Show the answer

    Answer: d · For applications where a highly unique and custom navigation appearance is crucial.

    The card states that Stack Navigator is ideal when "having a highly custom look and feel is more important than achieving maximum performance," due to its JavaScript-based implementation allowing deep customization. Option B is incorrect because Stack Navigator trades performance for customization, and option C describes a benefit more aligned with native solutions.

    Read the full bite: Stack Navigator: JavaScript-based Screen Transitions

29. Question 29 of 30

    When is a Drawer Navigator the most appropriate choice for an app's primary navigation?

    • aFor an app with 2-4 critical, frequently accessed main sections needing constant visibility.
    • bTo display contextual options or filters that apply only to the currently viewed content.
    • cTo manage 5 or more distinct, top-level sections that don't require constant on-screen presence.
    • dWhen navigating through a series of detailed steps or sub-screens within a single feature.
    Show the answer

    Answer: c · To manage 5 or more distinct, top-level sections that don't require constant on-screen presence.

    The card states Drawer Navigators are best for "primary, app-wide navigation, especially with five or more items where a bottom tab bar would feel cluttered." Option C directly reflects this, while options A and B describe use cases for Stack and Bottom Tab Navigators, respectively.

    Read the full bite: Drawer Navigator: Your App's Slide-Out Main Menu

30. Question 30 of 30

    For which scenario would passing data via route parameters be considered an inefficient or inappropriate approach?

    • aProviding a user's unique ID to a profile screen to fetch their specific data.
    • bSending a small, temporary message to a confirmation screen after an action.
    • cDisplaying a specific product's details after a user selects it from a list.
    • dManaging a user's global authentication token that impacts multiple, unrelated parts of the application.
    Show the answer

    Answer: d · Managing a user's global authentication token that impacts multiple, unrelated parts of the application.

    The card explicitly states that route parameters are not a good fit for global state like authentication status that needs to be accessed by many unrelated screens, recommending dedicated state management instead. The other options describe appropriate uses for route parameters, where data is specific to a navigation action.

    Read the full bite: Passing Data to Routes in React Native