ZSSwitch

애니메이션이 적용된 토글 스위치 컴포넌트입니다. RN 의 CSS transition(transitionProperty)으로 트랙 색상과 썸 위치를 부드럽게 전환합니다.

앱 예제 Playgroundv1.0.3

소스 보기새 창에서 열기

Interactive exampleZSSwitch 로컬 웹 예제

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

기본 사용법

import { ZSSwitch } from '@0610studio/zs-ui';
import { useState } from 'react';

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <ZSSwitch
      isActive={isActive}
      onToggle={() => setIsActive(!isActive)}
    />
  );
}

Props

Prop	Type	Default	Description
isActive	boolean	Required	스위치의 활성화 상태
onToggle	() => void	Required	토글 시 호출되는 함수
style	StyleProp<ViewStyle>	undefined	컨테이너 스타일
width	number	50	스위치의 너비 (높이는 자동으로 계산됨: width * 0.6)
trackColorInactive	string	테마 grey[30]	비활성화 상태의 트랙 색상
trackColorActive	string	테마 primary.main	활성화 상태의 트랙 색상
thumbColor	string	'#FFFFFF'	썸(움직이는 원)의 색상
disabled	boolean	false	true일 때 토글이 비활성화되고 흐리게 표시됩니다
...props	ViewProps	-	React Native View의 모든 기본 속성

특징

• 부드러운 애니메이션: 200ms(DURATION.base) 동안 ease-in-out 으로 전환됩니다
• 반응형 크기: 높이는 너비의 60%, 썸 크기와 여백도 너비에서 파생됩니다
• 테마 통합: 테마 색상을 사용하여 일관된 디자인 유지

예제

커스텀 색상을 적용한 예시입니다.

<ZSSwitch
  isActive={isActive}
  onToggle={() => setIsActive(!isActive)}
  trackColorInactive="#e0e0e0"
  trackColorActive="#4CAF50"
  thumbColor="#ffffff"
/>