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