Top 30 Easy React Native Concepts Quiz for Beginners

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

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

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

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

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

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

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

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

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

13. Question 13 of 30

    What is the primary mechanism FlatList uses to ensure smooth performance with long lists on mobile devices?

    • aIt compresses the data prop and individual item components to reduce memory usage.
    • bIt automatically caches the results of renderItem calls to avoid re-executing them for identical data.
    • cIt renders all list items immediately but off-screen, then quickly displays them as needed.
    • dIt maintains a small "render window" of items, mounting and unmounting components as the user scrolls.
    Show the answer

    Answer: d · It maintains a small "render window" of items, mounting and unmounting components as the user scrolls.

    FlatList's core performance optimization is virtualization, which means it only renders a limited "window" of items that are currently visible or near the viewport. Option C is incorrect because rendering all items, even off-screen, would still consume excessive memory, which FlatList aims to prevent.

    Read the full bite: FlatList: Performant Virtualized Lists in React Native

14. Question 14 of 30

    What common 'footgun' can prevent a SectionList from re-rendering when its display logic depends on external state changes?

    • aNot passing the external state that influences rendering to the extraData prop.
    • bForgetting to provide a unique keyExtractor for each item in the sections.
    • cModifying the data array within a section directly instead of creating a new array reference.
    • dSectionList only re-renders when the entire component tree above it is re-rendered.
    Show the answer

    Answer: a · Not passing the external state that influences rendering to the extraData prop.

    The card explicitly states that SectionList is a PureComponent and will only re-render on prop changes. If rendering logic depends on state outside the list data, that state must be passed to the extraData prop to force an update, otherwise it's a common 'footgun'. While modifying data in place (option C) can also cause issues, the card specifically highlights extraData for external state dependencies.

    Read the full bite: SectionList: Displaying Grouped Data Efficiently

15. Question 15 of 30

    In which scenario is props drilling generally considered the most appropriate approach in a React application?

    • aWhen a child component needs to directly modify the state of a distant ancestor.
    • bWhen a component needs to access global application state.
    • cTo optimize performance by preventing unnecessary re-renders of intermediate components.
    • dFor passing data to a component that is only a few levels deep in the component tree.
    Show the answer

    Answer: d · For passing data to a component that is only a few levels deep in the component tree.

    Props drilling is recommended for shallow component trees (typically 2-3 levels deep) because it keeps data flow explicit and easy to trace. It does not prevent re-renders of intermediate components, nor is it designed for global state management or modifying ancestor state directly.

    Read the full bite: Props Drilling: Passing Data Through Components

16. Question 16 of 30

    When is the React Context API most effectively utilized in an application?

    • aTo manage local state within a single component that doesn't need to be shared.
    • bAs a performance optimization tool to prevent unnecessary component re-renders.
    • cWhen data needs to be shared across many components at different nesting levels without explicit prop passing.
    • dFor handling complex state logic and frequent updates in large-scale applications.
    Show the answer

    Answer: c · When data needs to be shared across many components at different nesting levels without explicit prop passing.

    The Context API is designed to solve 'prop drilling' by providing a direct channel for data needed in many places at different levels, such as app-wide settings or user authentication. Option D is incorrect because the card advises against using Context for frequently changing or complex state, recommending dedicated state management libraries instead.

    Read the full bite: React Context API: Avoid Prop Drilling

17. Question 17 of 30

    When is useReducer generally preferred over useState for managing component state?

    • aWhen a component needs to manage a simple boolean flag, like a toggle.
    • bWhen the component's state needs to be accessible globally across the application.
    • cWhen state logic involves multiple interdependent sub-values or complex transitions.
    • dWhen state updates are always direct assignments, such as setting a user's name.
    Show the answer

    Answer: c · When state logic involves multiple interdependent sub-values or complex transitions.

    useReducer is specifically designed for complex state logic, particularly when state has many sub-values or when the next state depends on the previous one. For simple, independent state values, useState is more appropriate and less verbose.

    Read the full bite: useReducer: Manage Complex State with Predictable Actions

18. Question 18 of 30

    Which statement accurately describes a crucial aspect of error handling when using React Native's fetch API?

    • afetch only throws errors for server-side issues, not for network connectivity problems.
    • bIt is essential to explicitly catch fetch errors, as they otherwise fail silently.
    • cErrors in fetch operations are always logged to the console by default.
    • dfetch automatically retries failed requests before reporting an error.
    Show the answer

    Answer: b · It is essential to explicitly catch fetch errors, as they otherwise fail silently.

    The card explicitly states, 'The footgun: always catch errors, or they will fail silently.' This emphasizes the critical need for explicit error handling with `fetch` to prevent issues from going unnoticed. Other options describe features not inherent to `fetch` or misrepresent its error handling behavior.

    Read the full bite: React Native: Making Network Requests with Fetch

19. Question 19 of 30

    What is a key advantage of using Axios for HTTP requests compared to the native fetch API?

    • aIt automatically handles all network connection issues without requiring error handling code.
    • bIt is exclusively designed for server-side Node.js applications, unlike fetch.
    • cIt consistently rejects Promises for HTTP error status codes like 404 or 500.
    • dIt offers a synchronous API, simplifying data retrieval without async/await.
    Show the answer

    Answer: c · It consistently rejects Promises for HTTP error status codes like 404 or 500.

    The card explicitly states that 'fetch doesn't automatically reject on HTTP error codes like 404 or 500,' whereas Axios provides 'better error handling' by consistently rejecting in such scenarios. Other options misrepresent Axios's asynchronous nature, error handling scope, or environment compatibility.

    Read the full bite: Axios: A Simpler Way to Make HTTP Requests

20. Question 20 of 30

    Why is SafeAreaView no longer recommended for new React Native projects?

    • aIt introduced significant performance overhead in complex layouts.
    • bIt was designed only for iOS and lacked support for Android devices.
    • cIt is officially deprecated in favor of a more robust, cross-platform library.
    • dIt required developers to manually specify all safe area dimensions.
    Show the answer

    Answer: c · It is officially deprecated in favor of a more robust, cross-platform library.

    The card explicitly states that SafeAreaView is 'officially deprecated' and that the 'core team now recommends the react-native-safe-area-context library, which offers more granular control, works on both iOS and Android.' Option D is incorrect because SafeAreaView's primary function was to automatically apply padding, not require manual specification.

    Read the full bite: SafeAreaView: Avoid Notches and Status Bars (Deprecated)

21. Question 21 of 30

    For which scenario would ActionSheetIOS be an unsuitable choice?

    • aDisplaying a menu that needs to function identically on both iOS and Android.
    • bInvoking the native iOS share dialog for content sharing.
    • cPresenting a menu to confirm a user's deletion of an item.
    • dOffering options to select a photo source (camera or library).
    Show the answer

    Answer: a · Displaying a menu that needs to function identically on both iOS and Android.

    ActionSheetIOS is an iOS-specific API and will crash on Android, making it unsuitable for cross-platform menus requiring consistent UI. The other options describe appropriate use cases for ActionSheetIOS.

    Read the full bite: ActionSheetIOS: Native iOS Action Menus

22. Question 22 of 30

    What is the primary reason React Native uses Animated.Value for animations?

    • aTo automatically adjust component layouts during complex transitions.
    • bTo allow synchronous access to the animation's current progress.
    • cTo simplify state management for non-animated UI property changes.
    • dTo ensure animations run smoothly by offloading them to the native UI thread.
    Show the answer

    Answer: d · To ensure animations run smoothly by offloading them to the native UI thread.

    Animated.Value is designed to offload animation logic from the JavaScript thread to the native UI thread, which ensures smooth, 60 FPS animations even under heavy JS workload. Conversely, it's explicitly stated that you cannot read its value synchronously, making that option incorrect.

    Read the full bite: Animated.Value: The Driver for React Native Animations

23. Question 23 of 30

    What is the main advantage of including "useNativeDriver: true" in React Native's Animated API configuration?

    • aIt ensures the animation runs on the native thread, preventing the JavaScript thread from blocking UI updates.
    • bIt automatically selects the most performant animation curve and duration for the target device.
    • cIt enables the animation to be seamlessly integrated with complex gesture handlers like PanResponder.
    • dIt allows the component to update its styles without triggering a full React re-render for each animation frame.
    Show the answer

    Answer: a · It ensures the animation runs on the native thread, preventing the JavaScript thread from blocking UI updates.

    The card states that "useNativeDriver: true" keeps animations smooth by running them off the JavaScript thread, thus preventing blockages from a busy JS thread. While the Animated API generally avoids React re-renders (Option D), "useNativeDriver" specifically moves the animation execution to the native thread for enhanced performance and smoothness.

    Read the full bite: Animated: Drive Styles with Values, Not Setters

24. Question 24 of 30

    Which animation property cannot be directly controlled by useNativeDriver: true in React Native?

    • aopacity
    • bheight
    • ctranslateX
    • drotate
    Show the answer

    Answer: b · height

    The card states that useNativeDriver cannot animate properties that affect layout, such as 'height'. It is limited to 'transform' properties (like 'translateX' and 'rotate') and 'opacity'.

    Read the full bite: useNativeDriver: Offload Animations from the JS Thread

25. Question 25 of 30

    A unified permissions library in React Native primarily offers what benefit, and what critical setup step is often overlooked?

    • aIt bypasses the need for user consent, but adds significant overhead to app startup time.
    • bIt simplifies cross-platform permission requests with a single API, but demands specific native project file configurations.
    • cIt automatically handles all permission prompts, but necessitates separate UI components for iOS and Android.
    • dIt allows direct hardware control from JavaScript, but requires manual permission checks in your app's logic.
    Show the answer

    Answer: b · It simplifies cross-platform permission requests with a single API, but demands specific native project file configurations.

    The card emphasizes that a unified permissions library provides a single JavaScript API to manage platform-specific requests, and explicitly states that configuring native project files (e.g., Podfile) is a crucial step. Option D is incorrect because the library bridges to native, not allowing direct JS hardware control, and it simplifies checks rather than requiring manual ones.

    Read the full bite: Handling Permissions in React Native

26. Question 26 of 30

    What is a key limitation when using React Native's Share API?

    • aIt cannot provide reliable confirmation if a user successfully shared content on Android.
    • bIt forces the app to open a web browser instead of the native share sheet.
    • cIt is only capable of sharing URLs, not plain text messages.
    • dIt requires developers to implement separate sharing logic for iOS and Android.
    Show the answer

    Answer: a · It cannot provide reliable confirmation if a user successfully shared content on Android.

    The card states that "on Android, it always resolves with Share.sharedAction, regardless of whether the user shared or backed out," indicating it cannot reliably confirm a successful share. The API is designed for cross-platform use with a single method call, making option D incorrect.

    Read the full bite: React Native's Share API: Use the Native Share Sheet

27. Question 27 of 30

    Which scenario best illustrates the appropriate use of React Native's Performance Monitor?

    • aPerforming a final performance audit before submitting an app to the app store.
    • bBenchmarking an app's performance across various Android device models.
    • cQuickly confirming a suspicion of UI jank during development.
    • dConducting a detailed memory leak analysis in a complex module.
    Show the answer

    Answer: c · Quickly confirming a suspicion of UI jank during development.

    The Performance Monitor is a quick, in-app guide for immediate feedback during development to confirm suspected issues like UI jank. It is explicitly not for accurate measurements, deep analysis, or final profiling before release, which require native tools.

    Read the full bite: React Native's Performance Monitor Overlay

28. Question 28 of 30

    What is the primary reason Flipper is not recommended for new React Native projects?

    • aThe project has been archived and is no longer actively maintained.
    • bIt requires complex manual configuration for every new project.
    • cIt introduces significant performance overhead to the application.
    • dIts core debugging features are now integrated directly into Metro.
    Show the answer

    Answer: a · The project has been archived and is no longer actively maintained.

    The card explicitly states that Flipper's repository is archived and no longer maintained, making it unsuitable for new projects due to potential future compatibility issues. Other options are not supported by the card's content; for example, Flipper was integrated by default in RN 0.62+.

    Read the full bite: Flipper: A Desktop Debugger for React Native

29. Question 29 of 30

    How does Jest primarily test React Native components without a physical device?

    • aBy executing the component's JavaScript logic in a Node.js environment.
    • bBy simulating full user interactions across the entire application flow.
    • cBy compiling and running the native module code (Java/Objective-C) in isolation.
    • dBy rendering the component's UI on a virtual screen to check pixel accuracy.
    Show the answer

    Answer: a · By executing the component's JavaScript logic in a Node.js environment.

    The card states Jest runs component JavaScript code in a Node.js environment, mocking native components. It does not render pixels, perform E2E tests, or test native module implementations.

    Read the full bite: Unit Testing React Native Components with Jest

30. Question 30 of 30

    What is the primary reason for archiving a React Native iOS application?

    • aTo quickly rebuild the JavaScript bundle without recompiling native code.
    • bTo generate an optimized, self-contained package for App Store submission.
    • cTo enable hot reloading and developer menus for efficient debugging.
    • dTo test new features on any connected physical iOS device.
    Show the answer

    Answer: b · To generate an optimized, self-contained package for App Store submission.

    Archiving creates an optimized, standalone package suitable for public distribution to the App Store or TestFlight, as it bundles JavaScript locally and disables developer tools. Options like hot reloading or developer menus are features of debug builds, not archived release builds.

    Read the full bite: Archiving a React Native iOS App for Release