Regenera G10 — Splash Animada no App React Native

Objetivo

Fazer com que, sempre que o app Regenera G10 for aberto, o usuário veja a animação visual criada no arquivo splash.html, mantendo o mesmo comportamento do HTML original: logo, brilho de fundo, partículas, círculos, textos, barra de progresso e sparkles.

A animação deve ser exibida antes da navegação principal do app. Após a animação terminar, o app deve liberar a tela inicial, login ou rota principal, conforme a regra atual do projeto.

Por que usar splash nativa + WebView?

A WebView reproduz o HTML com maior fidelidade do que tentar recriar toda a animação manualmente em React Native. Porém, em alguns aparelhos Android intermediários, a WebView pode demorar alguns milissegundos para inicializar.

Para evitar tela branca ou quebra visual, o app deve usar uma splash nativa estática primeiro. Em seguida, a WebView é carregada localmente e só aparece quando estiver pronta.

O app abre com a splash nativa estática, instantânea.
O componente React Native carrega o HTML local em uma WebView.
A WebView fica invisível até terminar de carregar.
Quando carregar, a WebView aparece e executa a animação.
Após aproximadamente 4 segundos, o app navega para o fluxo normal.

Arquivos necessários

Arquivo	Onde fica	Função
`splash.html`	`src/assets/splash/splash.html`	HTML original da animação. Deve ser usado como base para o conteúdo da WebView.
`logo_g10.png`	`src/assets/splash/logo_g10.png`	Imagem usada dentro do HTML. Recomendado converter para base64 ou embutir no HTML.
`SplashAnimated.tsx`	`src/components/SplashAnimated.tsx`	Componente React Native responsável por exibir o HTML dentro da WebView.
`App.tsx` ou layout inicial	Raiz do app ou estrutura de rotas	Controla quando a splash aparece e quando o app entra no fluxo normal.
`app.json`	Raiz do projeto Expo	Configura a splash nativa estática para evitar tela branca no carregamento inicial.

Instalação da WebView

O app precisa ter o pacote react-native-webview instalado.

Expo

npx expo install react-native-webview

React Native CLI

npm install react-native-webview

Após instalar, testar no Android e iOS. No Android, validar principalmente em aparelhos intermediários, pois são os mais sensíveis ao tempo de carregamento da WebView.

Configuração da splash nativa no `app.json`

A splash nativa deve ser simples e estática. Ela aparece imediatamente quando o app abre, enquanto o React Native inicializa.

{
  "expo": {
    "splash": {
      "image": "./assets/logo_g10.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}

O fundo deve ser #ffffff, igual ao fundo usado no HTML, para não haver transição visual brusca.

Ajuste importante no `splash.html`

No HTML original, a logo é carregada com:

<img class="logo-img" id="logoImg" src="logo_g10.png" alt="Regenera Citrus G10" />

Dentro da WebView, esse caminho pode falhar dependendo de como os assets forem empacotados. Para evitar problema, existem duas opções:

Opção recomendada

Converter a imagem logo_g10.png para base64 e substituir o src por data:image/png;base64,....

Opção alternativa

Manter o arquivo local e configurar corretamente o caminho para a WebView. Esta opção exige mais teste em build Android/iOS.

Para reduzir risco, usar base64 é a forma mais segura para esta splash, pois a animação fica autocontida dentro do HTML.

Componente `SplashAnimated.tsx`

Criar o arquivo abaixo em src/components/SplashAnimated.tsx. O conteúdo de SPLASH_HTML deve receber o HTML final da splash, preferencialmente com a logo já em base64.

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

type Props = {
  onFinish: () => void;
};

const SPLASH_HTML = `
<!DOCTYPE html>
<html>
  <!-- Cole aqui o conteúdo final do splash.html -->
</html>
`;

export default function SplashAnimated({ onFinish }: Props) {
  const [webviewReady, setWebviewReady] = useState(false);

  function handleLoadEnd() {
    setWebviewReady(true);

    setTimeout(() => {
      onFinish();
    }, 4000);
  }

  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={{ html: SPLASH_HTML }}
        onLoadEnd={handleLoadEnd}
        style={[
          styles.webview,
          {
            opacity: webviewReady ? 1 : 0,
          },
        ]}
        scrollEnabled={false}
        bounces={false}
        javaScriptEnabled
        domStorageEnabled
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
        overScrollMode="never"
        containerStyle={styles.webviewContainer}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  webviewContainer: {
    backgroundColor: '#ffffff',
  },
  webview: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
});

Como chamar a splash toda vez que o app abrir

No arquivo inicial do app, controlar um estado chamado showSplash. Quando o app iniciar, esse estado começa como true. Depois que a animação terminar, o componente chama onFinish() e o app mostra as rotas normais.

import React, { useState } from 'react';
import SplashAnimated from './src/components/SplashAnimated';
import AppRoutes from './src/routes/AppRoutes';

export default function App() {
  const [showSplash, setShowSplash] = useState(true);

  if (showSplash) {
    return (
      <SplashAnimated
        onFinish={() => setShowSplash(false)}
      />
    );
  }

  return <AppRoutes />;
}

Importante: como showSplash inicia como true, a animação será exibida toda vez que o app for aberto do zero.

Se o app usa React Navigation

Se o projeto já usa navegação com autenticação, a splash deve ficar antes da decisão de rota. O fluxo ideal é:

App abre
  ↓
Splash nativa estática
  ↓
SplashAnimated com WebView
  ↓
Carrega/verifica sessão, token ou pareamento
  ↓
Vai para Login, Pareamento ou Home

Caso a verificação de sessão já exista, ela pode rodar em paralelo durante a splash. Quando a splash terminar, o app apenas redireciona para a rota correta.

Cuidados obrigatórios

Não carregar o HTML por URL externa.
Não deixar a WebView aparecer antes de estar carregada.
Não usar fundo preto ou cinza durante o carregamento.
Não gerar novo HTML dinâmico vindo da API para a splash.
Não depender de internet para exibir a animação.
Testar em Android intermediário, não apenas em emulador ou iPhone.
Garantir que o arquivo da logo carregue dentro do build final.

Checklist de validação

Teste	Resultado esperado
Abrir o app fechado	A splash nativa aparece instantaneamente e depois a animação HTML é exibida.
Abrir sem internet	A animação aparece normalmente, pois o HTML é local.
Testar Android intermediário	Não deve aparecer tela branca antes da animação.
Testar iOS	A animação deve manter proporção, centralização e duração.
Verificar logo	A logo deve aparecer corretamente dentro da WebView.
Esperar o fim da animação	Após aproximadamente 4 segundos, o app deve abrir o fluxo normal.

Resumo para implementação

Instalar react-native-webview.
Adicionar splash.html aos assets do app.
Converter logo_g10.png para base64 ou garantir caminho local funcionando.
Criar SplashAnimated.tsx.
Configurar a splash nativa no app.json.
Exibir SplashAnimated antes das rotas principais.
Após 4 segundos, chamar onFinish() e liberar o app.
Testar offline e em Android real.

Regra principal: a splash deve funcionar 100% local, sem depender de internet.