Spacing

Spacing is a component that adds margin by occupying empty space. You can specify the size of the margin in either horizontal or vertical direction.

Signature

Spacing: import('react').NamedExoticComponent<Props>;

Parameter

• propsobject
  

  The props object passed to the component.

  • props.sizerequired · number
    

    A numeric value that sets the size of the margin.

  • props.direction'vertical' | 'horizontal' · 'vertical'
    

    Sets the direction in which the margin will occupy space. Default value is 'vertical'.

  • props.styleStyleProp<ViewStyle>
    

    The style value to be applied to the Spacing component. Default value is undefined, used when applying additional styles.

Example

Example of creating empty space by adding margins of size 16 in both horizontal and vertical directions

import { View, Text } from 'react-native';
import { Spacing } from '@granite-js/react-native';

export function SpacingExample() {
  return (
    <View>
      <Text>Top</Text>
      <Spacing size={16} direction="vertical" style={{ backgroundColor: 'red', width: 5 }} />
      <Text>Bottom, positioned below by the vertical margin</Text>

      <View style={{ flexDirection: 'row' }}>
        <Text>Left</Text>
        <Spacing size={16} direction="horizontal" style={{ backgroundColor: 'red', height: 5 }} />
        <Text>Right, positioned to the side by the horizontal margin</Text>
      </View>
    </View>
  );
}