View, Flex, Row, Col, aligns

[kylpo]

Notes for how to solve or explain the case for View hiding its flexbox implementation with alignHorizontal and alignVertical props vs align, justify.

Main problem for not using alignHorizontal and alignVertical in Flex, Col, Row is the existence of justify-content's space-between, space-around, space-evenly, and align-items's baseline, stretch. How to support alignH/V while still enabling those values?

cc @thomasbruketta

[kylpo]

One attempt:

<View
  horizontal
  alignHorizontal='left'
  alignVertical='top'
  spaceItems='between' | 'around' | 'evenly'
  ...
/>

Starts to break down there. Based on flex-direction, the spaceItems value will override alignHorizontal or alignVertical, which is weird.

/shurg

[kylpo]

Another idea from Thomas: remove alignHorizontal and alignVertical. Have View function as Flex is today. This means there'd also be no reason to have Col, so Row should go away, too (see the horizontal prop above).

Pros: deletes code in monorepo, reduces components available, probably less to explain Cons: lose the convenient align_s, locked in to the association of View using flexbox, lose out on some context for skimming: View, Col, Row, Flex have distinct purposes that are easier to discover than a prop, but that might not be a big deal

<View
  horizontal
  align='flex-end'                     // or 'end' (and 'start' over 'flex-start')
  justify='space-between'
  ...
/>

[kylpo]

Another: let Col and Row use alignH|V, with align and justify overrides

<Row
  alignHorizontal='right'
  alignVertical='bottom'
  justify='space-between'    // overrides alignHorizontal
  ...
/>

that way, alignH|V is just a convenience prop for flex-start, center, flex-end.

Pros: get to use alignH|V Row and Col for the more common justify and aligns Cons: confusion in how/why an alignH=right is not honored. Muddies the boundaries more between the 4 components

• Questions: Why not just have justify and align in View and remove Col and Flex. Why even have Row then?
• Taking it to extremes: why have ScrollView if we could just add a scrollable prop to View?
  • Potential answer: props available to ScrollView are different enough to justify a new component. <View horizontal /> doesn't actually change the props available, it just modifies the effect of some of them (like align).
• Why call it View if it is actually more like a Col?
  • Potential answer: because it can become a row. For now it is just defaulted to a col.
• Why not just call it Flex?
  • Potential answer: because it is an abstraction on top of Flexbox and doesn't map one to one with flex properties. For example, it doesn't use alignItems or justifyContent - it uses align and justify. It has conveniences like fit and grow. It may not use direction= (it might use horizontal instead).