More in Mobile Dev — page 7
Stack Navigator vs Tab Navigator and nesting
WHAT IT TESTS: navigator types and composition. OUTLINE: 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.
navigate vs push in a Stack Navigator
WHAT IT TESTS: stack navigation semantics. OUTLINE: 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.
Gesture Handler and Reanimated on the UI thread
WHAT IT TESTS: off-JS-thread animation architecture. OUTLINE: 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.
keyboardShouldPersistTaps in ScrollView
WHAT IT TESTS: keyboard and tap handling in scroll views. OUTLINE: keyboardShouldPersistTaps controls whether taps dismiss the keyboard or reach children; values never, always, and handled.
Gesture Responder System lifecycle
WHAT IT TESTS: how RN assigns touch ownership. OUTLINE: 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.
Single useState object for multi-input forms
WHAT IT TESTS: scalable form state and immutable updates. OUTLINE: hold all fields in one state object, use a generic handler keyed by field name, and update immutably by spreading previous state.
Button vs TouchableOpacity vs Pressable
WHAT IT TESTS: choosing the right touchable. OUTLINE: 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.
Controlled TextInput with value and onChangeText
WHAT IT TESTS: controlled component pattern. OUTLINE: store input text in state, bind value to that state, and update state in onChangeText so React is the single source of truth.
How StyleSheet.create reduces styling overhead
WHAT IT TESTS: depth on style identity and serialization. OUTLINE: 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…
Why Text inherits styles but View does not
WHAT IT TESTS: rationale behind text inheritance. OUTLINE: nested Text inherits text styles because it maps to platform attributed-text rendering, while Views are independent layout boxes with no style cascade.
Circular View with centered text
WHAT IT TESTS: combining sizing, borderRadius, and centering. OUTLINE: set equal width and height, borderRadius to half that, then justifyContent and alignItems center to place the Text in the middle.
Using position absolute in React Native
WHAT IT TESTS: when to escape flex flow. OUTLINE: 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.
alignItems vs justifyContent in flexbox
WHAT IT TESTS: main vs cross axis understanding. OUTLINE: justifyContent aligns along the main axis, alignItems aligns along the cross axis; with column direction main is vertical and cross is horizontal.
Default flexDirection and header-content-footer layout
WHAT IT TESTS: flexbox defaults and a classic layout. OUTLINE: 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.
View vs Text and nesting rules
WHAT IT TESTS: layout vs text primitives. OUTLINE: 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.
Inline styles vs StyleSheet.create
WHAT IT TESTS: styling fundamentals and object identity. OUTLINE: 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.
Building a native module from scratch
WHAT IT TESTS: bridging JS to platform APIs. OUTLINE: write a native module class with exported methods or constants, register it via a package, then expose a typed JS wrapper.
Improving React Native startup time
WHAT IT TESTS: systematic startup profiling. OUTLINE: 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.
Expo managed workflow vs bare React Native
WHAT IT TESTS: judgment on tooling tradeoffs. OUTLINE: Expo gives fast setup, OTA updates, managed builds, and prebuilt APIs; bare gives full native control and arbitrary native modules.
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.