# Stack (experimental)

An Orbit component for stacking elements.

To import the `Stack` component to your project:

```jsx
import { Stack } from '@kiwicom/orbit-react-native';
```

## Usage

```jsx
<Stack>
  <Button>Go left</Button>
  <Button iconLeft={<ChevronRight />} />
</Stack>
```

## API Diff vs Orbit React

- `inline` is not possible in React-Native, so the property is not supported,
- `flex` is not supported, everything will always render in flexbox in React-Native.

## Props

Table below contains all types of the props available in Stack component.

| Name         | Type                  | Default     | Description                                                                                                                                     |
| :----------- | :-------------------- | :---------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **children** | `React.Node`          |             | Content of the Stack.                                                                                                                           |
| testID       | `string`              |             | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!)                                  |
| element      | `string`              | `"div"`     | The string used for the root node.                                                                                                              |
| align        | [`enum`](#enum)       | `"start"`   | The `align-items` and `align-content` of the Stack.                                                                                             |
| basis        | `string`              | `auto`      | Specifies the basis value of `flex-basis`.                                                                                                      |
| direction    | [`enum`](#enum)       | `"row"`     | The `flex-direction` of the Stack. [See Functional specs](#functional-specs)                                                                    |
| grow         | `boolean`             | `false`     | If `true`, the Stack will have `flex-grow` set to `1`, otherwise it will be `0`.                                                                |
| justify      | [`enum`](#enum)       | `"start"`   | The `justify-content` of the Stack.                                                                                                             |
| shrink       | `boolean`             | `false`     | If `true`, the Stack will have `flex-shrink` set to `1`.                                                                                        |
| wrap         | `boolean`             | `false`     | If `true`, the Stack will have `flex-wrap` set to `wrap`, otherwise it will be `nowrap`.                                                        |
| fullWidth    | `boolean`             | `false`     | If `true`, the Stack will have grow up to the full width of its container.                                                                      |
| spacing      | [`spacing`](#spacing) | `"natural"` | The spacing between its children.                                                                                                               |
| spaceAfter   | `enum`                |             | Additional `padding` to bottom of the Stack. [See this doc](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken) |

## Functional specs

- The default behaviour for the React-Native (both web and native) `Stack` component is to always be a `flexbox` container.

- If you specify some property (except children, spaceAfter, testID and spacing) it will become a `flexbox` container and the `flex-direction: row` will be used.

### enum

| justify     | direction          | align      |
| :---------- | :----------------- | :--------- |
| `"start"`   | `"row"`            | `"start"`  |
| `"end"`     | `"column"`         | `"end"`    |
| `"center"`  | `"row-reverse"`    | `"center"` |
| `"between"` | `"column-reverse"` |
| `"around"`  |

+children: React.Node,
+testID?: string,
+direction?: DirectionType,
+grow?: boolean,
+justify?: JustifyType,
+wrap?: boolean,
+shrink?: boolean,
+fullWidth?: boolean,
+align?: AlignType,
+basis?: string | number,
+spacing?: SpacingType,
+spaceAfter?: spaceAfterType,

## TODO

- consider add the media Query for styles as is used in the react-orbit. (https://orbit.kiwi/layout/stack/react/)