Top 30 Intermediate React Native Interview Questions and Answers

Question 1

Why does a 200ms synchronous data mapping on a React Native screen freeze interactive components like TouchableOpacity?

Accepted Answer

It monopolizes the JavaScript thread, so batched native updates and queued touch events cannot be processed.

Answer

The mapping executes on the native UI main thread, blocking rendering and touch handling for 12 frames.

Answer

The native main thread stalls waiting for the JavaScript mapping to complete before it can render updates.

Answer

React.memo cannot prevent reconciliation because the mapping creates new references, forcing expensive re-renders that exceed the 16.67ms frame budget.

Question 2

In React Native, what is the default flexDirection, and how does it compare to the web?

Accepted Answer

Default is column, which differs from the web's default of row

Answer

Default is row, the same as the web's CSS default

Answer

There is no default; flexDirection must always be set explicitly

Answer

Default is row-reverse to support right-to-left languages

Question 3

For a parent View with flexDirection column, which statement about alignItems and justifyContent is correct?

Accepted Answer

justifyContent aligns children along the vertical main axis and alignItems along the horizontal cross axis

Answer

Both properties control the same axis and are interchangeable in column layouts

Answer

justifyContent centers children horizontally and alignItems centers them vertically

Answer

alignItems only affects the first child while justifyContent affects the rest

Question 4

When you set position absolute on a child View in React Native, relative to what are its top and left offsets measured?

Accepted Answer

Its nearest positioned ancestor, typically the parent View

Answer

The previous sibling element in the layout flow

Answer

The root navigation container only

Answer

The entire device screen, regardless of where the view sits in the tree

Question 5

To render a View as a perfect circle of width and height 80 with centered text, which combination is correct?

Accepted Answer

borderRadius 40 with justifyContent center and alignItems center on the parent

Answer

borderRadius 80 with only alignItems center on the parent

Answer

borderRadius 20 with textAlign center on the child only

Answer

borderRadius 40 with flexDirection row and no alignment set

Question 6

Using a single state object for a form, what is the correct way to update just the email field on change?

Accepted Answer

Call setForm(prev => spreading prev and overriding email) to preserve other fields immutably

Answer

Mutate form.email directly then call setForm(form)

Answer

Create a separate useState for email after all to avoid spreading

Answer

Call setForm with an object containing only the email key

Question 7

What is the practical difference between onStartShouldSetResponder and onMoveShouldSetResponder?

Accepted Answer

Start claims the touch immediately on contact, while Move lets a view claim it only after the finger moves, distinguishing taps from drags

Answer

Start handles taps and Move handles keyboard events

Answer

They are aliases and behave identically

Answer

Move fires before Start to give children priority over parents

Question 8

Why is keyboardShouldPersistTaps set to handled often preferred for a form inside a ScrollView?

Accepted Answer

It keeps the keyboard up when a child handles the tap, so buttons respond on the first tap, but dismisses it on background taps

Answer

It disables scrolling entirely while the keyboard is open

Answer

It is the same as keyboardDismissMode and controls scroll-based dismissal

Answer

It forces every tap to dismiss the keyboard before reaching children

Question 9

Why is conditionally rendering separate auth and app stacks preferred over calling navigation.navigate after login?

Accepted Answer

State drives which screens exist, so the old stack is unmounted and unreachable

Answer

It avoids needing to persist the auth token anywhere

Answer

It lets back navigation return to the login screen for convenience

Answer

navigate is deprecated in modern React Navigation versions

Question 10

Why does a useEffect with an empty dependency array fail to refetch when the user returns to a stacked screen?

Accepted Answer

The screen remains mounted, so the effect runs only once on first mount

Answer

React Navigation strips effects from non-focused screens

Answer

Empty dependency arrays disable the effect entirely in React Native

Answer

useEffect callbacks are blocked while a screen is unfocused

Question 11

Which approach correctly navigates from an Axios interceptor that runs outside any React component?

Accepted Answer

Use a navigationRef passed to NavigationContainer and call navigate after isReady

Answer

Store navigation in a module variable captured during the last render

Answer

Import the navigation prop from the nearest screen file

Answer

Call useNavigation inside the interceptor function

Question 12

You need a header title that updates live as the user edits a text field held in component state. What should you use?

Accepted Answer

navigation.setOptions inside useLayoutEffect with the state as a dependency

Answer

The static options object on the Screen, reading the state value

Answer

The route.params object, mutating it on each keystroke

Answer

screenOptions on the navigator with the state passed in

Question 13

Blank cells appear during fast scrolling of fixed-height rows. Which single change most directly reduces the blanks?

Accepted Answer

Provide getItemLayout so FlatList positions cells without measuring them

Answer

Wrap the whole list in a ScrollView

Answer

Remove keyExtractor to let React reuse rows freely

Answer

Set windowSize to a very large number so all rows stay mounted

Question 14

A FlatList row should highlight when an external selectedId state changes, but nothing updates. What is the correct fix?

Accepted Answer

Pass selectedId to the extraData prop so FlatList re-evaluates its rows

Answer

Remove React.memo from the row component

Answer

Wrap the FlatList in another FlatList to force updates

Answer

Mutate the data array in place whenever selectedId changes

Question 15

Why does infinite scroll often load the same page multiple times, and how is it prevented?

Accepted Answer

onEndReached can fire repeatedly during a scroll; an in-flight loading guard prevents overlapping fetches

Answer

Increasing onEndReachedThreshold to 1 eliminates duplicate loads

Answer

FlatList caches pages, so duplicates come from the server only

Answer

onEndReached only fires once, so the bug is impossible

Question 16

For a chat list mixing 60px text and 220px image rows, what makes scrollToIndex land accurately and reduce blanks?

Accepted Answer

A getItemLayout that returns each row's true length and precomputed cumulative offset

Answer

Setting onEndReachedThreshold higher

Answer

Disabling virtualization so all rows are measured at once

Answer

Returning a constant average height from getItemLayout for all rows

Question 17

A component reading only user.name re-renders on every theme toggle from a combined context. What fixes it?

Accepted Answer

Split theme and user into separate contexts so the consumer subscribes only to what it uses

Answer

Read the context value with useState instead of useContext

Answer

Wrap the component in React.memo to block the re-render

Answer

Move the component higher in the tree, above the Provider

Question 18

Which action inside a Redux reducer violates its core principles?

Accepted Answer

Calling an API and dispatching based on the response from within the reducer

Answer

Leaving the state unchanged for an unrecognized action type

Answer

Computing the next state purely from the current state and the action

Answer

Returning a new object that spreads the old state with one changed field

Question 19

Why must asynchronous API calls live in middleware rather than directly inside a Redux reducer?

Accepted Answer

Reducers must remain pure and synchronous, returning new state without side effects

Answer

Middleware runs faster than reducers because it executes on a background thread

Answer

Reducers cannot access the action payload needed for network requests

Answer

Async calls inside reducers would bypass the Redux DevTools logging entirely

Question 20

What architectural difference lets Zustand expose store state without wrapping the component tree in a Provider?

Accepted Answer

It stores state in a module-level closure that the generated hook reads from directly

Answer

It relies on Redux under the hood and inherits its global store automatically

Answer

It mutates the React fiber tree directly so no subscription mechanism is needed

Answer

It uses React Context internally but hides the Provider behind a higher-order component

Question 21

Why should an automatic retry-with-backoff strategy generally exclude HTTP 4xx responses?

Accepted Answer

4xx indicates a flawed request, so repeating it unchanged will keep failing

Answer

4xx responses are always returned faster than the retry timer can fire

Answer

4xx errors are network-layer failures that backoff cannot influence

Answer

Retrying 4xx requests violates the HTTP specification and is rejected by servers

Question 22

What bug occurs if a request interceptor injects a header but forgets to return the config object?

Accepted Answer

Axios sends the request with an undefined config, likely throwing or losing all options

Answer

Axios silently skips the interceptor and sends the original request unchanged

Answer

The header is added twice, duplicating the Authorization value

Answer

The response interceptor runs before the request interceptor to compensate

Question 23

Beyond saving bandwidth, what subtle bug does aborting a stale fetch on navigation prevent?

Accepted Answer

A slower earlier response overwriting newer data, a race condition

Answer

The AbortController leaking memory by holding the component reference forever

Answer

The signal blocking all future requests from that component instance

Answer

fetch automatically retrying the cancelled request on the next screen

Question 24

What problem common to REST does a GraphQL query directly solve when a screen needs only a few fields from related resources?

Accepted Answer

Over-fetching and multiple round trips, by returning exactly the requested fields in one request

Answer

Client-side caching, which REST APIs are technically incapable of supporting

Answer

Type safety, because REST responses can never be validated against a schema

Answer

The need for authentication, since GraphQL endpoints are public by design

Question 25

Which scenario most strongly favors platform-specific files over a Platform.OS check inside one component?

Accepted Answer

One platform imports a native module that does not exist on the other

Answer

You want to toggle a boolean flag based on the OS at runtime

Answer

You are adjusting one color shade for iOS versus Android

Answer

You need to change a single padding value between platforms

Question 26

What mistake can occur when comparing Platform.Version directly with a numeric operator on iOS?

Accepted Answer

iOS returns the version as a string, so a numeric comparison may behave unexpectedly without parsing

Answer

iOS returns a Date object that cannot be compared at all

Answer

Platform.Version is undefined on iOS, throwing a runtime error

Answer

iOS reports the Android API level by mistake, giving a wrong number

Question 27

You want a card to fade in and scale up at the same time as a single visual entrance. Which composition helper fits, and why not the other?

Accepted Answer

Animated.parallel, because it starts both the opacity and scale animations simultaneously

Answer

Animated.sequence, because it groups related animations together

Answer

Animated.stagger, because it guarantees both finish at the same instant

Answer

Animated.delay, because it synchronizes the two values

Question 28

Why can Reanimated keep a gesture-driven animation smooth even when the JavaScript thread is busy, while the legacy Animated API often cannot?

Accepted Answer

Reanimated runs the animation logic as worklets on the UI thread instead of round-tripping through the JS bridge

Answer

Reanimated renders to a separate GPU process unavailable to Animated

Answer

The legacy Animated API never uses the native side at all

Answer

Reanimated disables the JavaScript thread during animations

Question 29

In Reanimated, what is the correct way to animate a component when a shared value should move to a new target?

Accepted Answer

Assign sharedValue.value to withTiming or withSpring of the target inside an event handler

Answer

Call setState with the new target and let useAnimatedStyle pick it up

Answer

Read sharedValue.value during render and pass it into useState

Answer

Replace the shared value object with a new useSharedValue call

Question 30

Why is mapping scroll position to an Animated.Value via Animated.event with useNativeDriver preferable to reading contentOffset in a JS onScroll handler and calling setState?

Accepted Answer

Animated.event with the native driver updates the value on the native side each frame, avoiding per-frame bridge traffic and re-renders

Answer

Animated.event automatically supports animating layout properties like height

Answer

The JS handler cannot read contentOffset.y at all

Answer

setState is not allowed inside an onScroll handler