Rows wrapped in <Link asChild> collapse to a tiny height
React NativeLikely fix
expo-router Link asChild, Pressable style function
There is no error message for this one, only the symptom in the title.
Cause
Link's Slot merges the child's style with an object spread. The Pressable used a style function (style={({ pressed }) => ...}), and spreading a function gives {}, so the height was dropped. Only rows not wrapped in Link kept their height.
Fix
Use a plain style object on the child of <Link asChild>, or drop Link and navigate with router.push() in onPress.
More React Native errors
- Screen crashes the whole app: Rendered more hooks than during the previous renderRendered more hooks than during the previous render
- Feed shows an error state for every address: ReferenceError before initializationReferenceError: Cannot access 'scoreById' before initialization
- Screen crash: Maximum update depth exceededError: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
- Reanimated crash on device: Tried to synchronously call a non-worklet function on the UI thread[Worklets] Tried to synchronously call a non-worklet function `clamp01` on the UI thread.
- Pressable buttons render invisible: style function fill never applied