Spacing

지원환경: React NativeReact Native SDKv1.0.3

실행환경: Toss AppSandbox App

Spacing은 빈 공간을 차지해 가로 또는 세로 방향으로 여백을 추가하는 컴포넌트예요.
화면 요소 사이의 간격을 일정하게 맞추거나, 시각적인 구분을 줄 때 사용해요.

시그니처

Spacing: import("react").NamedExoticComponent<Props>

파라미터

• propsobject
  

  컴포넌트에 전달되는 props 객체예요.

  • props.size필수 · number
    

    여백의 크기를 설정해요.

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

    여백을 차지할 방향이에요. 기본값은 'vertical'이에요.

  • props.styleStyleProp<ViewStyle>
    

    Spacing 컴포넌트에 적용할 style 값이에요. 기본값은 undefined이고, 추가 스타일을 지정할 수 있어요.

예제

세로 방향으로 여백 추가하기

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

function VerticalSpacingExample() {
  return (
    <View>
      <Text>Top</Text>
      <Spacing size={16} direction="vertical" style={{ backgroundColor: 'red', width: 5 }} />
      <Text>Bottom — 세로 여백만큼 아래에 위치해요</Text>
    </View>
  );
}

가로 방향으로 여백 추가하기

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

function HorizontalSpacingExample() {
  return (
    <View style={{ flexDirection: 'row' }}>
      <Text>Left</Text>
      <Spacing size={16} direction="horizontal" style={{ backgroundColor: 'red', height: 5 }} />
      <Text>Right — 가로 여백만큼 옆에 위치해요</Text>
    </View>
  );
}

참고사항

• Spacing은 margin이나 padding 대신 명시적으로 간격을 줄 때 유용해요.
• direction 속성을 통해 한쪽 방향의 여백만 적용할 수 있어요.
• size 값은 숫자(px 단위)로 지정하며, 반응형 간격이 필요할 경우 StyleSheet와 함께 사용할 수 있어요.