expo-fullscreen-splash

Um componente React Native para criar telas de splash em tela cheia com animações suaves e controle preciso para aplicações Expo.

Por que este pacote?

Recentemente, o Expo migrou para a API SplashScreen introduzida no Android 12, conforme mencionado no changelog:

"Migramos para a API SplashScreen introduzida no Android 12, o que resolve alguns problemas persistentes no Android 12+, e ajuda a evitar saltos de layout ao fazer a transição da tela de splash. As telas de splash para Android não podem ser em tela cheia com esta API (e isso também não funcionava particularmente bem antes), então talvez seja necessário atualizar sua tela de splash. Saiba mais na documentação do Android Splash screen e na documentação do expo-splash-screen."

Esta migração resultou em problemas significativos para usuários do Expo, especialmente para aqueles que precisam de uma experiência de splash screen em tela cheia consistente em todas as plataformas.

O expo-fullscreen-splash foi criado especificamente para resolver esse problema, permitindo que desenvolvedores criem telas de splash em tela cheia customizáveis que funcionam perfeitamente em todas as versões do Android (incluindo Android 12+) e iOS, independentemente das limitações da API nativa do Android.

Características

• ✨ Tela de splash em tela cheia com controle manual ou automático
• 🎭 Múltiplas animações de transição (fade, scale, slide, bounce)
• 🎨 Personalização completa de cores e estilos
• 📱 Integração com o sistema de áreas seguras do dispositivo
• 🔄 Gerenciamento automático da barra de navegação
• 🔌 API simples com referência para controle externo
• 🛠️ Solução para as limitações de splash screen em tela cheia do Android 12+

Instalação

npm install expo-fullscreen-splash
# ou
yarn add expo-fullscreen-splash

Dependências

Este pacote depende de:

• react-native-reanimated
• react-native-safe-area-context
• expo-navigation-bar

Certifique-se de que essas dependências estejam instaladas em seu projeto.

Uso Básico

import React, { useRef } from "react";
import { View, Text, Image } from "react-native";
import ExpoFullscreenSplash, { SplashScreenRef } from "expo-fullscreen-splash";

const App = () => {
  const splashRef = useRef<SplashScreenRef>(null);

  // Componente de Splash personalizado
  const MySplashComponent = () => (
    <View style={{ alignItems: "center" }}>
      <Image
        source={require("./assets/logo.png")}
        style={{ width: 200, height: 200 }}
      />
      <Text style={{ marginTop: 20, fontSize: 24 }}>Meu Aplicativo</Text>
    </View>
  );

  return (
    <ExpoFullscreenSplash
      ref={splashRef}
      SplashComponent={<MySplashComponent />}
      backgroundColor="#ffffff"
      animationType="fade"
      autoHide={true}
      splashDuration={3000}
      onAnimationEnd={() => console.log("Splash screen terminada")}
    >
      {/* Seu conteúdo de aplicativo vem aqui */}
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Conteúdo Principal do App</Text>
      </View>
    </ExpoFullscreenSplash>
  );
};

export default App;

Controle Manual

Para controlar manualmente quando a tela de splash deve desaparecer:

import React, { useEffect, useRef } from "react";
import { View, Text } from "react-native";
import ExpoFullscreenSplash, { SplashScreenRef } from "expo-fullscreen-splash";

const App = () => {
  const splashRef = useRef<SplashScreenRef>(null);

  useEffect(() => {
    // Simulando carregamento de dados ou inicialização
    async function prepareApp() {
      await fetchInitialData();
      // Esconde a tela de splash após a inicialização
      splashRef.current?.hide();
    }

    prepareApp();
  }, []);

  return (
    <ExpoFullscreenSplash
      ref={splashRef}
      SplashComponent={<YourSplashComponent />}
      backgroundColor="#f5f5f5"
      animationType="scale"
      autoHide={false} // Desativa o escondimento automático
    >
      <MainApp />
    </ExpoFullscreenSplash>
  );
};

Integração com Carregamento de recursos

Muitos aplicativos Expo precisam carregar recursos e fontes personalizadas antes de exibir o conteúdo principal. O componente ExpoFullscreenSplash é perfeito para este caso de uso:

import React, { useRef, useEffect } from "react";
import { StatusBar } from "react-native";
import { Stack } from "expo-router";
import { useFonts } from "expo-font";
import { FontAwesome } from "@expo/vector-icons";
import ExpoFullscreenSplash, { SplashScreenRef } from "expo-fullscreen-splash";

// Seu componente de Splash
const SplashScreenComponent = () => (
  <View style={{ alignItems: "center", justifyContent: "center" }}>
    <Image
      source={require("../assets/logo.png")}
      style={{ width: 200, height: 200 }}
    />
    <Text style={{ color: "white", fontSize: 24, marginTop: 20 }}>
      Meu App Incrível
    </Text>
  </View>
);

export default function RootLayout() {
  // Carregando fontes
  const [loaded, error] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    ...FontAwesome.font,
  });

  const splashRef = useRef<SplashScreenRef>(null);

  // Fechar a splash screen quando as fontes forem carregadas
  useEffect(() => {
    if (loaded) {
      // Pequeno atraso para garantir que tudo esteja pronto
      const timer = setTimeout(() => {
        splashRef.current?.hide(() => {
          console.log("Splash screen was closed");
        });
      }, 1000);
      return () => clearTimeout(timer);
    }
  }, [loaded]);

  return (
    <ExpoFullscreenSplash
      ref={splashRef}
      SplashComponent={<SplashScreenComponent />}
      backgroundColor="#c54cdf"
      animationType="fade"
      autoHide={false}
    >
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
      </Stack>
      <StatusBar style="light" animated={true} />
    </ExpoFullscreenSplash>
  );
}

Este exemplo mostra como integrar o componente ExpoFullscreenSplash com:

• Carregamento de fontes personalizadas usando expo-font
• Navegação com expo-router
• StatusBar personalizada
• Callback para confirmação quando a splash é fechada

A splash screen permanece visível até que as fontes sejam carregadas, proporcionando uma experiência de usuário contínua sem telas em branco ou mudanças bruscas durante o carregamento inicial.

API

Props

| Prop | Tipo | Padrão | Descrição | | ----------------- | -------------------- | ------------- | ----------------------------------------------------------------------------------------------------- | | SplashComponent | ReactNode | Obrigatório | Componente React a ser renderizado como splash | | backgroundColor | string | "#ffffff" | Cor de fundo da tela de splash | | splashDuration | number | null | null | Duração (ms) da exibição da splash (quando autoHide é true). Quando null, exige controle manual | | animationType | string | "none" | Tipo de animação de saída ("fade", "scale", "slide", "bounce", "none") | | onAnimationEnd | function | () => {} | Callback executado quando a animação termina | | containerStyle | StyleProp | undefined | Estilos adicionais para o container da splash | | autoHide | boolean | false | Se true, esconde automaticamente após splashDuration | | children | ReactNode | Obrigatório | Conteúdo principal do aplicativo a ser exibido após a splash |

Métodos

O componente expõe os seguintes métodos via ref:

| Método | Parâmetros | Descrição | | ------ | --------------------------------- | ------------------------------------------------------------------- | | hide | (callback?: () => void) => void | Esconde a tela de splash e executa o callback opcional ao finalizar |

Exemplos

Splash com Carregamento Personalizado

const App = () => {
  const splashRef = useRef<SplashScreenRef>(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        const newProgress = prev + 0.1;
        if (newProgress >= 1) {
          clearInterval(interval);
          splashRef.current?.hide();
          return 1;
        }
        return newProgress;
      });
    }, 200);

    return () => clearInterval(interval);
  }, []);

  const LoadingSplash = () => (
    <View style={{ alignItems: "center" }}>
      <Image source={require("./assets/logo.png")} />
      <Text>Carregando: {Math.round(progress * 100)}%</Text>
      {/* Sua barra de progresso personalizada */}
    </View>
  );

  return (
    <ExpoFullscreenSplash
      ref={splashRef}
      SplashComponent={<LoadingSplash />}
      animationType="fade"
      autoHide={false}
    >
      <MainApp />
    </ExpoFullscreenSplash>
  );
};

Diferentes Tipos de Animação

// Fade
<ExpoFullscreenSplash
  animationType="fade"
  splashDuration={2000}
  autoHide={true}
  // ...
/>

// Scale
<ExpoFullscreenSplash
  animationType="scale"
  splashDuration={2000}
  autoHide={true}
  // ...
/>

// Slide
<ExpoFullscreenSplash
  animationType="slide"
  splashDuration={2000}
  autoHide={true}
  // ...
/>

// Bounce
<ExpoFullscreenSplash
  animationType="bounce"
  splashDuration={2000}
  autoHide={true}
  // ...
/>

Gerenciamento da Barra de Navegação

O componente gerencia automaticamente a visibilidade e a cor da barra de navegação, restaurando as configurações originais quando a tela de splash é fechada.

Considerações de Desempenho

• Use componentes leves em sua tela de splash para garantir carregamento rápido
• Para testes de animação, use o modo de desenvolvimento
• Para melhor desempenho em produção, considere usar animationType="none" se a transição suave não for essencial

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para abrir um issue ou enviar um pull request.

Licença

MIT