All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8664 bites
Page 11
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.
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.
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.
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.
Diagnosing slow FlatList scroll and blank cells
Memoize renderItem and items, supply getItemLayout for fixed heights, tune windowSize, maxToRenderPerBatch, initialNumToRender, and removeClippedSubviews; profile first.
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.
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.
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.
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.
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.
Setting screen options statically versus dynamically
Options prop on Screen (can read route) versus navigation.setOptions inside the screen for state-driven changes.
Accessing navigation outside a screen component
Use the useNavigation hook inside any component under NavigationContainer; for navigating outside React, use a navigationRef.
Refetching data when a screen gains focus
Use useFocusEffect with a useCallback callback; refetch on focus; clean up to abort stale requests.
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.
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.
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.
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.
keyboardShouldPersistTaps in ScrollView
KeyboardShouldPersistTaps controls whether taps dismiss the keyboard or reach children; values never, always, and handled.
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.
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.