Comment créer un écran de démarrage dans React Native (Avec des exemples de code)

La première impression est cruciale pour les applications mobiles. Lorsqu’un utilisateur lance votre application React Native, un écran de démarrage (splash screen) est la première chose qu’il voit. Un écran de démarrage affiche le logo ou l’identité visuelle de votre application pendant son initialisation, donnant à votre application une apparence plus soignée en évitant un écran vide et en rassurant les utilisateurs que l’application est en cours de chargement.

Qu’est-ce qu’un écran de démarrage dans React Native ?

Un écran de démarrage est l’écran initial qui apparaît au lancement de votre application. Dans React Native, l’écran de démarrage affiche généralement le nom, le logo ou d’autres éléments de marque de votre application sur un fond simple. Il reste visible pendant que le code natif charge et prépare l’application React Native. Les principaux objectifs d’un écran de démarrage sont :

• Image de marque : Il rend votre marque immédiatement visible
• Expérience utilisateur : Il évite à l’utilisateur de voir un écran vide ou non réactif pendant le démarrage
• Perception de vitesse : Un écran de démarrage donne l’impression que quelque chose se passe, rendant le temps de chargement subjectivement plus court

Pourquoi utiliser un écran de démarrage dans React Native pour iOS ?

Toutes les applications mobiles peuvent bénéficier d’écrans de démarrage, mais sur iOS, ils sont particulièrement importants. En fait, Apple exige que les applications aient un écran de lancement – sur iOS, l’écran de démarrage n’est pas simplement décoratif ; il fait partie de l’expérience utilisateur attendue. Voici les principales raisons :

• Amélioration de l’expérience utilisateur : Les applications iOS qui se lancent avec un écran de démarrage bien conçu semblent plus fluides et professionnelles
• Image de marque : L’écran de démarrage met en valeur le logo, le slogan ou les visuels de votre application
• Gestion des temps de chargement : iOS affichera l’écran de lancement jusqu’à ce que l’application soit prête, masquant tout délai pendant le démarrage

Configuration d’un écran de démarrage dans React Native (spécifique à iOS)

Étape 1 : Créer une image pour l’écran de démarrage

D’abord, vous avez besoin d’une image pour votre écran de démarrage :

• Taille : Utilisez une image haute résolution (au moins 2000 x 2000 pixels) qui s’affiche bien sur tous les écrans d’appareils
• Format : PNG est le format le plus couramment utilisé pour les écrans de démarrage
• Orientation et zone de sécurité : Gardez le contenu important vers le centre de l’image

Astuce de pro : Des outils comme App Icon Generator (appicon.co) peuvent aider à créer des images correctement dimensionnées pour différents écrans iOS.

Étape 2 : Ajouter l’écran de démarrage dans Xcode

1. Ouvrir le projet iOS dans Xcode : Naviguez vers le dossier ios et ouvrez le fichier .xcworkspace ou .xcodeproj.
2. Ajouter des ressources d’image : Dans Xcode, trouvez Images.xcassets, créez un New Image Set nommé ""Splash"", et ajoutez votre image de démarrage.
3. Modifier le storyboard de l’écran de lancement : Ouvrez LaunchScreen.storyboard, supprimez tous les éléments par défaut, et ajoutez une Image View. Définissez l’image comme votre image de démarrage, redimensionnez-la ou contraignez-la, et définissez le Mode de Contenu (Aspect Fit ou Aspect Fill).
4. Définir la zone de sécurité (si nécessaire) : Si nécessaire, désactivez ""Use Safe Area"" pour permettre à l’image de s’étendre sous la barre d’état/l’encoche.

Étape 3 : Modifier Info.plist pour les paramètres d’affichage appropriés

1. Ouvrez Info.plist et recherchez la clé ""UILaunchStoryboardName"".
2. Assurez-vous que sa valeur est le nom de votre storyboard (par exemple, ""LaunchScreen"").
3. Vérifiez que le fichier LaunchScreen est inclus dans la cible de l’application.

Maintenant, exécutez votre application sur un simulateur iOS ou un appareil pour voir votre écran de démarrage apparaître brièvement au lancement.

Utilisation d’une bibliothèque pour un écran de démarrage

L’utilisation d’une bibliothèque peut simplifier le processus et offrir un contrôle supplémentaire. Deux bibliothèques populaires sont :

• react-native-splash-screen – Largement utilisée pour iOS et Android
• expo-splash-screen – Pour le flux de travail géré par Expo

Utilisons react-native-splash-screen :

1. Installer la bibliothèque :

   npm install react-native-splash-screen --save
   

   ou

   yarn add react-native-splash-screen
   

2. iOS : Installer les pods :

   cd ios
   pod install
   cd ..
   

3. Configurer le code natif iOS :

   • Modifier AppDelegate.m :

     #import ""RNSplashScreen.h""  // ajouter cet import
     

     Dans la méthode application:didFinishLaunchingWithOptions:, ajoutez :

     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
         // ... code existant d'amorçage React Native ...
         [self.window makeKeyAndVisible];
         [RNSplashScreen show];  // afficher l'écran de démarrage
         return YES;
     }
     

   • Vérifier Info.plist : Assurez-vous que UILaunchStoryboardName est toujours défini sur votre storyboard LaunchScreen.

4. Configurer le code natif Android (si nécessaire) :

   • Importer SplashScreen dans MainActivity
   • Appeler SplashScreen.show(this) avant super.onCreate
   • Ajouter une mise en page launch_screen.xml
   • Mettre à jour l’AndroidManifest

5. Masquer l’écran de démarrage dans votre code React Native :

   // App.js (ou index.js)
   import React, { useEffect } from 'react';
   import { View, Text } from 'react-native';
   import SplashScreen from 'react-native-splash-screen';  // importer la bibliothèque
   
   const App = () => {
     useEffect(() => {
       // Masquer l'écran de démarrage une fois que l'application est prête
       SplashScreen.hide();
     }, []);
   
     return (
       <View>{/* Vos composants d'interface utilisateur commencent ici */}
         <Text>Bonjour, Application Principale !</Text>
       </View>
     );
   };
   
   export default App;
   

Gestion du timing et des transitions de l’écran de démarrage

• Restez bref : Un écran de démarrage ne doit être visible que le temps nécessaire (idéalement 1-3 secondes)
• Masquez quand prêt : Appelez SplashScreen.hide() dès que le contenu principal de votre application est prêt à s’afficher
• Harmonisez la transition : Utilisez la même couleur d’arrière-plan dans l’écran initial de votre application que dans l’écran de démarrage
• Animations fluides : Envisagez d’ajouter une animation subtile lors de la disparition de l’écran de démarrage
• Durée cohérente : Certaines applications affichent l’écran de démarrage pendant un temps minimum (par exemple, 2 secondes) même si l’application se charge plus rapidement

Problèmes courants et conseils de débogage

• L’écran de démarrage ne s’affiche pas : Vérifiez UILaunchStoryboardName dans Info.plist, assurez-vous que le fichier LaunchScreen est dans la cible de l’application, et confirmez que les ressources d’image sont incluses
• L’image est étirée ou coupée : Revoyez les paramètres du Mode de Contenu, vérifiez les contraintes, et assurez-vous d’avoir fourni les bonnes tailles d’image
• L’écran de démarrage clignote puis un écran vide apparaît : Ne masquez l’écran de démarrage que lorsque votre interface est prête, et faites correspondre les couleurs d’arrière-plan
• L’écran de démarrage reste bloqué : Assurez-vous que SplashScreen.hide() est appelé et vérifiez les erreurs précoces
• Rapport d’aspect incorrect sur iPad : Utilisez des contraintes au lieu de tailles fixes, définissez les appareils du storyboard sur Universel, et fournissez des images haute résolution
• Les changements ne se reflètent pas : Nettoyez la compilation, réinstallez l’application, et assurez-vous que vous modifiez les bons fichiers

Conclusion

Ajouter un écran de démarrage à votre application React Native est une petite étape qui offre une expérience plus professionnelle et conviviale. En configurant un écran de démarrage manuellement dans Xcode ou en utilisant des bibliothèques comme react-native-splash-screen, vous pouvez intégrer un écran de démarrage qui affiche votre marque et maintient l’engagement des utilisateurs pendant le démarrage.

N’oubliez pas de prendre en compte le timing et d’assurer des transitions fluides entre l’écran de démarrage et le premier écran de votre application. Avec une mise en œuvre appropriée, votre écran de démarrage améliorera la qualité perçue de votre application dès son lancement.

FAQ