Repolode
Предложить
seyedmostafahasani

seyedmostafahasani/react-native-splash-motion

Lottie- и dotLottie-заставки для React Native, которые запускаются нативно вместе с приложением, ещё до загрузки JavaScript-бандла.

Открыть на GitHub
Звёзды
44
Форки
1
Открытые issues
0
Последний коммит
вчера

Что это?

SplashMotion — библиотека для React Native с анимированными заставками. Большинство решений для анимированных заставок отрисовывают анимацию средствами React, поэтому она запускается только после загрузки JavaScript-бандла. SplashMotion воспроизводит анимацию Lottie или dotLottie в нативном представлении с первого кадра запуска приложения, продолжает проигрывать её во время загрузки бандла, а затем завершает показ с необязательными аутро и затуханием.

CLI и плагин конфигурации Expo генерируют нативный экран запуска, ресурсы и тему на этапе сборки — вручную редактировать AppDelegate или MainActivity не нужно. Когда приложение готово, оно вызывает hide(); при этом можно дождаться завершения текущего цикла, воспроизвести именованный маркер аутро, задать минимальное время показа и длительность затухания. Для анимации можно указать PNG первого кадра, чтобы статичный экран запуска ей соответствовал.

Библиотеке нужны New Architecture в React Native и react-native-nitro-modules. Она поддерживает iOS 15+ и Android 7+ (API 24) и распространяется по лицензии MIT.

Ключевые возможности

  • 01Нативное воспроизведение анимаций Lottie в формате .json и dotLottie в формате .lottie.
  • 02Запуск анимации с первого кадра при старте приложения, до загрузки JS-бандла.
  • 03Автоматическая настройка нативных экранов запуска через CLI или плагин конфигурации Expo.
  • 04hide() может дождаться завершения текущего цикла, воспроизвести маркер аутро и запустить затухание.
  • 05Необязательный PNG первого кадра для соответствующего ему статичного экрана запуска.

Сценарии использования

  • Показ фирменной анимированной заставки в приложении React Native без пустого экрана во время запуска JS.
  • Добавление плавной завершающей анимации с ожиданием готовности приложения, например загрузки шрифтов или навигации.
  • Использование готовой анимации из 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(), когда приложение будет готово

Что важно знать

  • Требуется React Native New Architecture, необходимая для Nitro Modules.
  • Для проектов Expo нужна development build, поскольку Expo Go не может загружать пользовательский нативный код.
  • Минимальные версии — iOS 15 и Android 7 (API 24).
  • Проект новый: у него 37 звёзд, а в метаданных история релизов не указана.

В подборках

Приложения для Android и инструменты для телефона

Темы

#react-native#lottie#splash-screen#animation#ios#android#expo#mobile-ui

Частые вопросы

Что такое react-native-splash-motion?
Lottie- и dotLottie-заставки для React Native, которые запускаются нативно вместе с приложением, ещё до загрузки JavaScript-бандла. 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 — 6 нояб. 2026 г..
Для чего можно использовать react-native-splash-motion?
Показ фирменной анимированной заставки в приложении React Native без пустого экрана во время запуска JS. Добавление плавной завершающей анимации с ожиданием готовности приложения, например загрузки шрифтов или навигации. Использование готовой анимации из 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

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты