Skip to main content

Spacing

View with specified margins to unify spacing across the app. Thanks to that your app will look more consistent.

Most props take the Spacing type as a value. Default is none which means the margin is set to 0.

type Spacing = 'none' | 'small' | 'medium' | 'large'

You can use the Spacing component to wrap other components or as a divider.

Spacing as a wrapper
<Spacing vertical='small'>
  <Button onPress={navigateToResetPassword}>Remind password</Button>
  <Button onPress={navigateToCreateAccount}>Sign Up</Button>
</Spacing>
Spacing as a divider
<Button onPress={handleOpenPress}>Open</Button>
<Spacing mTop='medium' />
<Button onPress={handleSkipPress}>Skip</Button>

Changing margin value​

Predefined margin values are set by the getMargin function inside the component file. When you want to change what small, medium and large means in your app simply change values returned by the switch statement.

Props​

We cannot use prop names like top, left and marginTop, marginLeft etc. as it shadows Layout Props from React Native and causes crashes. See more on Layout Props docs

mBottom​

Set style margin-bottom value.

Example
<Spacing mBottom='small'>

mLeft​

Set style margin-left value.

Example
<Spacing mLeft='small'>

mRight​

Set style margin-right value.

Example
<Spacing mRight='small'>

mTop​

Set style margin-top value.

Example
<Spacing mTop='small'>

horizontal​

Set style margin-left and margin-right value.

Example
<Spacing horizontal='small'>

vertical​

Set style margin-top and margin-bottom value.

Example
<Spacing vertical='small'>

width​

Set style width value. Defaults to auto.

Unfortunately, we have to use string and add the px suffix as styled-components requires it.

Example
<Spacing width='20px'>