제로 의존성 React Native 애니메이션 라이브러리 구축 — 14개의 드롭인 컴포넌트, 네이티브 드라이버 전용

Source: Dev.to

Entrance animations — for when elements appear on screen

• FadeSlideIn – 페이드 + 방향 슬라이드, 기본형.
• FadeIn – 순수 투명도, 가볍게.
• ZoomFadeIn – 스케일 + 페이드, 모달에 최적.
• BounceIn – 스프링 입장, 성공 상태에 좋음.
• ScalePop – 0에서 스프링 팝, 배지와 FAB에 완벽.

Loop animations — for continuous attention and feedback

• Float – 다축 플로팅 (Y + 회전 + 스케일). 진짜 프리미엄 느낌.
• Pulse – 호흡하는 스케일 루프, 실시간 표시기에 사용.
• Spin – 아이콘을 감싸 즉시 스피너로 변환.
• LoopBounce – 스크롤 힌트를 위한 수직 바운스.

Interaction — for user‑triggered feedback

• PressScale – TouchableOpacity를 물리적인 눌림 느낌으로 대체.
• Shake – ref를 통한 즉각적인 오류 흔들림 (예: 비밀번호가 틀렸을 때 .shake() 호출).
• Flip – 두 면 사이를 3D 카드 플립.

Utilities

• Stagger – FadeSlideIn을 사용해 모든 자식을 자동으로 순차 재생. 하나의 래퍼로 전체 리스트 애니메이션.
• CountUp – 대시보드와 통계에 쓰이는 애니메이션 숫자 카운터.

Why no Reanimated?

Reanimated는 강력하지만 네이티브 링크, Hermes 설정이 필요하고 번들에 **2 MB+**를 추가합니다. 일상적인 UI 애니메이션—입장, 로더, 피드백—에 대해서는 useNativeDriver: true가 적용된 기본 Animated API만으로도 충분히 부드럽게 동작합니다.

이 라이브러리의 모든 컴포넌트는 각 애니메이션에 useNativeDriver: true를 사용하므로 재생 중에 JavaScript 스레드가 관여하지 않습니다.

Installation

npm install react-native-animation-kit

Basic usage

import { FadeSlideIn, Stagger, PressScale, Float } from 'react-native-animation-kit';

Staggered list – one wrapper, done

Premium floating illustration

Physical button press

  

    Continue
  

Error shake on login fail

const shakeRef = useRef(null);

// on error:
shakeRef.current?.shake();

  

Float details

Float는 세 가지 애니메이션 값을 동시에 결합합니다:

1. 수직 Y 이동
2. 미세 회전 (올라가면서 살짝 기울어짐)
3. 부드러운 스케일 호흡

그 결과는 객체가 실제로 공중에 떠 있는 듯한 느낌을 주며, 단순히 위아래로 움직이는 것이 아닙니다. 서로 다른 딜레이를 가진 여러 Float 레이어를 순차 재생하면 온보딩 화면에서 패럴랙스 깊이 효과를 얻을 수 있습니다.

Layered parallax float example

Links

• npm: https://www.npmjs.com/package/react-native-animation-kit
• GitHub: https://github.com/Tafsan-Mahmud/react-native-animation-kit

Feel free to open issues, submit pull requests, or drop a comment if you use the library—always curious what people build with it.