Inline style props à la Shopify Restyle

[timoisalive]

Has there ever been thoughts about enabling use of inline style props like Shopify Restyle or the late Styled System?

For example:

    <Box
      flex={1}
      backgroundColor="mainBackground"
      paddingVertical="xl"
      paddingHorizontal="m"
    >
      <Text variant="header">Welcome</Text>
      <Box
        flexDirection={{
          phone: 'column',
          tablet: 'row',
        }}
      >
        <Card margin="s" variant="secondary">
          <Text variant="body">This is a simple example</Text>
        </Card>
        <Card margin="s" variant="primary">
          <Text variant="body">Displaying how to use Restyle</Text>
        </Card>
      </Box>
    </Box>

I really like how Unistyles works, but co-locating the styles with component definition would be a big plus!

[jpudysz]

Hey, Unistyles is only about styling and has no extra abstraction.

You can simply build your own components like Restyle Box. You just need to accept some props and pass them as inline style to the Native View.

At Codemask we also use own abstraction on top of Unistyles! We just don't want to release it the main Unistyles repo.

[jpudysz]

Here is one abstraction for the grid: https://github.com/codemask-labs/react-native-unistyles-grid

[jordmccord]

Think that's a private repo

[jpudysz]

Woops! I will talk to the team if we can make it open

[timoisalive]

Hey that's great, thanks a bunch Jacek! ❤️

[jpudysz]

We will release it in the near future (1-2 weeks) so you will get some inspiration 🙏

We released it now 😄