React Native

Question 1

How does React Native differ from a web view wrapper?

Accepted Answer

It renders real native views (UIView, Android View) driven by JavaScript, so the UI is native and only the logic runs in JS; frameworks like Cordova render HTML inside a web view instead.

Question 2

Name the core building-block components

Accepted Answer

View (container), Text, Image, TextInput, ScrollView, FlatList, Pressable, Modal, Switch, ActivityIndicator, StatusBar and SafeAreaView.

Question 3

Why must every string be inside <Text>?

Accepted Answer

Native platforms have no concept of loose text nodes; only a Text component can lay out and draw characters, so a raw string inside a View throws.

Question 4

How does text styling inherit in React Native?

Accepted Answer

Only through nested Text: a child Text inherits the font, size and color of its parent Text. There is no CSS cascade, so a View never passes font styles down.

Question 5

What is StyleSheet.create for?

Accepted Answer

It declares styles once as plain objects with numeric, unitless values; every render references the same objects instead of allocating new ones, and the create call validates property names in development.

Question 6

How do Flexbox defaults differ from the web?

Accepted Answer

flexDirection defaults to column (the web uses row), alignItems to stretch, flexShrink to 0, and position to relative; display is only flex or none.

Question 7

How are conditional styles combined?

Accepted Answer

Pass an array to style; later entries override earlier ones and falsy entries are ignored.

Question 8

How do you position an element absolutely?

Accepted Answer

Set position: 'absolute' with top, left, right or bottom; the element is positioned relative to its parent View and removed from the flex flow.

Question 9

Which units and CSS features are missing?

Accepted Answer

No em, rem, vh, vw, calc(), media queries, pseudo-classes or selectors; you get numbers, percentages for size and spacing, and the gap property.

Question 10

How are shadows written per platform?

Accepted Answer

iOS uses shadowColor, shadowOffset, shadowOpacity and shadowRadius; Android uses elevation. The boxShadow style property (React Native 0.76 with the New Architecture) works on both.

Question 11

How do Platform.OS and Platform.select work?

Accepted Answer

Platform.OS is 'ios', 'android', 'web' and so on; Platform.select picks a value from an object keyed by platform, with default as the fallback.

Question 12

How do platform-specific files work?

Accepted Answer

Name files Button.ios.tsx and Button.android.tsx; importing ./Button resolves the matching one at bundle time. .native.tsx targets both mobile platforms when a .tsx web version also exists.

Question 13

How is an image loaded?

Accepted Answer

Image takes a source: require('./logo.png') for a bundled file (size known from the file) or { uri: 'https://...' } for a remote one, which needs explicit width and height.

Question 14

What does resizeMode control?

Accepted Answer

How an image fits its box: cover (fill and crop), contain (fit inside), stretch (distort), center and repeat.

Question 15

When does ScrollView become the wrong choice?

Accepted Answer

When the content is long or of unknown length: ScrollView renders every child at once, so a few hundred rows means slow mounts and high memory. Use FlatList or SectionList, which virtualize.

Question 16

How does FlatList render a long list?

Accepted Answer

It takes data and renderItem, mounts only the rows near the viewport, recycles them as you scroll, and needs a keyExtractor for stable identity.

Question 17

Which FlatList props tune scrolling performance?

Accepted Answer

getItemLayout (skips measuring fixed-height rows), initialNumToRender, windowSize, maxToRenderPerBatch, removeClippedSubviews and keyExtractor.

Question 18

What does FlashList improve over FlatList?

Accepted Answer

Shopify's list recycles row views instead of unmounting and remounting them, keeping scrolling smooth on large data sets with far fewer blank cells.

Question 19

Pressable vs TouchableOpacity

Accepted Answer

Pressable is the modern, unstyled touch handler with onPress, onLongPress, hitSlop and a style function that receives pressed; TouchableOpacity is the older wrapper that dims its child.

Question 20

How does TextInput handle text?

Accepted Answer

As a controlled component: value reflects state and onChangeText gives the new string; props such as keyboardType, secureTextEntry, autoCapitalize and returnKeyType configure the keyboard.

Question 21

What does KeyboardAvoidingView do?

Accepted Answer

It shifts or shrinks its content when the keyboard appears so inputs stay visible; behavior is usually 'padding' on iOS and undefined or 'height' on Android.

Question 22

How do you make taps on a scrollable form dismiss or pass through the keyboard?

Accepted Answer

Set keyboardShouldPersistTaps="handled" on the ScrollView so a tap on a button fires instead of only closing the keyboard, and keyboardDismissMode="on-drag" to close it while scrolling.

Question 23

How do you respect the notch and home indicator?

Accepted Answer

Use SafeAreaProvider and SafeAreaView (or useSafeAreaInsets) from react-native-safe-area-context, which works on both platforms; the core SafeAreaView is iOS-only.

Question 24

How does the Modal component work?

Accepted Answer

It presents its children in a new native window above everything, controlled by visible, with animationType (slide, fade, none) and onRequestClose for the Android back button.

Question 25

How is the status bar controlled?

Accepted Answer

With the StatusBar component or its static methods: barStyle (light-content, dark-content), backgroundColor (Android only) and hidden.

Question 26

How do you set up React Navigation?

Accepted Answer

Install @react-navigation/native plus a navigator package, wrap the app in NavigationContainer, and declare screens on a navigator such as createNativeStackNavigator.

Question 27

How do you navigate and pass params?

Accepted Answer

Call navigation.navigate('Details', { id }) from a screen's navigation prop or useNavigation(), and read them on the target from route.params.

Question 28

Native stack vs JavaScript stack navigator

Accepted Answer

@react-navigation/native-stack uses the platform's own navigation container (UINavigationController, Android fragments) for real native transitions; @react-navigation/stack reimplements them in JS and is fully customizable.

Question 29

How are tabs and stacks combined?

Accepted Answer

Nest navigators: a bottom tab navigator whose tab screens are each a stack, so pushing inside one tab keeps the tab bar and the other tabs' history.

Question 30

How do you set screen options such as the title?

Accepted Answer

Through options on Stack.Screen (static or a function of route), or dynamically from inside the screen with navigation.setOptions.