Déploiement d’une application React Native sur Android

Contenu

Les Builds sur IOS et Android

Les builds c’est vraiment la difficulté dans le développement des application mobile, au moins au début, mais c’est suffisamment difficile et décourageant car c’est d’une très grande complexité, et un même problème peux avoir deux causes différentes, et comme vous êtres développeur, vous n’êtes pas axé sur cet aspect, qui est pourtant nécessaire, sans quoi vos compétences de développeur ne seront rien, en effet à quoi bon avoir l’application codées si on ne peut pas la déployer sur le store?

Un build sur Android nécessite Android Studio, un build sur IOS nécessite Xcode. Si vous êtes sur Windows, vous ne pourrez développer que pour Android, pas pour IOS. SI vous être sur Mac OS vous pourrez développer pour Android et IOS ! Donc voilà une raison de vous acheter un macBook Pro !

La difficulté tient à la complexité d’un processus de build, d’un cache non vidé, en effet un build réussi peut très bien échouer pour X raison mais vous ne pourrez résoudre ce problème que si vous remettez tout à zéro !

Néanmoins il y a des messages d’erreur qui reviennent souvent et vous devez connaitre.

Mais avant il faudra vous familiariser avec le parcours nominal de configuration d’un build, pour Android, il s’agira bien sûr de mettre en place Android Studio et tout ce qui va avec, télécharger les SDK qu’il faut. Pour IOS c’est plus fluide, néanmoins vous devez connaître le flow de build, les commandes correspondantes.

D’autre part, notez qu’en développement vous pouvez builder pour un émulateur, ou votre terminal physique.

Déployer sur le store est une autre paire de manche, spécialement pour Apple Store, où le fameux provisioning profile en fera suer plus d’un ! oui le développement d’application mobile est un métier, et nettement plus fastidieux que de faire un site web. Par moment vous vous direz « Vive les PWA ! ».

Problèmes de builds pour Android

A quoi sert AppCompat?
When new versions of android are published, Google will have to support the older versions of android. So AppCompat is a set of support libraries which can be used to make the apps developed with newer versions work with older versions.

Troubleshoot configuration : https://www.youtube.com/watch?v=GUZVGidimqY
https://medium.com/pvtl/react-native-android-development-on-mac-ef7481f65e47

React navigation causes android not working because of maybe

java.lang.NoClassDefFoundError: Failed resolution of: Landroidx/swiperefreshlayout/widget/SwipeRefreshLayout;

Gradle build file add two lines to build.gradle: (https://github.com/react-navigation/react-navigation/issues/6267 and https://github.com/software-mansion/react-native-screens#usage-with-react-navigation-without-expo)

lignes à ajouter dans VOTRE_APP/android/app/build.gradle

dans la section dependencies

dependencies {
 ...
 implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
 implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
    }    

Error running android: Gradle project sync failed. Please fix your project and try again
Goto File -> Invalidate caches / Restart

Erreur gradle ne trouve pas une dépendance ‘react-native-screen’, parfois mettre à jour le plugin de Gradle pour Android Studio peut résoudre le problème.

Lien suite les versions compatible entre la version du plugin pour Android et la version de Gradle:
https://stackoverflow.com/questions/17727645/how-to-update-gradle-in-android-studio

Déploiement sur Android Device (depuis MacOs)

Ouvrez Android Studio, branchez votre device Android (vous devrez avoir configuré en mode développeur). autorisez le transfert de fichier entre votre device et l’ordinateur.

Il y a deux façon de déployer sur votre device, soir en ligne de commande, soit en via Android Studio. Il faut au préalable avoir branché le device et ensuite faire la même commande. Voci la commande pour détecter les devices trouvés :

adb devices

SI à côté du nom de device c’est marqué offline, ça ne marchera pas, rebranchez le devices et jusqu’à ce que vous obtenez device marqué à droite du nom de l’appareil. Pour maintenir la connexion active depuis votre device Android faites cette ligne pour rerouter les requêtes vers le serveur (sinon le live reload ne marchera pas) :

https://reactnative.dev/docs/running-on-device

adb reverse tcp:8081 tcp:8081

Erreurs récurrentes lors de la compilation sur device ou émulateur

Cycle inside ; building could produce unreliable results: Xcode 10 Error

Vous pouvez résoudre ce problème en effaçant les données du répertoire de build, c’est une procédure très complexe, et parfois le plus simple et de force à recompiler en effaçant toutes les données.

#efface le contenu du répertoire derived data (Xcode)
rm -rf /Users/utilisateur/Library/Developer/Xcode/DerivedData/*

Effacer le cache React Native

Il est assez difficile d’effacer le cache de react Native. Si vous avez React Native version < 0.50

 watchman watch-del-all && rm -rf $TMPDIR/react-* &&
 rm -rf node_modules/ && npm cache clean && npm install && 
 npm start -- --reset-cache

Si vous avez React Native version > 0.50

watchman watch-del-all && 
rm -rf $TMPDIR/react-native-packager-cache-* &&
rm -rf $TMPDIR/metro-bundler-cache-* && 
rm -rf node_modules/ 
&& npm cache clean --force &&
npm install && 
npm start -- --reset-cache

lien : https://stackoverflow.com/questions/46878638/how-to-clear-react-native-cache

Une fois j’ai malgré avoir appliqué TOUTES ces méthodes n’ai pas pu rafraichir mon application, j’ai renommé par précaution mon répertoire build qui est dans le répertoire android, et j’ai rebuildé le projet. Un nouveau répertoire build est créé avec un build plus frais !

Retour en haut