A team wants one profile screen on iOS and Android; how is building it in React Native different from building it for the web?

React Native uses React concepts but renders mobile platform views instead of browser HTML. - I build with View, Text, and Pressable rather than div, p, and button elements. - Styles are JavaScript objects with a CSS-like subset, not a browser stylesheet with selectors and the CSS cascade. - I also account for mobile concerns such as safe areas, the Android back button, permissions, and touch input.

Why must a text string be inside Text in React Native, and how does text-style inheritance work?

React Native requires text strings to be inside Text, and text styles inherit only within a Text subtree. - A raw string directly under View is invalid; I wrap it in Text before React Native can render it. - A nested Text inherits text properties such as color, font family, and font size from its parent Text unless it overrides them. - Styles on View do not cascade into descendant Text, so shared typography belongs on a parent Text or must be passed explicitly.

In a UserCard component with a name and avatar, what does JSX do and why is it not HTML?

JSX is syntax that describes the React element tree inside JavaScript or TypeScript. - A build transform converts JSX into React element creation calls before the app runs. - Tags such as View can refer to imported components, while lowercase HTML tags like div are not React Native primitives. - JavaScript expressions go inside braces, for example source={{ uri: avatarUrl }} or {name}.

A Counter receives a label prop and starts at 0; which value should be a prop and which should be state?

The parent-provided label is a prop, while the changing count belongs in state. - Props are read-only inputs from the parent, so the child should not assign a new label to them. - useState(0) stores the current count and its setter requests an update. - If the parent must control the count, I would pass both count and an onChange callback instead of duplicating state.

A button calls setCount once; what happens during the next React Native render cycle?

The state update schedules React to render the component again and reconcile the new tree with the previous one. - The component function runs again and reads the updated count value. - React compares element trees and commits only the native view changes that are needed. - Rendering should stay pure, so network calls and subscriptions belong in effects or event handlers rather than the component body.

Three screens share the same card style; how would you organize it with StyleSheet and override only the selected card?

I would define the reusable styles with StyleSheet.create and combine them with a conditional style array. - StyleSheet.create gives named style objects such as styles.card and styles.selectedCard. - The component can use style={[styles.card, selected && styles.selectedCard]}. - Later entries win for overlapping properties, so selectedCard can override only borderColor or backgroundColor.

Place two buttons in one horizontal row with equal widths and 12 points between them using React Native Flexbox.

I would use a row container and give both button wrappers flex: 1. - The container needs flexDirection: 'row' because React Native defaults to a column direction. - Each wrapper with flex: 1 receives an equal share of the available width. - A gap of 12 on the container creates the requested spacing without adding margins to the individual buttons.

Why does width: 100 not mean 100 physical pixels on both a low-density Android phone and a high-density iPhone?

React Native layout numbers use density-independent logical units rather than raw physical pixels. - The platforms map 100 layout units to different physical pixel counts according to screen density. - This keeps a control roughly similar in physical size across devices. - I use PixelRatio only for cases that truly need pixel-density information, not to multiply every layout value manually.

A card needs 16 points of padding on iOS and 12 on Android; how would you express that without duplicating the component?

I would keep one component and select only the platform-specific value with the Platform API. - Platform.select can return { padding: 16 } for ios and { padding: 12 } for android. - Platform.OS is useful for a small conditional when the branches are simple. - If an entire implementation differs, files such as Card.ios.tsx and Card.android.tsx can share the same import path.

A header is hidden under an iPhone notch; how would you keep the screen content inside safe areas?

I would read safe-area insets and add the relevant top or bottom spacing around the screen content. - react-native-safe-area-context provides SafeAreaView and useSafeAreaInsets for current cross-platform handling. - I apply only the edges the design needs so nested navigators do not add the same inset twice. - I test a notched iPhone and an Android device with gesture navigation because their insets can differ.

Define TypeScript props for an Avatar that requires uri and size but allows an optional onPress callback.

I would define a props type with required strings and numbers and an optional function. - The shape can be uri: string, size: number, and onPress?: () => void. - The component parameter can be typed as AvatarProps so invalid callers fail during type checking. - I can provide a default size only if size becomes optional; a required prop should not silently need a fallback.

A quantity selector starts at 1 and must never go below 1; how would you implement it with useState?

I would store the quantity in useState and update it with the functional setter form. - const [quantity, setQuantity] = useState(1) gives the current value and setter. - Incrementing uses setQuantity(current => current + 1), which is safe when updates are queued. - Decrementing uses Math.max(1, current - 1) so the state invariant is enforced in the update.

A Profile screen must load user 42 when userId changes; how should a junior use useEffect and cleanup?

I would run the request in an effect that depends on userId and prevent a stale request from updating state. - The dependency array contains userId, so changing from 42 to another user triggers a new request. - An AbortController can cancel the fetch in the cleanup when the component unmounts or userId changes. - I keep loading and error state around the request rather than making the effect function itself async.

A screen filters 500 items and passes onSelect to a memoized row; when would useMemo and useCallback help?

useMemo can reuse the filtered array, while useCallback can preserve the onSelect reference for memoized rows. - useMemo recalculates the 500-item filter only when the source items or filter text changes. - useCallback returns the same onSelect reference until one of its dependencies changes, so React.memo rows do not rerender only because of a new handler. - I add either hook after profiling because filtering 500 simple items may be cheap, while memoization also costs work and complexity.

How would you make a TextInput for an email address controlled and clear it after one successful submit?

I would bind the TextInput value to state and update that state from onChangeText. - value={email} makes React state the source of truth for the displayed text. - onChangeText={setEmail} records each edit without reading a browser event object. - After a successful submit I call setEmail(''), while a failed request leaves the user's text available for correction.

A Pressable must save an item with id 7; how do React Native event handlers pass that id without calling save during render?

I would pass a function that calls save with id 7 when the press occurs. - onPress={() => saveItem(7)} passes a callback instead of the result of saveItem. - Writing onPress={saveItem(7)} would execute during render and give onPress the returned value. - If the handler needs press coordinates, its event argument contains nativeEvent data, but the item id should come from the closure or props.

A screen has loading, empty, error, and data states; how would you render exactly one of the 4?

I would handle the states in a clear priority order with early returns or one explicit branch. - Show ActivityIndicator while loading so an empty array is not mistaken for a finished empty state. - Show an error message with a retry action when the request fails. - After loading succeeds, render either the empty message or the data list based on items.length.

A list of 20 messages can be reordered; why is message.id a better React key than the array index?

A stable message id lets React keep each rendered row associated with the same message across reordering. - The array index changes when a message is inserted or moved, so local row state can attach to the wrong item. - keyExtractor={item => item.id} gives FlatList a stable string key. - The id must be unique among siblings; random keys are also bad because they force rows to remount every render.

Three screens need the same Card layout but different content and actions; how would component composition help?

I would make Card own the shared visual container and receive variable content through props or children. - children lets each screen place its own Text, Image, or form inside the same card shell. - Named props such as footer or onPress can make common action slots explicit. - This avoids copying styles while keeping the Card independent of screen-specific data fetching or navigation.

One child widget throws while rendering; what can a basic error boundary show and what errors will it not catch?

An error boundary can replace the failed descendant tree with a fallback instead of losing the whole screen. - It catches rendering and lifecycle errors below the boundary, so I place it around a screen or risky subtree. - A basic boundary is still implemented as a class component with error lifecycle methods, or supplied by a tested library. - It does not catch errors in event handlers or rejected async work, which need normal try and catch handling.

React Native Developer interview questions

100 real questions with model answers and explanations for Junior React Native Developer candidates.

See a React Native Developer resume example →

Practice with flashcards

Spaced repetition · Hunter Pass

Questions

reactreact-native

React Native uses React concepts but renders mobile platform views instead of browser HTML.

I build with View, Text, and Pressable rather than div, p, and button elements.
Styles are JavaScript objects with a CSS-like subset, not a browser stylesheet with selectors and the CSS cascade.
I also account for mobile concerns such as safe areas, the Android back button, permissions, and touch input.

Why interviewers ask this: The interviewer is checking that the candidate can transfer React knowledge without treating a mobile app as a website in a wrapper.

reactreact-nativeoop

React Native requires text strings to be inside Text, and text styles inherit only within a Text subtree.

A raw string directly under View is invalid; I wrap it in Text before React Native can render it.
A nested Text inherits text properties such as color, font family, and font size from its parent Text unless it overrides them.
Styles on View do not cascade into descendant Text, so shared typography belongs on a parent Text or must be passed explicitly.

Why interviewers ask this: The interviewer is checking the special rendering and inheritance rules for text rather than another mapping from HTML tags to native components.

htmlcomponents

JSX is syntax that describes the React element tree inside JavaScript or TypeScript.

A build transform converts JSX into React element creation calls before the app runs.
Tags such as View can refer to imported components, while lowercase HTML tags like div are not React Native primitives.
JavaScript expressions go inside braces, for example source={{ uri: avatarUrl }} or {name}.

Why interviewers ask this: The interviewer is evaluating whether the candidate understands JSX as component syntax rather than browser markup.

The parent-provided label is a prop, while the changing count belongs in state.

Props are read-only inputs from the parent, so the child should not assign a new label to them.
useState(0) stores the current count and its setter requests an update.
If the parent must control the count, I would pass both count and an onChange callback instead of duplicating state.

Why interviewers ask this: The interviewer is checking whether the candidate separates external inputs from component-owned changing data.

reactreact-native

The state update schedules React to render the component again and reconcile the new tree with the previous one.

The component function runs again and reads the updated count value.
React compares element trees and commits only the native view changes that are needed.
Rendering should stay pure, so network calls and subscriptions belong in effects or event handlers rather than the component body.

Why interviewers ask this: The interviewer is testing a basic mental model of state updates, rendering, and native UI commits.

styles

I would define the reusable styles with StyleSheet.create and combine them with a conditional style array.

StyleSheet.create gives named style objects such as styles.card and styles.selectedCard.
The component can use style={[styles.card, selected && styles.selectedCard]}.
Later entries win for overlapping properties, so selectedCard can override only borderColor or backgroundColor.

Why interviewers ask this: The interviewer is checking whether the candidate can create reusable styles and apply predictable local overrides.

flexboxreactreact-native

I would use a row container and give both button wrappers flex: 1.

The container needs flexDirection: 'row' because React Native defaults to a column direction.
Each wrapper with flex: 1 receives an equal share of the available width.
A gap of 12 on the container creates the requested spacing without adding margins to the individual buttons.

Why interviewers ask this: The interviewer is evaluating practical Flexbox knowledge, especially React Native's default column direction.

React Native layout numbers use density-independent logical units rather than raw physical pixels.

The platforms map 100 layout units to different physical pixel counts according to screen density.
This keeps a control roughly similar in physical size across devices.
I use PixelRatio only for cases that truly need pixel-density information, not to multiply every layout value manually.

Why interviewers ask this: The interviewer is checking whether the candidate understands device density without hardcoding per-device dimensions.

componentscss

I would keep one component and select only the platform-specific value with the Platform API.

Platform.select can return { padding: 16 } for ios and { padding: 12 } for android.
Platform.OS is useful for a small conditional when the branches are simple.
If an entire implementation differs, files such as Card.ios.tsx and Card.android.tsx can share the same import path.

Why interviewers ask this: The interviewer is testing whether the candidate can isolate small platform differences while preserving shared code.

I would read safe-area insets and add the relevant top or bottom spacing around the screen content.

react-native-safe-area-context provides SafeAreaView and useSafeAreaInsets for current cross-platform handling.
I apply only the edges the design needs so nested navigators do not add the same inset twice.
I test a notched iPhone and an Android device with gesture navigation because their insets can differ.

Why interviewers ask this: The interviewer is checking whether the candidate handles physical screen cutouts and system UI rather than guessing fixed padding.

typescriptcallbacksswift

I would define a props type with required strings and numbers and an optional function.

The shape can be uri: string, size: number, and onPress?: () => void.
The component parameter can be typed as AvatarProps so invalid callers fail during type checking.
I can provide a default size only if size becomes optional; a required prop should not silently need a fallback.

Why interviewers ask this: The interviewer is evaluating basic TypeScript modeling of required, optional, and callback props.

hooks

I would store the quantity in useState and update it with the functional setter form.

const [quantity, setQuantity] = useState(1) gives the current value and setter.
Incrementing uses setQuantity(current => current + 1), which is safe when updates are queued.
Decrementing uses Math.max(1, current - 1) so the state invariant is enforced in the update.

Why interviewers ask this: The interviewer is checking basic local state handling and safe updates based on previous state.

hooks

I would run the request in an effect that depends on userId and prevent a stale request from updating state.

The dependency array contains userId, so changing from 42 to another user triggers a new request.
An AbortController can cancel the fetch in the cleanup when the component unmounts or userId changes.
I keep loading and error state around the request rather than making the effect function itself async.

Why interviewers ask this: The interviewer is evaluating effect dependencies, cleanup, and basic asynchronous state safety.

memoization

useMemo can reuse the filtered array, while useCallback can preserve the onSelect reference for memoized rows.

useMemo recalculates the 500-item filter only when the source items or filter text changes.
useCallback returns the same onSelect reference until one of its dependencies changes, so React.memo rows do not rerender only because of a new handler.
I add either hook after profiling because filtering 500 simple items may be cheap, while memoization also costs work and complexity.

Why interviewers ask this: The interviewer is checking that the candidate knows what each memoization hook stores and does not use them automatically.

forms

I would bind the TextInput value to state and update that state from onChangeText.

value={email} makes React state the source of truth for the displayed text.
onChangeText={setEmail} records each edit without reading a browser event object.
After a successful submit I call setEmail(''), while a failed request leaves the user's text available for correction.

Why interviewers ask this: The interviewer is evaluating the controlled-input pattern and a sensible submit experience on mobile.

reactreact-nativetouch-controls

I would pass a function that calls save with id 7 when the press occurs.

onPress={() => saveItem(7)} passes a callback instead of the result of saveItem.
Writing onPress={saveItem(7)} would execute during render and give onPress the returned value.
If the handler needs press coordinates, its event argument contains nativeEvent data, but the item id should come from the closure or props.

Why interviewers ask this: The interviewer is checking whether the candidate understands callback references, closures, and native event objects.

I would handle the states in a clear priority order with early returns or one explicit branch.

Show ActivityIndicator while loading so an empty array is not mistaken for a finished empty state.
Show an error message with a retry action when the request fails.
After loading succeeds, render either the empty message or the data list based on items.length.

Why interviewers ask this: The interviewer is evaluating whether the candidate can make mutually exclusive UI states readable and correct.

reactindexes

A stable message id lets React keep each rendered row associated with the same message across reordering.

The array index changes when a message is inserted or moved, so local row state can attach to the wrong item.
keyExtractor={item => item.id} gives FlatList a stable string key.
The id must be unique among siblings; random keys are also bad because they force rows to remount every render.

Why interviewers ask this: The interviewer is checking whether the candidate understands keys as stable identity rather than a warning to silence.

componentsuioop

I would make Card own the shared visual container and receive variable content through props or children.

children lets each screen place its own Text, Image, or form inside the same card shell.
Named props such as footer or onPress can make common action slots explicit.
This avoids copying styles while keeping the Card independent of screen-specific data fetching or navigation.

Why interviewers ask this: The interviewer is evaluating whether the candidate can reuse UI through composition instead of building one oversized conditional component.

react

An error boundary can replace the failed descendant tree with a fallback instead of losing the whole screen.

It catches rendering and lifecycle errors below the boundary, so I place it around a screen or risky subtree.
A basic boundary is still implemented as a class component with error lifecycle methods, or supplied by a tested library.
It does not catch errors in event handlers or rejected async work, which need normal try and catch handling.

Why interviewers ask this: The interviewer is checking the practical scope and limitations of React error boundaries.

Locked questions

21
For a 3-screen checkout where users move Cart to Address to Payment, why would you choose a stack navigator?
navigation
22
An app has 4 top-level areas called Home, Search, Saved, and Profile; when is a tab navigator appropriate?
navigation
23
How would ProductList open ProductDetails with productId 42 and read that parameter safely?
24
A root stack contains a HomeTabs navigator; how can a notification open the Settings screen inside those nested tabs?
android-components
25
What must be configured so the URL myapp://product/42 opens ProductDetails for product 42?
config
26
A tab screen stays mounted while another tab is open; how should analytics run each time it becomes focused?
27
On Android, a form with unsaved changes should confirm before one hardware back press leaves the screen; how would you handle it?
forms
28
A 6-field sign-up form has its last field hidden by the keyboard; what basic layout would you try first?
formsui
29
An icon-only control deletes one photo; which accessibility role and label should it expose?
mobile-accessibilitya11y
30
A settings row must work in English and Arabic; how would you handle translated text and right-to-left layout?
ui
31
Fetch GET /users/42 and turn a successful JSON response into a user object; which checks are essential?
32
DELETE /users/42 returns 204 No Content; how should the screen handle the response and remove that user?
33
Would you store a 5 MB video or an authentication password in AsyncStorage, and what is it suitable for?
authpasswordsasync
34
For a first app using notifications and location, what does Expo's managed workflow handle for a junior developer?
android-componentsexpo
35
A project adds one native camera library that Expo Go does not include; why is a development build needed?
expo
36
A user taps Enable notifications once; when should the app request permission and how should it handle denial?
permissionsandroid-components
37
A check-in screen needs one photo and the current location; what basic steps come before using either device API?
api
38
A timer should pause when the app enters the background for 30 seconds; which React Native lifecycle API would you use?
reactreact-nativeapi
39
Development and production builds call 2 different API base URLs; how would you configure them without editing source before each build?
configbuildapi
40
Why must a paid service's secret API key not be placed in an EXPO_PUBLIC_ variable, even for one release build?
secretsapiandroid-components
41
How would you render 1,000 products with FlatList instead of putting all rows in one ScrollView?
virtualized-lists
42
A remote image is 1200 by 800 pixels but must fit a 300-point card; how would you size and cache it sensibly?
caching
43
A card should fade from opacity 0 to 1 in 300 ms; what is the basic Reanimated approach?
cssanimationzero-to-one
44
A photo should move horizontally with one finger and snap back on release; what does Gesture Handler contribute?
gesturesscaling
45
Write the test plan for a LoginForm that enables Submit only after 2 fields are filled, using Jest and React Native Testing Library.
jestrtltest-plans
46
For one release smoke flow that opens the app, logs in, and sees Home, what would Detox or Maestro test?
end-to-end-testing
47
After adding one TypeScript screen, what does Metro do when the React Native app starts?
reactreact-nativetypescript
48
A bug appears only in one release build; what differs from debug, and which modern tools would you use first?
49
Which signed artifact would you normally send to TestFlight and which 2 Android artifact types might you produce?
ios-distributionartifacts
50
You need to change one button label in a 3-person team; describe a safe Git workflow from branch to merge.
git
51
An Android screen draws edge-to-edge, and white status-bar icons disappear over a light hero image; how would you keep them readable without adding another safe-area wrapper?
52
A login form has email and password fields; how would you make the keyboard's Next key focus Password and its Done key submit the form?
formspasswords
53
A React Native Modal has no visible close action and ignores the Android hardware Back button; how would you make every close path work?
reactreact-native
54
A small online badge positioned over an avatar disappears after the image container gets rounded corners; how would you fix the layout?
uicontainers
55
A two-column profile screen works at 390 by 844 but clips after rotating to 844 by 390; how would you make it responsive?
responsiveschema
56
A submit request shows an error banner, but a TalkBack user hears no change and remains on the Submit button; how would you announce the failure?
talkback
57
When the system switches to dark mode while the app is open, 6 labels turn dark on a dark background; how would you fix the theme handling?
themingsystem-design
58
A Russian translation grows from 2 lines to 4 and pushes the primary button off a 667-pixel screen; what would you change?
59
After an error modal opens, VoiceOver focus stays on a button behind it for 5 seconds; how would you correct the focus flow?
voiceover
60
A signup form sends an empty name and an invalid 5-character email, then shows only a generic 400 error; how would you improve validation?
genericsvalidationforms
61
GET /products returns an ETag with 200; how would you reopen the screen using If-None-Match and handle a 304 response from a basic local cache?
cachinghttp-caching
62
A user searches for cat and then car, but the slower cat response arrives last and replaces the correct car results; how would you guard against that without AbortController?
63
A REST call can hang for 45 seconds on a weak connection, but the product requires a visible timeout after 10 seconds; how would you implement it?
resiliencerest
64
An API returns 20 products per page, but reaching the list end twice quickly appends page 2 two times; how would you fix pagination?
pagination
65
An invoice PDF downloads to a local URI, but tapping Open on Android does nothing; how would you let the user open or share the file with Expo tools?
expo
66
An appointment returned as 2026-07-16T23:30:00Z shows the wrong calendar day for some users after the app slices the first 10 characters; how would you fix it?
67
An access token expires after 30 minutes and the next API call returns 401; what basic token handling would you implement?
tokensapi
68
Pull-to-refresh starts a second request while the first 1.5-second refresh is still running and the indicator never stops after an error; how would you fix it?
69
An endpoint normally returns JSON, but a proxy sends an HTML error page and response.json() throws Unexpected token <; how would you handle it?
htmlendpointsproxy
70
A user uploads a 12 MB photo over a slow connection and sees 0 percent for 20 seconds, then 100 percent; how would you show real progress?
71
A Products route may omit its sort parameter, and a malformed deep link can pass sort=cheapest-first; how would you choose a safe default?
deep-linkingnavigation
72
After a successful sign-in, Android Back returns from Home to the Login screen; what navigation change would you make?
navigation
73
EditProfile needs a Save button in the native stack header, but it submits the name from the first render; how would you wire it to the latest form state?
forms
74
A Receipt screen can open from Checkout or directly from a notification, but its Close button calls goBack and does nothing when Receipt is the root route; how would you handle both entries?
android-components
75
A 300-millisecond double tap on a product card opens two identical Product screens; how would you stop the duplicate?
76
The Inbox tab badge stays at 3 after the user marks every message read; how would you keep the navigator badge in sync?
77
HomeTabs is nested inside a root stack and every tab shows two headers; how would you remove the duplicate without losing detail-screen titles?
78
The app marks an invoice as Sent as soon as the native share sheet opens, even when the user dismisses it; how would you model the result?
79
Closing DocumentPicker shows Upload failed, while a selected 40 MB image also reaches a PDF-only endpoint; how would you handle both outcomes?
endpoints
80
A Support button opens mailto:support@example.com, but nothing happens on a device without a configured mail app; what fallback would you add?
config
81
An FAQ has 20 categories and each category header should stay visible while its questions scroll; how would you build it with SectionList?
virtualized-lists
82
A settings row contains an icon, title, status, and chevron, but only the title text responds to taps; how would you make the composite row one accessible target?
83
Tapping row 7 changes selectedId, but FlatList does not update its highlight because data is unchanged; what is missing?
virtualized-lists
84
A Feed tab keeps its scroll position, but pressing the already selected Feed tab should scroll its FlatList to the top and currently fires twice after remounts; how would you implement it?
virtualized-lists
85
A profile image uses a signed URL that expires after 15 minutes, and later shows a broken image even though the avatar itself has not changed; how would you recover and cache it?
caching
86
A 300-millisecond card animation falls to 40 fps when it changes width on every frame; how would you target 60 fps?
87
A horizontal swipe-to-delete row inside a vertical list steals the gesture after only 2 pixels of diagonal movement; how would you resolve the conflict?
scaling
88
A countdown logs every second even after leaving the screen, and returning creates two countdowns; what cleanup is required?
89
A request finishes and the loading spinner disappears, but every visible button remains untappable because a transparent full-screen View is still mounted; how would you debug it?
ui
90
Adding a Products FlatList inside a vertical ScrollView produces the warning that VirtualizedLists should not be nested and scrolling becomes unreliable; how would you restructure it?
virtualizationvirtualized-lists
91
A pure formatDuration helper should turn 65 seconds into 01:05; how would you test it without rendering a React Native component?
reactcomponentsreact-native
92
A products component calls fetch and should render 2 items on 200 or an error on 500; how would you mock those cases?
componentsmocking
93
What one end-to-end scenario would prove that a camera feature handles permission denial and then works after permission is granted?
permissionse2e
94
A production button label has a typo, and the next task adds a new native barcode module; which change can use EAS Update and which needs a new store build?
over-the-air-updates
95
Metro still imports the old module name 10 minutes after a file rename, even though the source is correct; what would you try?
metro
96
A camera screen works on iOS 18 but closes immediately on Android 14; how would you investigate the platform-only bug?
97
A release is labeled 1.4.0, but App Store Connect and Google Play both reject a second upload with reused build identifiers; how do app version, iOS buildNumber, and Android versionCode differ?
98
The release shows the old app icon and a white flash for 500 milliseconds before the splash image; what would you verify?
99
An internal tester reports a blank screen only on a Pixel 6 with Android 15 in build 108; what information would you collect before changing code?
100
Android version 1.4.0 with a login fix has just reached a 5% rollout; what one post-release smoke and monitoring scenario would you run?
monitoring

Questions

1A team wants one profile screen on iOS and Android; how is building it in React Native different from building it for the web?

2Why must a text string be inside Text in React Native, and how does text-style inheritance work?

3In a UserCard component with a name and avatar, what does JSX do and why is it not HTML?

4A Counter receives a label prop and starts at 0; which value should be a prop and which should be state?

5A button calls setCount once; what happens during the next React Native render cycle?

6Three screens share the same card style; how would you organize it with StyleSheet and override only the selected card?

7Place two buttons in one horizontal row with equal widths and 12 points between them using React Native Flexbox.

8Why does width: 100 not mean 100 physical pixels on both a low-density Android phone and a high-density iPhone?

9A card needs 16 points of padding on iOS and 12 on Android; how would you express that without duplicating the component?

10A header is hidden under an iPhone notch; how would you keep the screen content inside safe areas?

11Define TypeScript props for an Avatar that requires uri and size but allows an optional onPress callback.

12A quantity selector starts at 1 and must never go below 1; how would you implement it with useState?

13A Profile screen must load user 42 when userId changes; how should a junior use useEffect and cleanup?

14A screen filters 500 items and passes onSelect to a memoized row; when would useMemo and useCallback help?

15How would you make a TextInput for an email address controlled and clear it after one successful submit?

16A Pressable must save an item with id 7; how do React Native event handlers pass that id without calling save during render?

17A screen has loading, empty, error, and data states; how would you render exactly one of the 4?

18A list of 20 messages can be reordered; why is message.id a better React key than the array index?

19Three screens need the same Card layout but different content and actions; how would component composition help?

20One child widget throws while rendering; what can a basic error boundary show and what errors will it not catch?

Locked questions