Bringing Pseudo Elements to RN

[idibidiart]

@peacechen

\ Some content... \</Row>

Applies to Col, too, and rule that Row can't have Row as child and Col can't have Col as child applies to slots, too.

It would place the output of someComponent before "Some content" and the output of anotherComponent after "Some content"

If "Some content" is null then content from "slot-before" component would be inserted at top and content from "slot-after" after component would be inserted below it. If only slot-after is given and "Some content" is null then content from slot-after would be inserted at top.

It does two things:

1. gives us something similar to CSS' ::before and ::after pseudo elements
2. allows us to break down large trees of Row/Col into sub-trees that can be composed as we like, i.e, modular construction and reuse

I understand you can do bullet no. 2 today by creating SomeComponent that contains a reusable Row/Col sub-tree but that prevents us from enforcing the Row/Col alternating nesting pattern (as child won't be of type Row or Col but of type SomeComponent so we can't check) and more importantly it obfuscate the consistent pattern of a tree of alternating Row/Col that makes it easy to infer layout from just looking the JSX (as opposed to having SomeComponent and SomeOtherComponent obfuscate/interrupt that visual pattern)

Definitely a visually oriented enhancement to reinforce the pattern and keep the JSX visually simple fro a cognitive point of view. Not introducing any new functionality.

I'm tempted to add it and play with it but would like your educated opinion as someone who is actually using this library.

Thank you :)

[peacechen]

I don't have a use case for that feature right now, but it sounds like a good enhancement. Since the intent is to mimic CSS, would it make sense to name the new props before and after instead of prepending slot-?

Would this be an example of how you intend it to be used?

Currently:

<Row>
  // This is the 'before' section
  <Col>
    <Text>'before' content</Text>
  </Col>

  <Col>
    <Text>Some regular content</Text>
  </Col>

  // This is the 'after' section
  <Col>
    <Text>'after' content</Text>
  </Col>

</Row>

Someone could create a 'before' component that returns a <Col/> which isn't obvious that it's actually a Col? E.g.

<Row>
  // This is the 'before' section
  <MyComponent />

  <Col>
    <Text>Some regular content</Text>
  </Col>
...

[idibidiart]

Yes. It will give us a way to enforce the row/col alternating structure of the UI tree except when user is using RN’s own components like ScrollView etc which are Cols by default and if they choose to use a non-Row/Col component (3rd party or their own)

It’s really a reuse pattern that preserves the visual structure of alternating row/col ... other reuse patterns do not.

The word slot comes from Angular and Web Components where it is just “slit” and expecting no children to place before or after. This one mimics both slots as well as pseudo elements.

[idibidiart]

Slot not slit

[peacechen]

How are before/after components validated to be valid Row/Col children? Or does it not matter for the before/after components?

[idibidiart]

Will PoC this soon. Easier to clarify in code.