# List

To implement List component into your project you'll need to add the import:

```jsx
import { List, ListItem } from '@kiwicom/orbit-react-native';
```

After adding import into your project you can use it simply like:

```jsx
<List>
  <ListItem>Hello world!</ListItem>
</List>
```

## Props

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

| Name         | Type                  | Default     | Description                                                                                                                                    |
| :----------- | :-------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
| **children** | `React.Node | string` |             | The content of the List, normally [`ListItem`](#listitem-props).                                                                               |
| testID       | `string`              |             | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!)                                 |
| size         | [`enum`](#enum)       | `"normal"`  | The size of the List.                                                                                                                          |
| spaceAfter   | `enum`                |             | Additional `marginBottom` after component. [See this docs](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken) |
| type         | [`enum`](#enum)       | `"primary"` | The color type of the List.                                                                                                                    |

### ListItem Props

Table below contains all types of the props in ListItem component.

| Name         | Type         | Default         | Description                                                                            |
| :----------- | :----------- | :-------------- | :------------------------------------------------------------------------------------- |
| **children** | `React.Node` |                 | The content of the ListItem.                                                           |
| icon         | `React.Node` | `"CircleSmall"` | The displayed Icon or CarrierLogo component. [See Functional specs](#functional-specs) |

### enum

| size       | type          |
| :--------- | :------------ |
| `"small"`  | `"primary"`   |
| `"normal"` | `"secondary"` |
| `"large"`  | `"separated"` |

#### Functional specs

- You can color your icon if you pass some value into `color` or `customColor` prop of the [Icon](./Icon). Be aware of using other components, because they are not styled by default.