본문으로 건너뛰기
react-native-strx v1.0.0-beta.1

컴포넌트와 앱

커스텀 컴포넌트

createStrxComponent로 어떤 컴포넌트든 animate prop을 쓸 수 있게 만들어요.

createStrxComponent로 컴포넌트를 감싸면 animate와 다른 STRX prop을 쓸 수 있어요. 원래 prop과 style 타입은 그대로 남아요.

1import { createStrxComponent } from "react-native-strx";2import { SafeAreaView } from "react-native-safe-area-context";34const StrxSafeAreaView = createStrxComponent(SafeAreaView, {5  displayName: "Strx.SafeAreaView",6});78<StrxSafeAreaView animate="fade-in layout-linear" style={{ flex: 1 }} />;

감싼 컴포넌트는 STRX 기능을 모두 쓸 수 있어요. 등장 애니메이션, 키프레임, exit:, transition-*, 레이아웃 트랜지션과 상속, playback, 타임라인용 strxId까지요.

시그니처

1function createStrxComponent<Props extends object, RefType = unknown>(2  Component: React.ComponentType<Props>,3  options?: StrxComponentOptions,4): React.ForwardRefExoticComponent<StrxComponentProps<Props> & React.RefAttributes<RefType>>;
옵션타입기본값의미
displayName
string
Strx.<ComponentName>
React DevTools에 보이는 이름
nativeView
boolean
true
최적화로 사라질 수 있는 네이티브 뷰를 그리는 컴포넌트인지 정해요. true면 STRX가 collapsable={false}를 넣어서 애니메이션이 실제 뷰에 적용되게 해요. 텍스트 같은 컴포넌트에는 false를 써 주세요.

StrxComponentProps<Props>는 원래 prop에 animate, playback, interval, strxId, layoutClip, layoutPropagation을 더한 타입이에요. style은 원래 컴포넌트의 style 타입을 그대로 써요.

감쌀 컴포넌트가 지켜야 할 것

감싼 컴포넌트는 Reanimated의 createAnimatedComponent를 거치기 때문에, 이 조건을 지켜 주세요.

  • style prop을 네이티브 뷰까지 전달해야 해요. 애니메이션 값이 거기에 쓰여요.
  • 레이아웃 애니메이션과 퇴장 애니메이션을 쓰려면 가장 바깥 요소가 그 네이티브 뷰여야 해요.
  • 감싼 컴포넌트는 렌더 함수 안이 아니라 모듈 최상위에서 한 번만 만들어 주세요.

ref도 그대로 전달돼요. STRX 컴포넌트에 단 ref는 감싼 컴포넌트에 닿아요.

예시

그라디언트

1import { LinearGradient } from "expo-linear-gradient";23const StrxGradient = createStrxComponent(LinearGradient);45<StrxGradient6  colors={["#3552f0", "#7b93ff"]}7  animate="fade-in, scale-in duration-500"8  style={{ height: 160, borderRadius: 20 }}9/>;

직접 만든 카드

1type CardProps = { title: string; style?: StyleProp<ViewStyle>; children?: React.ReactNode };23function CardBase({ title, style, children }: CardProps) {4  return (5    <View style={[styles.card, style]}>6      <Text style={styles.title}>{title}</Text>7      {children}8    </View>9  );10}1112export const Card = createStrxComponent(CardBase, { displayName: "Card" });1314<Card title="프로필" animate="fade-in from:translate-y-12 layout-spring" />;

텍스트 같은 컴포넌트

const StrxHeading = createStrxComponent(Heading, { nativeView: false });

타임라인에서 쓰기

감싼 컴포넌트는 Strx.Timeline의 자식으로도, useTimeline의 대상으로도 쓸 수 있어요.

1<Strx.Timeline playback="stagger" interval={60}>2  <Card title="하나" animate="fade-in from:translate-y-12" />3  <Card title="둘" animate="fade-in from:translate-y-12" />4</Strx.Timeline>

리스트

리스트 행이라면 FlatList를 통째로 감싸기보다, 행 안의 내용을 Strx.View로 감싸는 편이 대개 더 간단해요. 긴 리스트를 확인해 보세요.

GitHub에서 이 페이지 수정하기

Esc