Feature: `styled` helper, similar to Styled Components

[gksander]

The makeStyledComponent function wraps a component and adds classes and darkClasses props, and many of the docs examples use inline arrays for the class lists. Inevitably, people are going to point out the perf implications of this (even though it is likely very minor, or even negligible). However, we'd like to offer another API that avoids this issue, and looks similar to StyledComponents setup.

Proposed API

I'm proposing the createStyleBuilder return a styled function that accepts a component, and a list of classes. Something like the following:

export const { styled } = createStyleBuilder();

// Other component

const MyComponent = () => {
  return (
    <Container>
      <Text>Hey world, I'm in the center</Text>
    </Container>
  );
}

const Container = styled(View)("flex:1", "justify:center", "items:center");

// Or maybe something like
const Container2 = styled(View)({
  classes: ["flex:1", "justify:center", "items:center"],
  darkClasses: ["bg:gray-900"]
});

This approach takes the classname arrays out of the render-cycle, which avoids creating new arrays each render (and helps with React's comparison algo), but might make the styles less dynamic.

[gksander]

Closed via #20 🥳