AnimatedWrapper

React Native View에 진입·퇴장 애니메이션, 테마 배경색, elevation 그림자를 함께 적용하는 저수준 래퍼입니다. ZSView가 내부에서 사용하는 기반 컴포넌트이며, 애니메이션 시간을 직접 제어해야 할 때 사용합니다.

일반적인 테마 카드와 레이아웃에는 API가 더 단순한 ZSView를 우선 사용하세요.

앱 예제 Playgroundv0.19.4

소스 보기새 창에서 열기

Interactive exampleAnimatedWrapper 로컬 웹 예제

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

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

기본 사용법

import { AnimatedWrapper, ZSText } from '@0610studio/zs-ui';

<AnimatedWrapper
  isAnimation
  duration={240}
  color="primary.10"
  elevationLevel={3}
  style={{ borderRadius: 16, padding: 20 }}
>
  <ZSText typo="body.2">애니메이션 카드</ZSText>
</AnimatedWrapper>

Props

Prop	Type	Default	Description
isAnimation	boolean	true	true면 FadeInDown 진입과 FadeOut 퇴장 애니메이션 적용
duration	number	200	진입 애니메이션 시간(ms)
elevationLevel	ShadowLevel	0	테마 그림자 단계(0~9)
color	ViewColorOptions	undefined	테마 팔레트 기반 배경색
children	React.ReactNode	undefined	내부 콘텐츠
...props	ViewProps	-	React Native View 속성

애니메이션 없이 사용

isAnimation={false}면 Reanimated 진입·퇴장 효과 없이 일반 View로 렌더링하면서 배경색과 elevation 스타일은 유지합니다.

<AnimatedWrapper isAnimation={false} color="layer1" elevationLevel={2}>
  <Content />
</AnimatedWrapper>

선택 기준

요구사항	권장 API
테마 배경과 그림자만 필요	ZSView
진입 애니메이션 on/off만 필요	ZSView isAnimation
애니메이션 시간을 직접 지정	AnimatedWrapper