React Native Ultimate Interview Guide

Discover how React Native, a JavaScript based hybrid framework built on React fundamentals, enables cross-platform app development for Android and iOS by rendering native UI components with native performance.

Compare native and React Native apps by detailing native tech stacks (Android uses Java or Kotlin; iOS uses Swift or Objective-C) and their access to platform capabilities. Explain how React Native enables 80 to 85 percent code sharing across Android and iOS via JavaScript or TypeScript, with an asynchronous bridge affecting performance.

Discusses advantages and disadvantages of React Native, highlighting code that is shared across platforms, deployment to Google Play Store and Apple App Store, and faster development with hot reloading.

Suggest React Native to clients for cost effective development and a single code base that deploys to Android and iOS, reducing costs with multi-platform releases and minor performance trade-offs.

Discover how a basic React Native app runs on three threads (UI, JavaScript, and background) and how they communicate via bridge, with emphasis on performance, batching, and frame timing.

Explore the React component lifecycle across mounting, updating, and unmounting, including constructor, componentDidMount, render, componentDidUpdate, and componentWillUnmount for class-based components. They apply to class-based components, a frequent interview topic.

The virtual dom is a lightweight in-memory representation of the actual dom that improves React Native UI performance by reconciling and updating only the changed nodes.

Explore how JSX extends JavaScript with HTML-like elements to declare React Native component structure and map JSX to native views via the view manager on iOS and Android.

Explain how props pass data from parent to child in React Native and how state maintains and updates a component when users interact.

Explain controlled and uncontrolled components in React Native, showing how parent components manage state with props and callbacks versus internal state and refs, with practical contrasts.

Differentiate a React element from a component: an element is the object returned by a component, while a component is its template. Functional components return elements; class components render elements.

A higher order component is a function that takes a component and returns an enhanced component, enabling patchwork of shared functionality that reduces prop drilling and improves readability and maintainability.

Understand prop drilling as passing props through a component hierarchy from a parent to a deeply nested child, a pattern that causes unnecessary rerendering and sluggish UI in React Native.

Learn to avoid prop drilling in React Native by using the context API, higher-order components, or Redux, with a username context provider and grandchild access.

Explore invoking a parent function from a child in React Native by passing a callback prop and calling it on data change, connecting child events to the parent.

Implement a simple increment and decrement counter in React Native using a state variable with useState, through a hands-on coding exercise in snack.expo.dev.

Explore how hooks manage state, lifecycle, and side effects in functional components without classes, with useState, useEffect, useContext, useReducer, useCallback, useMemo, and useRef.

Compare use state and use reducer hooks for state management in functional components; use state for simple, single-state updates, while use reducer handles complex, structured state with dispatch.

Compare usememo and usecallback hooks for performance: usememo memoizes a value with dependencies; usecallback memoizes a function to avoid recreating it on render.

Explore the useEffect hook in React Native to run side effects, fetch data asynchronously via API calls, and emulate lifecycle behavior in functional components.

Learn how the second parameter array in useEffect controls rerendering by comparing dependencies. Explore empty, specific, and no dependency scenarios, including data fetch and potential performance issues.

Create reusable custom hooks in React Native by combining useState and useEffect, following the use prefix naming convention, exemplified by a fetch data hook that returns data and loading state.

Learn how to clear side effects in functional components by returning a cleanup function from useEffect, mirroring componentWillUnmount and ensuring timeout and resource cleanup.

Flexbox is a UI layout system in React Native for creating interfaces. Use the flex property to allocate space from 0 to 1 and control with justifyContent, alignItems, and flexDirection.

Discover that the default flex direction in React Native is column, which vertically stacks UI elements on mobile screens. Compare how React JS uses row as the default flex direction.

Learn how to style React Native components using the style prop, including inline styles, separate StyleSheet, CSS modules, and theming with styled components, with examples of reuse and flexbox basics.

Practice flexbox UI styling in React Native by aligning color bars using flex direction, justify content, align items, and align self to create horizontal, centered, and multi-row layouts.

Learn how to use the React Native dimensions API to obtain device width and height, detect orientation, and adapt layouts for multiple screen sizes.

Apply iOS and Android styles in React Native with platform API, platform OS, and platform select at runtime, and organize separate iOS and Android style sheets for readability and maintainability.

Route between screens in React Native with the React Navigation stack navigator to manage a back stack (LIFO), enabling home to detail transitions and back navigation.

Navigate between screens in React Native using the navigate function via the use navigation hook to access the navigation object and pass the route name, such as details.

Pass parameters between screens in React Native by sending them as the second argument to navigation.navigate, then access them in the destination via route.params.

Learn how to combine navigators in React Native by nesting a stack navigator inside a bottom tab navigator, with home and profile tabs under a navigation container.

Redux is a central state management library for React Native that handles application level state across screens, updating global data like the cart count.

Explore the Redux architecture and unidirectional data flow, detailing the four building blocks—store, actions, reducer, and dispatcher—and how views dispatch actions to update application state.

Identify the store as the single source of truth in redux and explain that it holds the application's latest state, updated only by dispatching actions from components.

Learn how to interact with the Redux store using use selector hook and use dispatch hook: fetch data from the store, subscribe to state changes, and dispatch actions to update the count.

Explain that you can have multiple stores in a React Native app, though it is not common, and use Redux, saga, or Redux Observable to manage stores when needed.

Understand how Redux middleware sits between dispatch and the store to modify and log actions, enabling asynchronous operations, with a focus on Redux Thunk and Redux Saga.

Compare takeEvery and takeLatest in redux-saga: takeEvery runs multiple saga instances in parallel, while takeLatest cancels previous tasks to run only the latest action.

Compare Redux Thunk and Redux Saga to understand how each middleware handles asynchronous logic outside of components. Redux Thunk dispatches thunks for simple async tasks like API calls, while Redux Saga uses ES6 generator functions to manage complex flows, cancellations, and isolated testing.

Learn how generator functions in JavaScript produce a sequence of values one at a time using yield and the next method, with execution suspended between yields.

Use the yield keyword in Redux saga to pause a generator until an API call resolves, then dispatch a fetch success action with the result.

Redux Toolkit streamlines state creation and management in React Native apps with libraries and tools, as the latest Redux Toolkit solution, addressing store configuration, package bloat, and boilerplate.

Explore the core building blocks of Redux Toolkit, including create slice, configure store, create async thunk, and entity adapter, illustrated by a counter slice in a React Native app.

Learn how to make API calls in React Native using fetch and Axios with async functions, try/catch error handling, and response JSON parsing. Understand differences between get and post requests.

Compare fetch, a built-in JavaScript function, with Axios, a popular third-party library, for HTTP requests. Offer automatic request/response transformation, easy error handling, cancellations, and broader browser support via Axios.

Learn how to make concurrent api calls in React Native using Promise.all, fetch or axios, by issuing multiple requests from a urls array and awaiting all responses.

Learn to handle long running API calls in React Native by combining set timeout with a loading indicator, canceling slow requests, and using Axios timeout to improve user experience.

Use the flatlist component to display a list of items in React Native; it lazily renders only visible items, improving performance, with data state and render item.

Understand how the keyExtractor prop in FlatList provides a unique key for each data item, enabling React to track items and optimize rendering for better performance.

Fetch data from a server in React Native using API calls with fetch inside useEffect, store results with useState, and display first name, last name, and email in a FlatList.