Stacks v4.0.0 (with Unistyles v3)

[mobily]

This PR brings a major update to Stacks. It's using Unistyles v3 now, and you'll need at least React Native v0.76.0 to get started. Since Unistyles v3 is still in beta, this new version of Stacks is also in beta for the time being. Once Unistyles gets to a stable version, I'll release a stable version of Stacks too.

To grab the beta version of Stacks, just run the following command:

npm install @grapp/stacks@beta

yarn add @grapp/stacks@beta

pnpm add @grapp/stacks@beta

bun add @grapp/stacks@beta

What's New

Box

New props have been added:

• outlineColor
• outlineStyle
• outlineWidth
• outlineOffset
• pointerEvents
• opacity
• overflow

The outline* props are available only if you use RN v0.77.0 at least.

Columns / Column

I've cleaned things up by removing a bunch of props from both components. Here's what's gone:

• backgroundColor
• borderRadius
• borderTopLeftRadius
• borderTopRightRadius
• borderBottomLeftRadius
• borderBottomRightRadius
• borderWidth
• borderTopWidth
• borderRightWidth
• borderBottomWidth
• borderLeftWidth
• borderColor

Also, the following new props are not included:

• outlineColor
• outlineStyle
• outlineWidth
• outlineOffset

So instead of using your components like this:

<Columns space={2} backgroundColor="red">
  <Column flex="1/2" borderWidth={1} borderColor="yellow">…</Column>
  <Column flex="1/2">…</Column>
</Columns>

You should switch to this format:

<Box backgroundColor="red">
  <Columns space={2}>
    <Column flex="1/2">
      <Box borderWidth={1} borderColor="yellow">
        …
      </Box>
    </Column>
    <Column flex="1/2">…</Column>
  </Columns>
</Box>

I'm super excited about this release, a new version of Unistyles looks fantastic! If you run into any bugs or have ideas on how we can make things better, I'd love to hear from you.