v3.1.0

What's Changed

🚀 Features

• feat(Box): add support for borderTopWidth, borderRightWidth, borderBottomWidth and borderLeftWidth @mobily (#49)

v3.0.3

What's Changed

🐛 Bug Fixes

• fix: allow passing 0 to multiply/divide functions @mobily (#48)

v3.0.2

What's Changed

🐛 Bug Fixes

• fix: improve Row.from and Column.from type signatures @mobily (#47)

v3.0.1

What's Changed

🐛 Bug Fixes

• fix: 🐛 Export all props of the components @mobily (#46)

v3.0.0

What's Changed

Stacks is now published in the @grapp scope. So, you need to fix the imports first. Don't worry, it's a quick fix!

@mobily/stacks → @grapp/stacks

General

The Stacks library has been completely rewritten in TypeScript, so it no longer supports ReScript.
React Native Unistyles is a core dependency.
The flex gap values now define spaces between components (excluding Columns, see this).

Components

Provider

Stacks now uses Unistyles, which means that you can remove StacksProvider from the React component tree and provide configuration values to the Unistyles theme object, as described here.

Box

Several new props have been added to the Box component, including width, height, gap, rowGap, columnGap, backgroundColor, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, borderColor, borderWidth, and debuggable.

Columns

The defaultWidth prop is now defaultFlex, and the width prop has been changed to flex.
Use Column.from to create a custom Column component.
The markAsColumn prop has been removed.

FillView

FillView has been renamed to FloatBox.
The unset helper has been removed, and the positioning has been fixed if you don't provide all offset values.

Hidden

Experimental support for hiding elements by transforming the React component tree with the provided Babel plugin has been added.

Inline

The spaceX and spaceY props have been added.

Rows

The defaultHeight prop is now defaultFlex, and the height prop has been changed to flex.
Use Row.from to create a custom Row component.
The markAsRow prop has been removed.

Tiles

The spaceX and spaceY props have been added, and empty has been renamed to fill.

Hooks

• useStacks has been removed, as StacksProvider is no longer needed.
• useCurrentBreakpoint has been removed. To get the current breakpoint name, you can use useStyles from Unistyles.
• useSpacing has been removed. To achieve the same result, you can use useSpacingHelpers and multiply.
• useWindowDimensions has been removed. You can now get the screen dimensions with UnistylesRuntime.screen.

v2.2.2

• 🔧 improved support for RNW
• 🐛 improved TS types of useSpacingHelpers functions

v2.2.1

• 🐛 fixed the empty prop type (Tiles)

v2.2.0

• ✨ added the as prop to Box, which allows rendering another element (for instance Animated.View) instead of View

v2.1.0

• ✨ added the defaultWidth prop to Columns, which allows to set a default column width behavior (@domeknn)
• ✨ added the defaultHeight prop to Rows, which allows to set a default row height behavior (@domeknn)
• 🐛 fixed an issue occured in react-testing-library and react-native-web, #35
• 🐛 minor bug fixes

v2.0.0

• ✨ added the Bleed component
• ✨ added the Inset component
• ♻️ Column: removed the height prop (as it has been added to the Columns component)
• 🔥 FillView: removed the flex prop
• ♻️ FillView: renamed reset to unset
• ♻️ Inline: align is now alignX
• ✨ Inline: added the alignY prop
• ✨ Tiles: added the empty prop
• 🐛 minor tweaks and fixes

You can also use Columns/Rows with no Column/Row in the markup tree, for instance, the following:

<Columns>
  <Placeholder />
  <Rows>
    <Placeholder />
    <Placeholder />
  </Rows>
</Columns>

equals to:

<Columns>
  <Column>
    <Placeholder />
  </Column>
  <Column>
    <Rows>
      <Row>
        <Placeholder />
      </Row>
      <Row>
        <Placeholder />
      </Row>
    </Rows>
  </Column>
</Columns>