A set of components for building layouts in React Native. Powered by React Native Unistyles.
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
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).
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.
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
.
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
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.
Experimental support for hiding elements by transforming the React component tree with the provided Babel
plugin has been added.
The spaceX
and spaceY
props have been added.
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.
The spaceX
and spaceY
props have been added, and empty
has been renamed to fill
.
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
.useSpacingHelpers
functionsempty
prop type (Tiles)as
prop to Box
, which allows rendering another element (for instance Animated.View
) instead of View
defaultWidth
prop to Columns
, which allows to set a default column width behavior (@domeknn)defaultHeight
prop to Rows
, which allows to set a default row height behavior (@domeknn)react-testing-library
and react-native-web
, #35
Bleed
componentInset
componentColumn
: removed the height
prop (as it has been added to the Columns
component)FillView
: removed the flex
propFillView
: renamed reset
to unset
Inline
: align
is now alignX
Inline
: added the alignY
propTiles
: added the empty
propYou 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>