UNPKG

@rneui/layout

Version:

Cross Platform React Native UI Toolkit

reactnativeelements.com

react-native-elements/react-native-elements

82 lines (65 loc) • 3.6 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# @rneui/layout > This Component is experimental and may change, **do not use** in production until stable release ## Installation ```bash npm i @rneui/layout ``` ```bash yarn add @rneui/layout ``` ## Stack ### Stack Usage ```tsx <Stack row> <Button>Hey</Button> <Button>Hello</Button> </Stack> ``` ### Stack Props | Name | Type | Default | Description | | --------- | --------------------------------------------------------------------------------------------- | ------------ | ----------- | | `align` | FlexAlignType | `flex-start` | | | `justify` | `center` or `flex-start` or `flex-end` or `space-between` or `space-around` or `space-evenly` | `flex-start` | | | `reverse` | boolean | `false` | | | `row` | boolean | `false` | | | `spacing` | number | `0` | | ## Box ### Box Usage ```tsx live <Box m={3}> <Button>Hey</Button> </Box> ``` ### Box Props | Name | Type | Default | Description | | ------------------- | -------------------- | ------- | ----------- | | `m` | `string` or `number` | | | | `margin` | `string` or `number` | | | | `marginBottom` | `string` or `number` | | | | `marginHorizontal` | `string` or `number` | | | | `marginLeft` | `string` or `number` | | | | `marginRight` | `string` or `number` | | | | `marginTop` | `string` or `number` | | | | `marginVertical` | `string` or `number` | | | | `mb` | `string` or `number` | | | | `ml` | `string` or `number` | | | | `mr` | `string` or `number` | | | | `mt` | `string` or `number` | | | | `mx` | `string` or `number` | | | | `my` | `string` or `number` | | | | `p` | `string` or `number` | | | | `padding` | `string` or `number` | | | | `paddingBottom` | `string` or `number` | | | | `paddingHorizontal` | `string` or `number` | | | | `paddingLeft` | `string` or `number` | | | | `paddingRight` | `string` or `number` | | | | `paddingTop` | `string` or `number` | | | | `paddingVertical` | `string` or `number` | | | | `pb` | `string` or `number` | | | | `pl` | `string` or `number` | | | | `pr` | `string` or `number` | | | | `pt` | `string` or `number` | | | | `px` | `string` or `number` | | | | `py` | `string` or `number` | | | ## Contribution Made by [Arpit Bhalla](https://github.com/arpitbhalla)