React Native
198 bites tagged React Native — interview questions with model answers, and 60-second explainers.
Setting screen options statically versus dynamically
Options prop on Screen (can read route) versus navigation.setOptions inside the screen for state-driven changes. static versus dynamic screen options. trying to set state-based titles via the static options object only.
Accessing navigation outside a screen component
Use the useNavigation hook inside any component under NavigationContainer; for navigating outside React, use a navigationRef. getting navigation without the prop. prop-drilling navigation down manually through many layers.
Refetching data when a screen gains focus
Use useFocusEffect with a useCallback callback; refetch on focus; clean up to abort stale requests. knowing focus differs from mount. relying on useEffect with empty deps, which only fires once on mount.
Structuring an auth flow in React Navigation
Conditionally render an auth stack versus app stack from state, not navigate calls; store token; let state drive screens. navigator structuring around auth state. navigating between stacks manually instead of swapping them.
Stack Navigator vs Tab Navigator and nesting
A Stack pushes and pops screens for hierarchical drill-down; a Tab switches between parallel top-level sections. Nesting a Stack in each tab gives each tab its own independent push/pop history. navigator types and composition.
navigate vs push in a Stack Navigator
Navigate goes to an existing instance of the route if present, otherwise pushes; push always adds a new instance onto the stack. Use push to revisit the same screen with new params. stack navigation semantics.
Gesture Handler and Reanimated on the UI thread
Gesture Handler tracks gestures natively and Reanimated runs worklets on the UI thread, so animations driven by shared values continue smoothly even when the JS thread is blocked. off-JS-thread animation architecture.
keyboardShouldPersistTaps in ScrollView
KeyboardShouldPersistTaps controls whether taps dismiss the keyboard or reach children; values never, always, and handled. keyboard and tap handling in scroll views.
Gesture Responder System lifecycle
A single view becomes the responder for a touch; onStartShouldSetResponder claims it at touch start, onMoveShouldSetResponder claims it on movement, then grant, move, and release callbacks fire. how RN assigns touch ownership.
Single useState object for multi-input forms
Hold all fields in one state object, use a generic handler keyed by field name, and update immutably by spreading previous state. scalable form state and immutable updates.
Button vs TouchableOpacity vs Pressable
Button is minimal and platform-styled with limited customization; TouchableOpacity wraps children with an opacity fade; Pressable is the modern, flexible primitive exposing rich press states. choosing the right touchable.
Controlled TextInput with value and onChangeText
Store input text in state, bind value to that state, and update state in onChangeText so React is the single source of truth. controlled component pattern.
How StyleSheet.create reduces styling overhead
StyleSheet styles are created once with stable references, so identical renders skip reallocation and reduce diffing and serialization work; inline literals allocate new objects each render… depth on style identity and serialization.
Why Text inherits styles but View does not
Nested Text inherits text styles because it maps to platform attributed-text rendering, while Views are independent layout boxes with no style cascade. rationale behind text inheritance.
Circular View with centered text
Set equal width and height, borderRadius to half that, then justifyContent and alignItems center to place the Text in the middle. combining sizing, borderRadius, and centering.
Using position absolute in React Native
Absolute removes a view from flex flow and positions it relative to its nearest positioned ancestor using top, left, right, bottom; ideal for overlays and badges. when to escape flex flow.
alignItems vs justifyContent in flexbox
JustifyContent aligns along the main axis, alignItems aligns along the cross axis; with column direction main is vertical and cross is horizontal. main vs cross axis understanding.
Default flexDirection and header-content-footer layout
Default flexDirection is column, unlike web's row; give the root flex 1, fixed heights to header and footer, and flex 1 to a scrollable middle. flexbox defaults and a classic layout.
View vs Text and nesting rules
View is a flexbox layout container; Text renders and lays out text with inheritance. Text nests inside Text and inherits style; View inside Text is constrained and discouraged. layout vs text primitives.
Inline styles vs StyleSheet.create
Styles are JS objects passed to the style prop; StyleSheet.create registers styles once for stable references and validation, while inline objects recreate on each render. styling fundamentals and object identity.
Building a native module from scratch
Write a native module class with exported methods or constants, register it via a package, then expose a typed JS wrapper. bridging JS to platform APIs.
Improving React Native startup time
Enable Hermes for fast bytecode startup, shrink and lazy-load the JS bundle via inline requires and RAM bundles, and defer non-critical native init. systematic startup profiling.
Expo managed workflow vs bare React Native
Expo gives fast setup, OTA updates, managed builds, and prebuilt APIs; bare gives full native control and arbitrary native modules. judgment on tooling tradeoffs.
Fabric Native Components
Fabric Native Components are host platform views exposed to React under the New Architecture. They use JSI and a C++ rendering core so the shadow tree, layout, and view updates run synchronously without the legacy async bridge, reducing latency and tearing.
Get React Native bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.