Sizing

Width

Width size use spacing value from spacing config and width. It use rem unit, please refer how we use rem in React native in Spacing Size page.

class	style
w-0	width: 0
w-1	width: 4
w-2	width: 8
w-3	width: 12
w-4	width: 16
w-5	width: 20
w-6	width: 24
w-8	width: 32
w-10	width: 40
w-12	width: 48
w-16	width: 64
w-20	width: 80
w-24	width: 96
w-32	width: 128
w-40	width: 160
w-48	width: 192
w-56	width: 224
w-64	width: 256
w-px	width: 1
w-1/2	width: 50%
w-1/3	width: 33.333333%
w-2/3	width: 66.666667%
w-1/4	width: 25%
w-2/4	width: 50%
w-3/4	width: 75%
w-1/5	width: 20%
w-2/5	width: 40%
w-3/5	width: 60%
w-4/5	width: 80%
w-1/6	width: 16.666667%
w-2/6	width: 33.333333%
w-3/6	width: 50%
w-4/6	width: 66.666667%
w-5/6	width: 83.333333%
w-1/12	width: 8.333333%
w-2/12	width: 16.666667%
w-3/12	width: 25%
w-4/12	width: 33.333333%
w-5/12	width: 41.666667%
w-6/12	width: 50%
w-7/12	width: 58.333333%
w-8/12	width: 66.666667%
w-9/12	width: 75%
w-10/12	width: 83.333333%
w-11/12	width: 91.666667%
w-full	width: 100%

Min Width

class	style
min-w-0	minWidth: 0
min-w-1	minWidth: 4
min-w-2	minWidth: 8
min-w-3	minWidth: 12
min-w-4	minWidth: 16
min-w-5	minWidth: 20
min-w-6	minWidth: 24
min-w-8	minWidth: 32
min-w-10	minWidth: 40
min-w-12	minWidth: 48
min-w-16	minWidth: 64
min-w-20	minWidth: 80
min-w-24	minWidth: 96
min-w-32	minWidth: 128
min-w-40	minWidth: 160
min-w-48	minWidth: 192
min-w-56	minWidth: 224
min-w-64	minWidth: 256
min-w-px	minWidth: 1
min-w-1/2	minWidth: 50%
min-w-1/3	minWidth: 33.333333%
min-w-2/3	minWidth: 66.666667%
min-w-1/4	minWidth: 25%
min-w-2/4	minWidth: 50%
min-w-3/4	minWidth: 75%
min-w-1/5	minWidth: 20%
min-w-2/5	minWidth: 40%
min-w-3/5	minWidth: 60%
min-w-4/5	minWidth: 80%
min-w-1/6	minWidth: 16.666667%
min-w-2/6	minWidth: 33.333333%
min-w-3/6	minWidth: 50%
min-w-4/6	minWidth: 66.666667%
min-w-5/6	minWidth: 83.333333%
min-w-1/12	minWidth: 8.333333%
min-w-2/12	minWidth: 16.666667%
min-w-3/12	minWidth: 25%
min-w-4/12	minWidth: 33.333333%
min-w-5/12	minWidth: 41.666667%
min-w-6/12	minWidth: 50%
min-w-7/12	minWidth: 58.333333%
min-w-8/12	minWidth: 66.666667%
min-w-9/12	minWidth: 75%
min-w-10/12	minWidth: 83.333333%
min-w-11/12	minWidth: 91.666667%
min-w-full	minWidth: 100%

Max Width

class	style
max-w-0	maxWidth: 0
max-w-1	maxWidth: 4
max-w-2	maxWidth: 8
max-w-3	maxWidth: 12
max-w-4	maxWidth: 16
max-w-5	maxWidth: 20
max-w-6	maxWidth: 24
max-w-8	maxWidth: 32
max-w-10	maxWidth: 40
max-w-12	maxWidth: 48
max-w-16	maxWidth: 64
max-w-20	maxWidth: 80
max-w-24	maxWidth: 96
max-w-32	maxWidth: 128
max-w-40	maxWidth: 160
max-w-48	maxWidth: 192
max-w-56	maxWidth: 224
max-w-64	maxWidth: 256
max-w-px	maxWidth: 1
max-w-1/2	maxWidth: 50%
max-w-1/3	maxWidth: 33.333333%
max-w-2/3	maxWidth: 66.666667%
max-w-1/4	maxWidth: 25%
max-w-2/4	maxWidth: 50%
max-w-3/4	maxWidth: 75%
max-w-1/5	maxWidth: 20%
max-w-2/5	maxWidth: 40%
max-w-3/5	maxWidth: 60%
max-w-4/5	maxWidth: 80%
max-w-1/6	maxWidth: 16.666667%
max-w-2/6	maxWidth: 33.333333%
max-w-3/6	maxWidth: 50%
max-w-4/6	maxWidth: 66.666667%
max-w-5/6	maxWidth: 83.333333%
max-w-1/12	maxWidth: 8.333333%
max-w-2/12	maxWidth: 16.666667%
max-w-3/12	maxWidth: 25%
max-w-4/12	maxWidth: 33.333333%
max-w-5/12	maxWidth: 41.666667%
max-w-6/12	maxWidth: 50%
max-w-7/12	maxWidth: 58.333333%
max-w-8/12	maxWidth: 66.666667%
max-w-9/12	maxWidth: 75%
max-w-10/12	maxWidth: 83.333333%
max-w-11/12	maxWidth: 91.666667%
max-w-full	maxWidth: 100%

Height

Width size use spacing value from spacing config. It use rem unit, please refer how we use rem in React native in Spacing Size page.

class	style
h-0	height: 0
h-1	height: 4
h-2	height: 8
h-3	height: 12
h-4	height: 16
h-5	height: 20
h-6	height: 24
h-8	height: 32
h-10	height: 40
h-12	height: 48
h-16	height: 64
h-20	height: 80
h-24	height: 96
h-32	height: 128
h-40	height: 160
h-48	height: 192
h-56	height: 224
h-64	height: 256

min height

class	style
min-h-0	minHeight: 0
min-h-1	minHeight: 4
min-h-2	minHeight: 8
min-h-3	minHeight: 12
min-h-4	minHeight: 16
min-h-5	minHeight: 20
min-h-6	minHeight: 24
min-h-8	minHeight: 32
min-h-10	minHeight: 40
min-h-12	minHeight: 48
min-h-16	minHeight: 64
min-h-20	minHeight: 80
min-h-24	minHeight: 96
min-h-32	minHeight: 128
min-h-40	minHeight: 160
min-h-48	minHeight: 192
min-h-56	minHeight: 224
min-h-64	minHeight: 256

max height

class	style
max-h-0	maxHeight: 0
max-h-1	maxHeight: 4
max-h-2	maxHeight: 8
max-h-3	maxHeight: 12
max-h-4	maxHeight: 16
max-h-5	maxHeight: 20
max-h-6	maxHeight: 24
max-h-8	maxHeight: 32
max-h-10	maxHeight: 40
max-h-12	maxHeight: 48
max-h-16	maxHeight: 64
max-h-20	maxHeight: 80
max-h-24	maxHeight: 96
max-h-32	maxHeight: 128
max-h-40	maxHeight: 160
max-h-48	maxHeight: 192
max-h-56	maxHeight: 224
max-h-64	maxHeight: 256

Size

To quickly set the size of a component you can use size-[value] format. Below is predefined sizes in size & aspectRatio config.

class	style
size-5	width: 5, height: 5
size-10	width: 10, height: 10
size-16	width: 16, height: 16
size-32	width: 32, height: 32
size-48	width: 48, height: 48
size-64	width: 64, height: 64
size-1/1	aspectRatio: 1
size-1/2	aspectRatio: 0.5
size-3/4	aspectRatio: 0.75
size-4/3	aspectRatio: 1.3
size-3/2	aspectRatio: 1.5
size-16/9	aspectRatio: 1.78