Tip #3: Avoid nested ternary operators (?:) Jan 15

Nested ternary operators in a single line are difficult to read and understand. Instead, refactor them into a separate function or split them across multiple lines with clear grouping.

Avoid

<View style={{ alignItems: closeToRight ? 'flex-end' : closeToLeft ? 'flex-start' : 'center' }} />

Do

function alignItemsByAdjustment (left, right) {
  if (right) {
    return 'flex-end'
  } else if (left) {
    return 'flex-start'
  } else {
    return 'center'
  }
}

<View style={{ alignItems: alignItemsByAdjustment(closeToLeft, closeToRight) }} />