seyedmostafahasani/react-native-splash-motion

어떤 프로젝트인가요?

핵심 기능

• 01Lottie .json 및 dotLottie .lottie 애니메이션을 네이티브로 재생합니다.
• 02JS 번들이 로드되기 전, 앱 실행의 첫 프레임부터 애니메이션을 시작합니다.
• 03CLI 또는 Expo config plugin으로 네이티브 시작 화면을 자동 설정합니다.
• 04hide() 호출 시 현재 반복 재생이 끝날 때까지 대기하거나 아웃트로 마커를 재생한 뒤 페이드아웃할 수 있습니다.
• 05정적 시작 화면과 애니메이션을 일치시키는 첫 프레임 PNG를 선택적으로 지정할 수 있습니다.

활용 사례

• JS가 시작되는 동안 빈 화면으로 기다리지 않고 React Native 앱에 브랜드 애니메이션 스플래시 화면을 표시할 때.
• 폰트나 내비게이션 등 앱이 준비될 때까지 기다리는 세련된 종료 애니메이션을 추가할 때.
• 기존 After Effects 또는 LottieFiles 애니메이션을 Expo나 bare React Native 프로젝트의 시작 화면으로 사용할 때.

빠른 시작

1. 1

   패키지와 Nitro Modules를 설치합니다

   yarn add react-native-splash-motion react-native-nitro-modules
2. 2

   Lottie 파일에서 스플래시 화면을 생성합니다

   npx splash-motion generate assets/splash.json --background "#0F6E56"
3. 3

   iOS Pods를 설치하고 앱을 다시 빌드합니다

   cd ios && pod install
4. 4

   앱이 준비되면 SplashMotion.hide()를 호출합니다

사용 전 알아둘 점

• !Nitro Modules에 필요한 React Native New Architecture가 필요합니다.
• !Expo Go에서는 커스텀 네이티브 코드를 불러올 수 없으므로 Expo 프로젝트에는 development build가 필요합니다.
• !최소 지원 버전은 iOS 15와 Android 7(API 24)입니다.
• !아직 초기 단계인 프로젝트로, 별 37개를 받았으며 메타데이터에 릴리스 이력이 표시되지 않습니다.

포함된 컬렉션

토픽

자주 묻는 질문

react-native-splash-motion은(는) 무엇인가요?

JavaScript 번들이 로드되기 전 앱 실행 시점부터 네이티브로 재생되는 React Native용 Lottie 및 dotLottie 스플래시 화면입니다. SplashMotion은 애니메이션 스플래시 화면을 위한 React Native 라이브러리입니다. 대부분의 애니메이션 스플래시 방식은 React를 통해 렌더링하므로 JavaScript 번들이 로드된 뒤에야 애니메이션을 시작할 수 있습니다. 반면 SplashMotion은 앱이 실행되는 첫 프레임부터 네이티브 뷰에서 Lottie 또는 dotLottie 애니메이션을 재생하고, 번들이 로드되는 동안 계속 실행한 다음 선택적으로 아웃트로와 페이드 효과를 적용해 종료합니다.

react-native-splash-motion은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

react-native-splash-motion은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

react-native-splash-motion은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. react-native-splash-motion의 마지막 커밋은 2026년 11월 7일입니다.

react-native-splash-motion은(는) 어디에 사용할 수 있나요?

JS가 시작되는 동안 빈 화면으로 기다리지 않고 React Native 앱에 브랜드 애니메이션 스플래시 화면을 표시할 때. 폰트나 내비게이션 등 앱이 준비될 때까지 기다리는 세련된 종료 애니메이션을 추가할 때. 기존 After Effects 또는 LottieFiles 애니메이션을 Expo나 bare React Native 프로젝트의 시작 화면으로 사용할 때.

react-native-splash-motion는 어떻게 설치하나요?

패키지와 Nitro Modules를 설치합니다: yarn add react-native-splash-motion react-native-nitro-modules Lottie 파일에서 스플래시 화면을 생성합니다: npx splash-motion generate assets/splash.json --background "#0F6E56" iOS Pods를 설치하고 앱을 다시 빌드합니다: cd ios && pod install 앱이 준비되면 SplashMotion.hide()를 호출합니다

react-native-splash-motion은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/seyedmostafahasani/react-native-splash-motion