React Native 페이드 그라데이션 래퍼

rn-fade-wrapper 는 모든 콘텐츠의 가장자리에 부드럽고 사용자 정의 가능한 페이드 그라데이션을 추가하는 간단하면서도 고성능의 React Native 컴포넌트입니다. 스크롤 가능한 컨테이너, 리스트, 캐러셀, 모달 또는 넘치는 콘텐츠가 있는 모든 뷰에서 사용자 경험을 향상시키기에 완벽합니다.

✨ 기능

• ⚡ iOS 및 Android 네이티브 렌더링 지원
• 🔁 수직 및 수평 그라데이션 방향 지원
• 🎨 완전한 페이드 크기 및 색상 커스터마이징 (각 면별 또는 균일하게)
• ↕️ 바깥쪽이 아닌 콘텐츠 쪽으로 페이드하는 선택적 inward 모드
• 🧩 직관적인 props로 간단한 API: 바로 사용 가능한 래퍼
• 💪 낮은 오버헤드로 뛰어난 성능 — 스크롤 뷰 및 애니메이션에 이상적

📦 설치

yarn add rn-fade-wrapper

or

npm install rn-fade-wrapper

Expo

이 라이브러리는 추가 구성 없이 Expo(expo prebuild 사용)에서 작동합니다.

📱 플랫폼 지원

| 플랫폼 | 구 아키텍처 | 패브릭 | |----------|------------|--------| | iOS | ✅ | ✅ | | Android | ✅ | ✅ |

🚀 빠른 시작

import { FadeWrapper } from 'rn-fade-wrapper';
const MyComponent = () => {
  return (
    
      
        Fading edges example
      
    
  );
};

🧩 Props

| Prop | Type | Default | Description | |--------------|----------------------------|----------------------|-------------| | color | string | "#ffffff" | 페이드 색상 (유효한 색상 문자열 가능) | | size | number | 20 | 포인트 단위의 균일한 페이드 크기 | | style | ViewStyle | { zIndex: 2 } | 래퍼 뷰에 적용되는 커스텀 스타일 | | inward | boolean | false | 그라데이션을 바깥쪽이 아닌 안쪽(중앙 방향)으로 페이드 처리 | | sizes | { top?: number, right?: number, bottom?: number, left?: number } | undefined | 각 가장자리별 특정 페이드 크기 (size와 orientation을 덮어씀) | | orientation| 'horizontal' \| 'vertical' | 'vertical' | 방향 프리셋: size를 상/하 또는 좌/우에 적용 | | children | React.ReactNode | — | 래핑된 콘텐츠 |

참고: sizes가 size와 orientation보다 우선 적용됩니다.

🎛 Examples

🎯 Custom sides + inward fade:

📜 수평 스크롤 페이드:

  
    {/ content /}
  

🛠 내부 구조

• iOS: 네이티브 UIView 내부에 CAGradientLayer 사용
• Android: Canvas를 사용하여 커스텀 ViewGroup에 LinearGradient 그리기
• 플랫폼별 로직으로 레이아웃 처리 및 재렌더링하여 일관성 유지

💡 UX 팁

rn-fade-wrapper를 사용해 콘텐츠 오버플로우를 은은하게 표시하세요 — 특히 캐러셀, 스크롤 뷰, 수평 슬라이더에서 유용합니다. 그라디언트는 사용자가 더 스크롤할 수 있음을 암시하여 참여도를 높입니다.

📘 라이선스

MIT — 자유롭게 사용, 개선 및 기여 가능 🎉

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-08 ---