React Native
198 bites tagged React Native — interview questions with model answers, and 60-second explainers.
Persisting key-value preferences across launches
AsyncStorage for simple non-sensitive key-value, MMKV for speed, SecureStore or Keychain for secrets. Local persistence choices. storing tokens in AsyncStorage or treating its async API as synchronous.
Shared element transitions with Reanimated
Wrap both views in Animated.View with the same sharedTransitionTag, use a native-stack navigator so Reanimated interpolates between source and target. Cross-screen animated continuity.
What is a worklet in Reanimated
A worklet is a JS function marked to run on the UI thread runtime with a captured snapshot of its scope, enabling synchronous per-frame work. Reanimated's execution model.
Animated.event for scroll-driven parallax
Animated.event maps an event path to an Animated.Value, wire it to onScroll with useNativeDriver, then interpolate the value for header transform. Mapping native events to animated values.
Shared values and useAnimatedStyle in Reanimated
UseSharedValue holds a mutable .value readable on both threads, useAnimatedStyle derives styles as a worklet, mutate .value with withTiming or withSpring. Reanimated core hooks. reading .value during render to set state.
Animated API versus Reanimated architecture
Animated declares animations that the native driver runs, but logic and gestures cross the bridge; Reanimated runs worklets directly on the UI thread. Where animation work runs. saying both run fully on JS.
Animated.sequence versus Animated.parallel
Sequence runs animations one after another in order, parallel starts them at the same time. Composing multiple animations. thinking parallel waits for the slowest before others begin, or confusing them with stagger.
Build a mount fade-in with Animated API
Create an Animated.Value(0) in a ref, drive it with Animated.timing inside useEffect, bind it to opacity on Animated.View. Basic Animated API fluency. animating opacity via setState every frame.
Redux principles: store, actions, reducers
One store holds all state; actions are plain objects describing what happened; pure reducers compute the next immutable state from current state and action; dispatch drives the cycle. Redux's core model.
Context re-renders when unrelated value changes
Every consumer re-renders when the Provider value reference changes, regardless of which field it uses; fix by splitting into separate contexts or memoizing and selecting. Context re-render behavior.
Local state versus global state management
Keep state local with useState/useReducer when it is used by one component or its subtree; reach for Redux or Zustand when many distant components share and mutate the same state. scoping state correctly.
Prop drilling and the Context API
Prop drilling is threading props through many intermediate components that do not use them; Context provides a value to a subtree so consumers read it directly. understanding prop drilling and Context.
SectionList versus FlatList for grouped data
FlatList takes a flat data array; SectionList takes a sections array of objects each with a data array and optional title, and supports renderSectionHeader and sticky headers. grouped-list data shape.
FlatList virtualization and windowing trade-offs
FlatList renders only items within a window of viewports around the visible area, unmounting others; larger windowSize means fewer blanks but more memory, smaller means less memory but more blank flashes. how windowing works.
Preventing unnecessary FlatList item re-renders
Extract the row into a React.memo component, pass stable memoized callbacks and primitive props, and keep renderItem referentially stable so only changed items re-render. memoization of list rows.
Optimizing FlatList with variable item heights
Implement getItemLayout to return each item's length and cumulative offset so FlatList skips measurement and scrollToIndex works precisely; precompute heights per item type. layout optimization for mixed heights.
Implementing infinite scroll with FlatList
Use onEndReached with onEndReachedThreshold to fetch the next page, append results, and show a footer loader; guard with a loading flag to prevent duplicate fetches. pagination with FlatList.
Re-rendering FlatList on external state change
FlatList is a PureComponent and only checks data and extraData by reference, so pass the external value via extraData and ensure renderItem reads current state. FlatList re-render triggers.
Diagnosing slow FlatList scroll and blank cells
Memoize renderItem and items, supply getItemLayout for fixed heights, tune windowSize, maxToRenderPerBatch, initialNumToRender, and removeClippedSubviews; profile first. practical FlatList tuning.
FlatList data, renderItem, and keyExtractor
Data is the array, renderItem maps each item to a component, keyExtractor returns a stable unique key letting React reconcile and reuse rows. core FlatList props.
ScrollView versus FlatList for long lists
ScrollView mounts all children at once; FlatList virtualizes, rendering only on-screen items plus a buffer. Use ScrollView for small/fixed content, FlatList for long/dynamic data. rendering strategy.
Type-safe navigation with TypeScript
Define a ParamList mapping screen names to param types, type Screen via NativeStackScreenProps, and type useNavigation with the navigation prop generic so route names and params autocomplete. typing navigation.
How react-native-screens optimizes a deep stack
React-native-screens uses native container views so off-screen screens are detached from the view hierarchy and can be freed; enabled by default and powers the native-stack navigator. native screen optimization.
Configuring deep linking to a parameterized screen
Register native URL schemes/intent filters, define a linking config with prefixes and screen-to-path mapping including params, pass it to NavigationContainer. end-to-end deep link setup.
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.