Configuration de l'écran de démarrage avec expo-splash-screen, transitions animées et préchargement des ressources.

Écran de démarrage

L'écran de démarrage est la première chose que les utilisateurs voient en lançant votre app. ScaleRocket Mobile utilise expo-splash-screen pour afficher le splash pendant le chargement des polices, la vérification de l'auth et le préchargement des données.

Configuration de base

Configurez l'écran de démarrage dans app.json :

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

Propriété	Valeur	Description
`image`	Chemin vers PNG	L'image splash (utilisez 1284x2778 pour la meilleure qualité)
`resizeMode`	`"contain"` ou `"cover"`	Comment l'image s'adapte à l'écran
`backgroundColor`	Couleur hex	Fond derrière l'image

Garder le splash visible

Par défaut, le splash se cache dès que l'app fait son rendu. Utilisez preventAutoHideAsync pour le garder visible pendant le chargement :

import * as SplashScreen from "expo-splash-screen";

// Empêcher le masquage automatique avant que l'app soit prête
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [appReady, setAppReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Charger les polices
        await Font.loadAsync({
          "Inter-Bold": require("./assets/fonts/Inter-Bold.ttf"),
        });
        // Vérifier l'auth
        await checkSession();
        // Précharger les données critiques
        await preloadDashboardData();
      } catch (e) {
        console.warn(e);
      } finally {
        setAppReady(true);
      }
    }

    prepare();
  }, []);

  useEffect(() => {
    if (appReady) {
      SplashScreen.hideAsync();
    }
  }, [appReady]);

  if (!appReady) return null;

  return <Slot />;
}

Configuration spécifique par plateforme

iOS

{
  "expo": {
    "ios": {
      "splash": {
        "image": "./assets/splash-ios.png",
        "resizeMode": "contain",
        "backgroundColor": "#FFFFFF",
        "dark": {
          "image": "./assets/splash-ios-dark.png",
          "backgroundColor": "#111827"
        }
      }
    }
  }
}

Android

{
  "expo": {
    "android": {
      "splash": {
        "image": "./assets/splash-android.png",
        "resizeMode": "contain",
        "backgroundColor": "#FFFFFF",
        "dark": {
          "image": "./assets/splash-android-dark.png",
          "backgroundColor": "#111827"
        }
      }
    }
  }
}

Splash en mode sombre

Supportez les écrans de démarrage clair et sombre avec la clé dark comme montré ci-dessus. L'OS choisit la bonne version selon le thème de l'appareil.

Transition animée du splash

Créez une transition fluide du splash au contenu de l'app :

import Animated, { FadeOut } from "react-native-reanimated";

function AnimatedSplash({ onFinish }: { onFinish: () => void }) {
  return (
    <Animated.View
      exiting={FadeOut.duration(500)}
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#FFFFFF",
      }}
      onLayout={() => {
        // Commencer le masquage après l'animation
        setTimeout(onFinish, 200);
      }}
    >
      <Image
        source={require("./assets/splash.png")}
        style={{ width: 200, height: 200 }}
        resizeMode="contain"
      />
    </Animated.View>
  );
}

Précharger les ressources

Chargez tout ce dont vous avez besoin pendant le splash :

async function preloadAssets() {
  const imageAssets = [
    require("./assets/images/logo.png"),
    require("./assets/images/onboarding-1.png"),
  ].map((image) => Asset.fromModule(image).downloadAsync());

  const fontAssets = Font.loadAsync({
    "Inter-Regular": require("./assets/fonts/Inter-Regular.ttf"),
    "Inter-Bold": require("./assets/fonts/Inter-Bold.ttf"),
  });

  await Promise.all([...imageAssets, fontAssets]);
}

Guide des tailles d'image

Appareil	Résolution	Taille splash recommandée
iPhone 15 Pro Max	1290x2796	1284x2778
iPhone SE	750x1334	750x1334
Pixel 8	1080x2400	1080x2400
Galaxy S24	1080x2340	1080x2340

Utilisez resizeMode: "contain" avec un backgroundColor assorti pour gérer les différentes tailles d'écran avec élégance.

Problèmes courants

Flash blanc avant le splash : Définissez backgroundColor dans app.json pour correspondre à votre splash
Le splash reste indéfiniment : Assurez-vous que hideAsync() est appelé même si le chargement échoue (utilisez finally)
Qualité d'image : Utilisez au moins une résolution de 1284x2778
Expo Go : La configuration du splash ne fonctionne que dans les builds de développement

Écran de démarrage

On this page