Spacing

Control spacing with margin, padding, and gap utilities.

Margin

Apply margin to all sides or specific directions:

All Sides

<View className="m-4" /> // margin: 16
<View className="m-0" /> // margin: 0
<View className="m-8" /> // margin: 32

Horizontal & Vertical

<View className="mx-4" /> // marginHorizontal: 16
<View className="my-2" /> // marginVertical: 8

Directional

<View className="mt-4" /> // marginTop: 16
<View className="mr-2" /> // marginRight: 8
<View className="mb-6" /> // marginBottom: 24
<View className="ml-3" /> // marginLeft: 12

Padding

Apply padding to all sides or specific directions:

All Sides

<View className="p-4" /> // padding: 16
<View className="p-0" /> // padding: 0
<View className="p-8" /> // padding: 32

Horizontal & Vertical

<View className="px-4" /> // paddingHorizontal: 16
<View className="py-2" /> // paddingVertical: 8

Directional

<View className="pt-4" /> // paddingTop: 16
<View className="pr-2" /> // paddingRight: 8
<View className="pb-6" /> // paddingBottom: 24
<View className="pl-3" /> // paddingLeft: 12

Gap

Control spacing between flex items:

<View className="flex-row gap-4">
  <View className="flex-1 bg-blue-500" />
  <View className="flex-1 bg-red-500" />
</View>

Available Sizes

Spacing values follow a scale where 1 = 4px:

Class	Value (px)
0	0
0.5	2
1	4
1.5	6
2	8
2.5	10
3	12
3.5	14
4	16
5	20
6	24
7	28
8	32
9	36
10	40
11	44
12	48
14	56
16	64
20	80
24	96
28	112
32	128
36	144
40	160
44	176
48	192
52	208
56	224
60	240
64	256
72	288
80	320
96	384

Arbitrary Values

Use arbitrary values for custom spacing not in the preset scale:

<View className="m-[16px]" />   // margin: 16
<View className="p-[20px]" />   // padding: 20
<View className="mx-[24px]" />  // marginHorizontal: 24
<View className="gap-[12px]" /> // gap: 12

Note

Arbitrary spacing values only support pixel values. Percentages and other units are not supported.

Common Patterns

Card with consistent spacing

<View className="p-4 m-2 gap-3 bg-white rounded-lg">
  <Text className="text-xl font-bold">Title</Text>
  <Text className="text-base">Description</Text>
  <View className="mt-2">
    <Text className="text-sm text-gray-600">Footer</Text>
  </View>
</View>

Horizontal layout with gaps

<View className="flex-row gap-4 p-4">
  <View className="w-12 h-12 bg-blue-500 rounded" />
  <View className="w-12 h-12 bg-red-500 rounded" />
  <View className="w-12 h-12 bg-green-500 rounded" />
</View>

Responsive spacing

<View className="p-4 ios:p-6 android:p-8">
  <Text>Platform-specific padding</Text>
</View>

Related

• Layout - Flexbox utilities
• Sizing - Width and height utilities
• Arbitrary Values - Custom spacing values