Top 30 Intermediate 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

   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

2. Question 2 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

3. Question 3 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

4. Question 4 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

5. Question 5 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

6. Question 6 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

7. Question 7 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

8. Question 8 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

9. Question 9 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

10. Question 10 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?

11. Question 11 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

12. Question 12 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

13. Question 13 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

14. Question 14 of 30

    What is the primary advantage of using React Navigation's useNavigation hook compared to passing navigation props?

    • aIt allows navigation logic to be easily shared and reused across different types of navigators.
    • bIt prevents the need to pass navigation objects through multiple layers of nested components.
    • cIt enables class components to access navigation functions directly without any additional wrappers.
    • dIt significantly improves application performance by reducing the number of component re-renders.
    Show the answer

    Answer: b · It prevents the need to pass navigation objects through multiple layers of nested components.

    The useNavigation hook directly addresses the problem of 'prop drilling' by allowing deeply nested components to access the navigation object without it being passed down through every parent. Option C is incorrect because the card explicitly states that hooks do not work in class components directly.

    Read the full bite: Escape Prop Drilling with React Navigation Hooks

15. Question 15 of 30

    If a React Navigation Group sets a header background color via screenOptions, and a Screen within it sets a different header background color via its options prop, which color will apply?

    • aBoth colors will be applied, resulting in a blended or combined effect.
    • bAn error will occur due to conflicting header background color definitions.
    • cThe color from the Group's screenOptions, as it defines the default for the group.
    • dThe color from the Screen's options, as it is more specific.
    Show the answer

    Answer: d · The color from the Screen's options, as it is more specific.

    Screen options take precedence over Group options for the same property, meaning the more specific setting on the individual Screen will override the broader setting from the Group. The settings merge, but specific overrides general, rather than causing an error or blending.

    Read the full bite: React Navigation: Configuring Screen Options

16. Question 16 of 30

    How are navigation actions typically processed within a nested navigator structure?

    • aThe action is immediately handled by the topmost (root) navigator in the application's hierarchy.
    • bThe action is always passed directly to the deepest nested navigator that contains the current screen.
    • cThe action is broadcast to all active navigators simultaneously, with the first one to respond taking precedence.
    • dThe action is first attempted by the currently focused navigator, then bubbles up to its parent if unhandled.
    Show the answer

    Answer: d · The action is first attempted by the currently focused navigator, then bubbles up to its parent if unhandled.

    The card states that actions are first attempted by the currently focused navigator and only bubble up to its parent if that navigator cannot handle the action. This ensures localized control and isolated state for each navigator, rather than immediate global handling.

    Read the full bite: Nested Navigators: Building Complex UI Flows

17. Question 17 of 30

    In which scenario would Native Stack Navigator be the least suitable choice for screen navigation?

    • aAn app aiming for a native look and feel on both iOS and Android.
    • bAn app prioritizing the most fluid and performant user experience.
    • cAn app that needs to display standard stack-based navigation.
    • dAn app requiring highly customized screen transition animations.
    Show the answer

    Answer: d · An app requiring highly customized screen transition animations.

    The card explicitly states to avoid Native Stack Navigator if highly customized screen transitions are needed, as its customizability is limited due to being a wrapper around native components. The other options describe scenarios where Native Stack Navigator is the recommended or default choice.

    Read the full bite: Native Stack Navigator: Native Performance, Less Customization

18. Question 18 of 30

    To execute code every time a React Native screen becomes visible after being navigated away from, which method is most appropriate?

    • aCalling a function directly within the screen's render method
    • bUsing useEffect with the screen's props as dependencies
    • cA standard useEffect hook with an empty dependency array []
    • dSubscribing to the 'focus' event using navigation.addListener
    Show the answer

    Answer: d · Subscribing to the 'focus' event using navigation.addListener

    The card states that screens remain mounted when navigated away from, so a standard useEffect with an empty dependency array (C) only runs on initial mount, not subsequent visibility changes. Subscribing to the 'focus' event (D) is the correct way to run code specifically when a screen comes into view.

    Read the full bite: React Navigation Lifecycle: Screens Don't Unmount

19. Question 19 of 30

    What is the main purpose of using a loading flag with `onEndReached` in a React Native `FlatList`?

    • aTo ensure the `onEndReached` callback only fires once per scroll session.
    • bTo adjust the `onEndReachedThreshold` dynamically based on network conditions.
    • cTo prevent redundant API calls when the user scrolls quickly near the end of the list.
    • dTo control the visibility of a loading indicator while new data is being fetched.
    Show the answer

    Answer: c · To prevent redundant API calls when the user scrolls quickly near the end of the list.

    The card explicitly states that `onEndReached` can fire multiple times, and a loading flag is used to prevent redundant API calls. While a loading flag can also control indicator visibility, its primary role in this context is to manage the 'footgun' of multiple fetches.

    Read the full bite: React Native: Infinite Scroll with onEndReached

20. Question 20 of 30

    Which scenario would most likely render React.memo ineffective for optimizing a list item component?

    • aThe parent component of the list item re-renders often, even when the item's data is unchanged.
    • bThe list item component's primitive props (e.g., strings, numbers) change frequently.
    • cThe list item component receives a new object or function reference as a prop during every parent re-render.
    • dThe list item component's internal state updates frequently, causing its own re-renders.
    Show the answer

    Answer: c · The list item component receives a new object or function reference as a prop during every parent re-render.

    React.memo performs a shallow comparison of props. If non-primitive props like objects or functions are created inline in the parent, their references will always be new, causing the shallow comparison to fail and the component to re-render every time. Option A describes the exact problem React.memo is designed to solve.

    Read the full bite: Memoizing List Items with `React.memo`

21. Question 21 of 30

    Which scenario best justifies implementing Redux in an application?

    • aWhen individual components need to manage their own isolated state efficiently.
    • bWhen a consistent, predictable way to manage complex state shared across many distant components is needed.
    • cWhen the application requires automatic UI updates without manual re-rendering calls.
    • dWhen state changes need to be directly applied by components to update the UI.
    Show the answer

    Answer: b · When a consistent, predictable way to manage complex state shared across many distant components is needed.

    The card emphasizes that Redux is for managing complex state shared across many components, providing a predictable, centralized pattern. It explicitly states Redux is overkill for simple, local component state, and state changes are handled indirectly via actions and reducers, not direct component manipulation.

    Read the full bite: Redux: A Single Source of Truth for App State

22. Question 22 of 30

    In which scenario would integrating React Redux be most advantageous for a React application?

    • aWhen replacing all instances of React's useState and useReducer hooks for state management.
    • bWhen optimizing the initial load time of the application by pre-fetching all necessary data.
    • cWhen a significant amount of application state needs to be accessed and modified by many components across the component tree.
    • dWhen managing state that is exclusively used by a single component, such as a form input's value.
    Show the answer

    Answer: c · When a significant amount of application state needs to be accessed and modified by many components across the component tree.

    React Redux is most beneficial for managing shared application state that many components need, preventing 'prop drilling.' It is explicitly not recommended for truly local component state, which is better handled by React's built-in hooks.

    Read the full bite: React Redux: Connecting Components to a Global Store

23. Question 23 of 30

    Which feature of Redux Toolkit (RTK) significantly simplifies writing Redux reducers and ensures state immutability?

    • aIt replaces the Redux store with a mutable global object, simplifying state management by allowing direct assignments.
    • bThe createSlice function, which allows writing "mutating" state logic that Immer converts into immutable updates.
    • cIt automatically generates all necessary asynchronous action logic, eliminating the need for manual async handling.
    • dIt removes the need for action types and action creators, enabling direct function calls to modify state.
    Show the answer

    Answer: b · The createSlice function, which allows writing "mutating" state logic that Immer converts into immutable updates.

    RTK's createSlice function is central to simplifying reducers; it automatically generates action creators and types, and crucially, it allows developers to write seemingly mutable state updates within reducers, which Immer then correctly translates into immutable operations. Option D is incorrect because RTK generates action creators and types; it doesn't remove their underlying concept.

    Read the full bite: Redux Toolkit: The Opinionated Way to Write Redux

24. Question 24 of 30

    Which statement best describes a key advantage of Jotai's atomic state model in React Native?

    • aIt automatically manages complex asynchronous data flows and side effects without additional middleware.
    • bIt consolidates all application state into a single, immutable global object, simplifying debugging.
    • cIt allows components to subscribe only to the specific, small pieces of state they require, reducing unnecessary re-renders.
    • dIt replaces React's built-in Context API and useState hook for all state management needs, regardless of complexity.
    Show the answer

    Answer: c · It allows components to subscribe only to the specific, small pieces of state they require, reducing unnecessary re-renders.

    Jotai's atomic model ensures that "Each component subscribes only to the specific atoms it needs, which minimizes re-renders," directly supporting option C. Option B describes a monolithic state approach, which Jotai explicitly avoids by treating state as "tiny, independent 'atoms'" rather than "one giant store."

    Read the full bite: Jotai for React Native: Atomic State, Native Performance

25. Question 25 of 30

    What is the primary problem TanStack Query addresses in React Native applications?

    • aThe difficulty in managing local component state and form inputs efficiently.
    • bThe need for a unified state management solution for all client-side data.
    • cProviding a global store for application-wide client state, similar to Redux.
    • dThe complexity of manually handling data fetching, caching, and synchronization with a backend.
    Show the answer

    Answer: d · The complexity of manually handling data fetching, caching, and synchronization with a backend.

    TanStack Query was built to automate the 'messy parts of data fetching—loading states, errors, background updates, and invalidation' for server-side data. It is not intended for managing all client-side state or local component state.

    Read the full bite: TanStack Query: Manage Server State, Not Client State

26. Question 26 of 30

    How do Axios request and response interceptors differ in their execution order?

    • aRequest interceptors run last-in, first-out (LIFO), while response interceptors run first-in, first-out (FIFO).
    • bBoth request and response interceptors execute in a last-in, first-out (LIFO) manner.
    • cRequest interceptors run first-in, first-out (FIFO), while response interceptors run last-in, first-out (LIFO).
    • dBoth request and response interceptors execute in a first-in, first-out (FIFO) manner.
    Show the answer

    Answer: a · Request interceptors run last-in, first-out (LIFO), while response interceptors run first-in, first-out (FIFO).

    The card explicitly states that request interceptors are LIFO (Last-In, First-Out), meaning the last one added runs first. Conversely, response interceptors are FIFO (First-In, First-Out), running in the order they were added, making option A correct.

    Read the full bite: Axios Interceptors: Middleware for Your API Calls

27. Question 27 of 30

    When using FormData with `fetch` for a file upload, what is the correct approach for the `Content-Type` header?

    • aSet it to text/plain if only a single file is being uploaded.
    • bManually set it to multipart/form-data with a boundary string.
    • cOmit the header, allowing `fetch` to automatically configure it.
    • dManually set it to application/json if text fields are included.
    Show the answer

    Answer: c · Omit the header, allowing `fetch` to automatically configure it.

    The card explicitly states that when a FormData object is passed as the body of a fetch request, the runtime automatically sets the Content-Type header with a unique boundary identifier. Manually setting this header, especially to 'multipart/form-data' (a tempting distractor), would override this crucial automatic behavior and likely cause the upload to fail.

    Read the full bite: FormData: The Right Way to Upload Files

28. Question 28 of 30

    What is the main benefit of using AbortController when managing fetch requests in a dynamic web application?

    • aIt prevents resource waste and potential UI inconsistencies by stopping fetch requests that are no longer relevant.
    • bIt ensures that all fetch requests complete their execution, even if the user navigates away from the page.
    • cIt allows for automatic retries of fetch requests that encounter temporary network failures.
    • dIt provides a standardized way to handle all types of DOMException errors thrown by fetch.
    Show the answer

    Answer: a · It prevents resource waste and potential UI inconsistencies by stopping fetch requests that are no longer relevant.

    The primary benefit of AbortController is to cancel fetch requests that are no longer relevant, which saves network bandwidth and CPU cycles, and prevents the UI from being updated with stale data. It does not guarantee completion, provide automatic retries, or standardize handling for all DOMException errors.

    Read the full bite: AbortController: Stop Fetch Requests You No Longer Need

29. Question 29 of 30

    What is the primary advantage GraphQL offers to client applications compared to traditional REST APIs?

    • aIt automatically optimizes database queries to prevent the N+1 problem.
    • bIt enables clients to fetch specific data requirements in a single request, reducing over-fetching.
    • cIt guarantees real-time data synchronization across all connected clients.
    • dIt simplifies server-side development by removing the need for resolvers.
    Show the answer

    Answer: b · It enables clients to fetch specific data requirements in a single request, reducing over-fetching.

    The card highlights that GraphQL gives clients "the power to request exactly the data they need in a single call," thereby avoiding over-fetching and under-fetching. Option A is incorrect because the card explicitly warns to "beware of the N+1 problem," indicating it's a potential issue, not automatically solved.

    Read the full bite: GraphQL: Ask for Exactly What You Need

30. Question 30 of 30

    To achieve a visually identical shadow effect on a component across both iOS and Android, which React Native styling approach is most appropriate?

    • aUtilizing the boxShadow prop.
    • bApplying shadowColor, shadowOffset, shadowOpacity, and shadowRadius together.
    • cSetting the elevation prop.
    • dUsing the dropShadow prop.
    Show the answer

    Answer: a · Utilizing the boxShadow prop.

    The card explicitly states that 'boxShadow' should be used 'when you need a capable, cross-platform shadow.' The 'shadowOffset, shadowOpacity, and shadowRadius' props are iOS-only, making them unsuitable for identical cross-platform effects. 'dropShadow' is Android-only, and 'elevation' is primarily for Android.

    Read the full bite: React Native: Navigating Platform-Specific Shadow Styles