seyedmostafahasani/react-native-splash-motion

O que é?

Recursos principais

• 01Reproduz animações Lottie .json e dotLottie .lottie nativamente.
• 02Inicia a animação no primeiro frame da inicialização do app, antes de o bundle JS carregar.
• 03Configura automaticamente telas de inicialização nativas pela CLI ou pelo plugin de configuração do Expo.
• 04hide() pode esperar o loop atual terminar, reproduzir um marcador de saída e aplicar fade.
• 05PNG opcional do primeiro frame para uma tela de inicialização estática correspondente.

Casos de uso

• Exibir uma tela de abertura animada com a identidade da marca em um app React Native, sem uma espera em branco durante a inicialização do JS.
• Adicionar uma animação de saída refinada que aguarda o app estar pronto, por exemplo, após carregar as fontes ou a navegação.
• Usar uma animação existente do After Effects ou LottieFiles como tela de inicialização em um projeto Expo ou React Native bare.

Início rápido

1. 1

   Instale o pacote e o Nitro Modules

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

   Gere a tela de abertura a partir do seu arquivo Lottie

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

   Instale os pods do iOS e recompile o app

   cd ios && pod install
4. 4

   Chame SplashMotion.hide() quando o app estiver pronto

Antes de usar

• !Requer a React Native New Architecture, necessária para o Nitro Modules.
• !Projetos Expo precisam de uma development build, pois o Expo Go não consegue carregar código nativo personalizado.
• !As versões mínimas são iOS 15 e Android 7 (API 24).
• !É um projeto recente, com 37 estrelas e sem histórico de lançamentos indicado nos metadados.

Em coleções

Tópicos

Perguntas frequentes

O que é react-native-splash-motion?

Telas de abertura com Lottie e dotLottie para React Native, reproduzidas nativamente desde a inicialização do app, antes de o bundle JavaScript carregar. SplashMotion é uma biblioteca para React Native que oferece telas de abertura animadas. A maioria das abordagens para animações de abertura é renderizada pelo React, então a animação só pode começar depois que o bundle JavaScript carrega. Em vez disso, SplashMotion reproduz uma animação Lottie ou dotLottie em uma view nativa desde o primeiro frame da inicialização, mantém a animação enquanto o bundle carrega e, depois, encerra com uma animação de saída opcional e fade.

react-native-splash-motion é gratuito? Qual é a licença?

react-native-splash-motion é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

react-native-splash-motion ainda é mantido?

Manutenção ativa. O último commit de react-native-splash-motion foi em 6 de nov. de 2026.

Para que posso usar react-native-splash-motion?

Exibir uma tela de abertura animada com a identidade da marca em um app React Native, sem uma espera em branco durante a inicialização do JS. Adicionar uma animação de saída refinada que aguarda o app estar pronto, por exemplo, após carregar as fontes ou a navegação. Usar uma animação existente do After Effects ou LottieFiles como tela de inicialização em um projeto Expo ou React Native bare.

Como instalar react-native-splash-motion?

Instale o pacote e o Nitro Modules: yarn add react-native-splash-motion react-native-nitro-modules Gere a tela de abertura a partir do seu arquivo Lottie: npx splash-motion generate assets/splash.json --background "#0F6E56" Instale os pods do iOS e recompile o app: cd ios && pod install Chame SplashMotion.hide() quando o app estiver pronto

Onde consigo react-native-splash-motion?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/seyedmostafahasani/react-native-splash-motion