Interactive elements have adequate spacing between them

Adjacent touch targets with zero or sub-8pt gaps produce mis-taps on every interaction — users hit the wrong button in a settings screen, delete the wrong row in a list, or cancel when they meant to confirm. This is the dominant source of rage-taps and one-star reviews on mobile, and it violates the Apple HIG 44pt target and Material Design 48dp target guidance that app store reviewers check against.

Add explicit spacing between every adjacent interactive element. In flex rows, set gap: 12 on the parent View; in FlatList grids, pass columnWrapperStyle={{ gap: 12 }} plus an ItemSeparatorComponent for vertical spacing:

<View style={{ flexDirection: 'row', gap: 12 }}>
  <TouchableOpacity><Text>Cancel</Text></TouchableOpacity>
  <TouchableOpacity><Text>Delete</Text></TouchableOpacity>
</View>

Audit every button group, tab bar, and list row for both horizontal and vertical gaps.

• ID: mobile-ux-patterns.touch-gestures.spacing-between-elements

• Severity: high

• What to look for: Enumerate all layouts with multiple adjacent interactive elements (button groups, form fields, list rows, tab bars). For each group, measure the gap between adjacent touch targets using margin, padding, or gap values.

• Pass criteria: Interactive elements are spaced at least 8 points apart in all layouts. Denser layouts in lists or grids have at least 8pt spacing that prevents accidental taps.

• Fail criteria: Any interactive elements are touching or have less than 8 points between them, creating a high risk of accidental taps. Do NOT pass when gap values are set only in one direction (e.g., vertical gap but no horizontal gap in a grid).

• Skip (N/A) when: The app has fewer than 2 interactive elements per screen or uses single-column layouts where spacing is not a concern.

• Detail on fail: Identify areas where elements are too close. Quote the actual spacing values. Example: "Button group in settings has zero spacing between buttons — users can easily tap the wrong action." or "Tab bar items are 80pt wide on a 375pt screen with no margin, no gap between them."

• Remediation: Add margin or gap between interactive elements to reduce accidental taps. In FlatList or grid layouts, use columnWrapperStyle or item margin:

  <View style={{ flexDirection: 'row', gap: 12 }}>
    <TouchableOpacity><Text>Button 1</Text></TouchableOpacity>
    <TouchableOpacity><Text>Button 2</Text></TouchableOpacity>
  </View>
  
  // Or in FlatList
  <FlatList
    data={items}
    renderItem={() => <Item />}
    ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
    columnWrapperStyle={{ gap: 12 }}
  />