Première application mobile Android avec react-native

react-native est une librairie qui permet de créer une application mobile Android et IOS native grâce à un seul code compréhensible par tout développeur qui fait du javascript ou mieux react.

Nous allons détailler dans la suite de cet article les différentes étapes pour créer une application react-native avec Android.

Variables d’environnement

On est sur du Ubuntu 20.04 LTS

Dans un premier temps, on ajoute les variables d’environnements utiles à Android qui sont :

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Il y a deux façons de les ajouter:

  • Dans un terminal, lancer les commandes ci-dessus une par une (assez fastidieux)
  • Ajouter ces lignes dans le fichier ~/.bash_aliases (c’est ce qu’on va faire)

On édite alors le fichier

nano ~/.bash_aliases

On ajoute les lignes ci-dessus et on enregistre.

Création de l’application

Dans un dossier, on crée une application grâce à npx

cd /home/web/
npx react-native init mobile

npx: est un package nodejs – disponible depuis la version de 5.2 de npm (juillet 2017). Il permet de faire plusieurs choses.

Dans la commande précédente, npx va à la fois installer react-native et initialiser notre projet.

Retour de la commande

                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          

                  Welcome to React Native!                
                 Learn once, write anywhere               

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies


  Run instructions for iOS:
    • cd "/home/web/mobile" && npx react-native run-ios
    - or -
    • Open mobile/ios/mobile.xcodeproj in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/home/web/mobile" && npx react-native run-android

  Run instructions for Windows and macOS:
    • See https://aka.ms/ReactNative for the latest up-to-date instructions.

On installe l’application sur notre téléphone ANDROID qu’on a branché sur une prise USB de notre PC. Avant cela, on s’assure d’avoir activé le mode développeur sur notre téléphone. Il faut se référer au modèle du téléphone pour activer ce mode développeur car ce n’est pas toujours la même manipulation.

npx react-native run-android

Tout se passe bien jusqu’à l’erreur suivante :

error Failed to install the app. Please accept all necessary Android SDK licenses using Android SDK Manager: "$ANDROID_HOME/tools/bin/sdkmanager --licenses". Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

On lance Android Studio et on va dans Tools > SDK Manager puis dans l’onglet SDK Tools.

On coche « Google Play Licensing Library » et on clique sur « OK« . On installe la licence.

Une fois l’installation de la licence terminée, on retourne dans le terminal et on relance à nouveau

Il est maintenant temps de lancer « Metro server » . Cela se fait avec la commande :

npx react-native start

On devrait avoir ceci

                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          
                 Welcome to React Native!
                Learn once, write anywhere



To reload the app press "r"
To open developer menu press "d"

On le laisse tourner

On ouvre un autre terminal. On installe l’application sur le téléphone grâce à :

npx react-native run-android

Sur notre téléphone, on a bien l’affichage suivant:

qui confirme que notre application est bien fonctionnelle.

Et c’est tout 😉