margin

The margin function sets the outer spacing of a component to create appropriate spacing between components. You can specify horizontal (x), vertical (y), and individual direction (top, right, bottom, left) spacing using numbers. You can apply the same value to all directions by entering a number, or set individual values for each direction. There are also presets for commonly used values for easy application.

Signature

typescript

margin: BoxSpacing;

Parameter

optionrequired · BoxSpacingOption
The option value to specify outer spacing. If you enter a number, it applies the same value to all directions,

or you can set individual values for each direction.

Property

xrequired · (value: number) => ViewStyle
Returns a style object that sets the outer spacing of the component's horizontal direction (left and right) by the input number. The returned object is passed to the component's style property to apply the spacing.

x4required · ViewStyle
A style object that applies 4px outer spacing in the horizontal direction

x8required · ViewStyle
A style object that applies 8px outer spacing in the horizontal direction

x12required · ViewStyle
A style object that applies 12px outer spacing in the horizontal direction

x16required · ViewStyle
A style object that applies 16px outer spacing in the horizontal direction

x24required · ViewStyle
A style object that applies 24px outer spacing in the horizontal direction

x32required · ViewStyle
A style object that applies 32px outer spacing in the horizontal direction

yrequired · (value: number) => ViewStyle
Returns a style object that sets the outer spacing of the component's vertical direction (top and bottom) by the input number. The returned object is passed to the component's style property to apply the spacing.

y4required · ViewStyle
A style object that applies 4px outer spacing in the vertical direction

y8required · ViewStyle
A style object that applies 8px outer spacing in the vertical direction

y12required · ViewStyle
A style object that applies 12px outer spacing in the vertical direction

y16required · ViewStyle
A style object that applies 16px outer spacing in the vertical direction

y24required · ViewStyle
A style object that applies 24px outer spacing in the vertical direction

y32required · ViewStyle
A style object that applies 32px outer spacing in the vertical direction

toprequired · (value: number) => ViewStyle
Returns a style object that sets the outer spacing of the component's top direction by the input number. The returned object is passed to the component's style property to apply the spacing.

top4required · ViewStyle
A style object that applies 4px outer spacing to the top

top8required · ViewStyle
A style object that applies 8px outer spacing to the top

top12required · ViewStyle
A style object that applies 12px outer spacing to the top

top16required · ViewStyle
A style object that applies 16px outer spacing to the top

top24required · ViewStyle
A style object that applies 24px outer spacing to the top

top32required · ViewStyle
A style object that applies 32px outer spacing to the top

rightrequired · (value: number) => ViewStyle
Returns a style object that sets the outer spacing of the component's right direction by the input number. The returned object is passed to the component's style property to apply the spacing.

right4required · ViewStyle
A style object that applies 4px outer spacing to the right

right8required · ViewStyle
A style object that applies 8px outer spacing to the right

right12required · ViewStyle
A style object that applies 12px outer spacing to the right

right16required · ViewStyle
A style object that applies 16px outer spacing to the right

right24required · ViewStyle
A style object that applies 24px outer spacing to the right

right32required · ViewStyle
A style object that applies 32px outer spacing to the right

bottomrequired · (value: number) => ViewStyle
Returns a style object that sets the outer spacing of the component's bottom direction by the input number. The returned object is passed to the component's style property to apply the spacing.

bottom4required · ViewStyle
A style object that applies 4px outer spacing to the bottom

bottom8required · ViewStyle
A style object that applies 8px outer spacing to the bottom

bottom12required · ViewStyle
A style object that applies 12px outer spacing to the bottom

bottom16required · ViewStyle
A style object that applies 16px outer spacing to the bottom

bottom24required · ViewStyle
A style object that applies 24px outer spacing to the bottom

bottom32required · ViewStyle
A style object that applies 32px outer spacing to the bottom

leftrequired · (value: number) => ViewStyle
Returns a style object that sets the outer spacing of the component's left direction by the input number. The returned object is passed to the component's style property to apply the spacing.

left4required · ViewStyle
A style object that applies 4px outer spacing to the left

left8required · ViewStyle
A style object that applies 8px outer spacing to the left

left12required · ViewStyle
A style object that applies 12px outer spacing to the left

left16required · ViewStyle
A style object that applies 16px outer spacing to the left

left24required · ViewStyle
A style object that applies 24px outer spacing to the left

left32required · ViewStyle
A style object that applies 32px outer spacing to the left

Example

Example of applying 8px outer spacing in horizontal and vertical directions, and 100px spacing in the bottom direction

tsx

import { margin } from '@granite-js/react-native';
import { View } from 'react-native';

function Component() {
  return (
    <View>
      <View style={margin.x8}>
        <Text>Has horizontal spacing</Text>
      </View>
      <View style={margin.y8}>
        <Text>Has vertical spacing</Text>
      </View>
      <View style={margin.bottom(100)}>
        <Text>Has 100px spacing at the bottom</Text>
      </View>
    </View>
  );
}

margin ​

Signature ​

Parameter ​

Property ​

Example ​