4ème année Génie informatique

Sous la direction de : Mr BOUTABIA Mohammed

2022-2023

Rapport projet bibliographique

React Native Cookbook : Second Edition

DIGANBOU Luccin | KHARBACH Bilal

TABLE DES MATIERES

TABLE DES MATIERES .......................................................................................................................................... 2

1. INTRODUCTION ........................................................................................................................................... 3
2. BESOINS ET OBJECTIFS DU PROJET : .................................................................................................... 4
2.1. CONTEXTE :................................................................................................................................................................4
2.2. OBJECTIFS ET CONTRAINTES :.................................................................................................................................5
2.3. BESOINS TECHNIQUES :............................................................................................................................................6
3. DEVELOPPEMENT TECHNIQUE : ............................................................................................................ 7
3.1. CHAPITRE I : CONFIGURATION DE L’ENVIRONNEMENT. .....................................................................................7
3.2. CHAPITRE II : CREATION UNE SIMPLE REACT NATIVE APPLICATION. ......................................................... 10
3.3. CHAPITRE III : IMPLEMENTATION COMPLEXE USER INTERFACE. ................................................................. 12
3.4. CHAPITRE IV : IMPLEMENTATION COMPLEXE USER INTERFACE PART II. .................................................. 15
3.5. CHAPITRE V : IMPLEMENTATION COMPLEXE USER INTERFACE PART III. ................................................... 17
3.6. CHAPITRE VI : ANIMATIONS BASIQUES POUR NOTRE APPLICATION ............................................................. 22
3.7. CHAPITRE VII : ANIMATIONS AVANCES POUR NOTRE APPLICATION ............................................................. 23
3.8. CHAPITRE VIII : DONNEES LOGIQUES APPLICATIVE ........................................................................................ 28
3.9. CHAPITRE IX : IMPLEMENTATION REDUX....................................................................................................... 29
3.10. CHAPITRE X : APP WORKFLOW ET THIRD-PARTY PLUGINS.......................................................................... 33
3.11. CHAPITRE XI : AJOUT DE FONCTIONNALITES NATIVE I ................................................................................... 34
3.12. CHAPITRE XII : AJOUT DE FONCTIONNALITES NATIVE II................................................................................ 40
3.13. CHAPITRE XIII : INTEGRATION AVEC NATIVE APPLICATIONS ........................................................................ 41
3.14. CHAPITRE XIV : DEPLOIEMENT DE L’APPLICATION......................................................................................... 44
4. BILAN DU PROJET BIBLIOGRAPHIQUE : ............................................................................................ 46
4.1. RESUME : ................................................................................................................................................................. 46
4.2. APPORTS INDIVIDUELLES ET COLLECTIFS :........................................................................................................ 46
4.3. CONCLUSION :......................................................................................................................................................... 46

2
1. INTRODUCTION

Dans le cadre de notre seconde année du cycle ingénieur Génie Informatique à l’UIC, il

nous est proposé un projet bibliographique de 4 mois nous permettant d’enrichir nos

connaissances et nos compétences professionnelles au travers d’un livre ayant pour

finalité la conception et le développement d’une application mobile via REACT NATIVE, en

accords avec nos intérêts professionnels. Ayant une passion commune pour le

développement mobile, notre groupe composé de Bilal KHARBACH, Luccin DIGANBOU, a

saisi l’opportunité d’exploiter cet intérêt commun pour soumettre l’ébauche de ce projet

personnel innovant au responsable de l’année M. Mohammed BOUTABIA.

3
2. BESOINS ET OBJECTIFS DU PROJET :

2.1. Contexte :

React Native (également connu sous le nom de RN) est un cadre d'application
mobile populaire basé sur JavaScript qui vous permet de créer des applications
mobiles à rendu natif pour iOS et Android. Le framework vous permet de créer une
application pour diverses plateformes en utilisant la même base de code.

React Native a été publié pour la première fois par Facebook en tant que projet
open-source en 2015. En quelques années seulement, il est devenu l'une des
principales solutions utilisées pour le développement mobile.

Le développement React Native est utilisé pour alimenter certaines des principales
applications mobiles du monde, notamment Instagram, Facebook et Skype. Nous
abordons ces exemples et d'autres exemples d'apps alimentées par React Native
plus en détail dans ce post.

Lorsque Facebook a décidé pour la première fois de rendre son service disponible
sur les appareils mobiles, au lieu de créer une application native comme le
faisaient de nombreux acteurs technologiques de premier plan à l'époque, il a opté
pour une page Web mobile basée sur HTML5. Cependant, cette solution n'a pas
résisté à l'épreuve du temps, laissant beaucoup de place à l'amélioration de
l'interface utilisateur et des performances. En fait, en 2012, Mark Zuckerberg a
admis que "la plus grosse erreur que nous avons commise en tant qu'entreprise a
été de trop miser sur le HTML par rapport au native."

Peu après, en 2013, Jordan Walke, un développeur de Facebook, a fait une

découverte révolutionnaire : il a trouvé une méthode pour générer des éléments
d'interface utilisateur pour les applications iOS en utilisant JavaScript. Cela a mis le
feu aux poudres, et un Hackathon spécial a été organisé pour découvrir plus avant
dans quelle mesure le développement mobile pouvait être réalisé à l'aide de
solutions JavaScript (jusqu'ici traditionnellement basées sur le web).

C'est ainsi que React Native a vu le jour. Initialement développé uniquement pour
iOS, Facebook l'a rapidement suivi avec un support Android, avant de rendre le
framework public en 2015.

À peine trois ans plus tard, React Native était déjà le deuxième plus gros projet sur
GitHub, si l'on en croit le nombre de contributeurs. En 2019, il a tenu bon et est
arrivé en sixième position, avec plus de 9 100 contributeurs.

4
2.2. Objectifs et contraintes :

Objectifs :

Ce livre est destiné à servir de référence à une référence à des solutions à des
problèmes courants que vous rencontrerez probablement lors de la construction
d’une grande variété d’applications. Chaque chapitre est présenté comme une série
de recettes étape par étape qui expliquent chacune comment construire une seule
fonctionnalité d’une application globale. On donc dire que ce livre a principal
objectif de pouvoir créer une application basée sur du React native, garantissant
les principales fonctionnalités d’une application globale.

Contraintes :

Comme principale contrainte ce livre suppose que le développeur travaille sur un

ordinateur exécutant MacOs, les exemples d’exécution sont d’ailleurs propres à un
MacOs. Bien qu’il soit techniquement possible de développer des applications
React Native sous Windows ou Linux, il existe un nombre de limitations qui
rendent les machines MacOs beaucoup plus préférables pour React Native
développement, y compris les capacités de travailler avec du code iOS natif via
Xcode, exécuter du code iOS sur le simulateur iOS, et travaillez avec les outils de
développement les plus robustes pour React Native développement d’applications.
Outre cette contrainte logicielle, de nombreuses dépendances utilisées dans ce
livre sont dépréciés.

5
2.3. Besoins techniques :

➢ Expo dev :

Qu'est-ce qu'Expo Dev ? Expo est une plateforme open-source

permettant de créer des applications natives universelles pour Android,
iOS et le web avec JavaScript et React. Expo est un framework
permettant de créer des applications React Native. Il s'agit d'un
ensemble d'outils et de services conçus pour React Native. Il nous aidera
à commencer à créer des applications React Native en toute simplicité.

➢ Installation des dépendances :

La première étape pour la construction de notre première application

React Native consiste à installer les dépendances afin de pouvoir
commencer y compris NodeJs.

➢ Visual Studio Code :

Malgré que sur le livre est mentionné qu’il faut utiliser XCode, pour
notre cas on utilisera Visual Studio Code pour tester les différentes
applications abordées dans le livre.

➢ Android Studio :

Android Studio est livré avec l'émulateur Android officiel, qui est
l'émulateur qu'Expo recommande d'utiliser pendant le développement
Android Studio est livré avec l'émulateur Android officiel, qui est
l'émulateur qu'Expo.

6
3. Développement technique :

3.1. Chapitre I : Configuration de l’environnement.

L'écosystème React Native a beaucoup évolué depuis la première édition.

L'outil open source Expo.io, en particulier, a simplifié les phases
d'initialisation et de développement des projets.
Rendant le travail avec React Native encore plus agréable qu'il ne l'était
déjà dans la version 0.36.

Avec Expo on sera en mesure de créer des applications natives iOS et

Android en utilisant uniquement JavaScript, travailler dans le simulateur
iOS et l'émulateur Android avec un rechargement en direct, et tester sans
effort notre application sur n'importe quel appareil du monde réel via
l'application Expo.

On peut développer notre application entièrement en JavaScript sans

jamais avoir besoin d'utiliser Xcode ou Androïd Studio. Si le projet évolue
vers une application qui doit prendre en charge React Native comme Visual
Studio Code par exemple.

Sur ce chapitre nous aborderons les sujets suivants :

 Visual Studio Code

 Téléchargement et installation de Android Studio
 Intsallation des dépendances
 Tester l’application sur un appareil réel via Expo Dev

Visual Studio Code:

Comme mentionné avant le livre abordera les applications uniquement via

Xcode ce qui nécessite une machine MacOs qui n’est malheureusement pas
le cas pour notre équipe donc on va devoir traiter cette partie avec Visual
Studio Code et tester à chaque fois sur Expo Dev les différentes React
applications sans aucun souci.

Pour cela donc il suffit de télécharger Visual Studio Code via le lien ci-
dessous :

https://code.visualstudio.com/download

7
Android Studio :

Tout d’abord télécharger Android Studio via :

https://developer.android.com/studio/

Une fois installé, on devrait être sur qu’il y a déjà un ANDROID SDK Build-
Tools installé, sinon il faut l’installer.

Nous devrons également ajouter l'emplacement du SDK Android au

système PATH en modifiant ~ /.bash_profile via ;

Export PATH=$PATH:/Users/MY_USER_NAME/Library/Android/sdk

Lors d'une nouvelle installation d'Android Studio, vous verrez un écran de

bienvenue. Démarrez une nouvelle application pour ouvrir complètement
le logiciel. Ensuite, sélectionnez AVD Manager à partir des boutons dans le
coin supérieur droit de la fenêtre, comme indiqué dans les étapes
suivantes :

8
Ensuite il faudra télécharger l'une des images système sous l'onglet Recommandé
de l'écran Image système :

Et enfin il suffit de cliquer sur l’écran final et

Installation des dépendances & Expo :

Ensuite, il faudra installer les différentes dépendances nécessaires pour tester les
différentes applications :

▪ Node.js
▪ Watchman
▪ Installation react native sur Visual Studio code
▪ Installation Expo sur Visual Code puis télécharger l’applications
Expo sur un appareil réel.

Sommaire :

Dans ce chapitre, nous avons parcouru toutes les étapes nécessaires pour
commencer l'initialisation d'un nouveau projet, l'émulation de l'exécution de notre
nouveau projet sur votre ordinateur et l'exécution de notre application de
développement sur des appareils réels.

9
3.2. Chapitre II : Création une simple React Native Application.

: Nous avons plusieurs composants à notre disposition,

mais les conteneurs et le texte sont les plus courants et des composants utiles
pour créer des mises en page ou d'autres composants. Dans ce chapitre, nous
verrons comment pour utiliser des conteneurs et du texte, mais surtout, nous
verrons comment les styles fonctionnent dans React Native.
Ainsi nous pourront mettre en œuvre fonctionnalités, comme :
• Création d'un bouton bascule
• Configuration et utilisation de la navigation

Création d'un bouton bascule

Les boutons sont un composant essentiel de l'interface utilisateur dans chaque

application. Pour créer un bouton bascule, qui sera désélectionné par défaut.
Lorsque l'utilisateur appuie dessus, nous changeons les styles appliqués au
bouton pour le faire apparaître comme sélectionné. Pour cela nous devons
détecter l'événement tap, à utiliser une image comme interface utilisateur, à
conserver l'état du bouton, et ajoutez des styles en fonction de l'état du
composant.

Avant le click j’aime Apres le click j’aime

10
Configuration et utilisation de la navigation

Pour toute application qui a plus d'une vue, un système de navigation est d'une
importance primordiale. Le besoin de navigation est si omniprésent dans le
développement d'applications qu'Expo fournit deux modèles lorsque vous créez
une nouvelle application : Navigation vierge ou par onglets. Nous nous sommes
basés sur le Tab Navigation fourni par Expo. Nous allons créer une application
vierge avec navigation par onglets à partir de zéro pour mieux comprendre toutes
les parties requises.

Réalisation

• La première étape est d’importer les dépendances dans le fichier

App.js notamment StyleSheet et View.
• Puis nous définissons les routes avec routeName à partir de la prop
de navigation via navigation.state.
• Puis nous définissons les icônes pour chacun de nos trois itinéraires,
et renvoyez l'icône rendue pour l’itinéraire. Nous utiliserons le
composant Ionicons fourni par Expo pour créer chaque icône et
définissez la couleur de l'icône selon que l'itinéraire de l'icône est
focalisé.

11
3.3. Chapitre III : Implémentation complexe User Interface.

Dans ce chapitre, nous allons mettre en œuvre un exemple d’une interface

utilisateur complexe. Nous en saurons plus sur l'utilisation de flexbox pour
créer des composants qui fonctionnent sur différentes tailles d'écran,
comment détecter les changements d'orientation, etc..

Création d’un complexe layout pour les tablets en utilisant flexbox

Réalisation :

Nous allons avoir besoin d'une nouvelle application pour cette recette.
Appelons-la tablet-flexbox, quand on créer une nouvelle application avec
Expo, il y a un app.json qui est créé à la base du projet qui fournit une
configuration de base.
Dans cette recette, nous créerons une application dont nous voulons être
sûrs qu'elle sera belle sur une tablette, en particulier en mode paysage.

On crée d’abord une class pour App component, on utilisera par la suite le
fichier .json pour créer dataSource pour notre liste, on définira par la suite
un simple top toolbar et List component, nous allons utiliser le component
Post pour chaque enregistrement et obtenir la dataSource depuis stats.

12
Deux fichiers sont toujours manquants : le fichier .json avec les données et
le composant Post.

Dans cette étape, nous allons créer la data que nous allons utiliser pour
chaque publication sous nom data.json

Maintenant que nous avons quelques données, nous sommes prêts à

travailler sur le composant Post.
Dans ce composant, nous devons afficher l'image, le titre et le bouton.
Puisque ce component n'a pas besoin de connaître sur state, nous
utiliserons un stateless composant
Ce composant reçoit les données en tant que paramètre, que nous utilisons
ensuite pour afficher le contenu dans le composant.
Le composant Image utilisera le img propriété définie sur chaque objet
dans le fichier data.json pour afficher l’image.

13
Une fois notre component est défini on doit par la suite définir un style
pour chaque post pour rendre notre contenu plus agréable à voir :

Si on actualise le résultat sera normalement comme suivant :

14
3.4. Chapitre IV : Implémentation complexe User Interface part II.

1. CREATION D’UN COMPOSANT DE FORMULAIRE

La grande majorité des applications proposent un moyen de saisir des

données, qu'il s'agisse d'un simple page d’enregistrement de formulaire de
connexion ou un composant plus complexe avec de nombreux champs de
saisie et contrôles.
Dans cette section, nous verrons comment créer un composant de formulaire
pour gérer les entrées de texte.
Nous collecterons des données en utilisant différents claviers et afficher un
message d'alerte avec les informations résultantes.

Réalisations :

• Dans le fichier App.js on import les différents composant

• Apres avoir défini le composant principal de l'application, créons un
nouveau répertoire appelé UserForm dans la base du projet et ajoutons un
fichier index.js. Ensuite, nous importerons toutes les dépendances pour
cette classe.
• Pour rendre les champs de texte, nous allons utiliser le composant
TextInput dans notre méthode renderTextfield. Ce composant TextInput

15
est fourni par React Native et fonctionne à la fois sur iOS et Android. La
propriété keyboardType nous permet de définir le clavier que nous
voulons utiliser. Les quatre claviers disponibles sur les deux plates-formes
sont par défaut, numérique, adresse e-mail et pavé téléphonique.

16
3.5. Chapitre V : Implémentation complexe User Interface part III.

Dans ce chapitre, nous aborderons certaines des fonctionnalités les plus

avancées que vous devrez peut-être ajouter une application, l’application
qu’on va créer dans ce chapitre inclue la création d’un système audio
entièrement fonctionnel.

Réalisation :

Commençons par les dépendances qu’on aura besoin dans notre

component :

Dans un premier temps on doit d’abord créer une playlist pour contenir les
sons, chaque son est représenté par titre, artiste, album et uri :

17
On définira par la suite notre App class and initial state objet avec 4
propriétés :
• isPlaying pour définir si le son est lancé ou en pause.
• playbackInstance pour contenir l’audio instance.
• Volume et currentTrackIndex pour le son en cours de lecture.
• IsBuffering pour lancer.

Comme suivant :

Définissons d’abord DidMount() qui configurera l’audio via la méthode

setAudioModeAsync
*

18
Ensuite loadAudio() qui gérera le chargement de l'audio pour notre lecteur.

Ensuite on doit définir le rappel pour gérer les mises à jour de statut :

La méthode handlePlayPause vérifie la valeur de this.state.isPlaying pour

déterminer si le son doit être lu ou mise en pause :

19
Ensuite, définissons la fonction de gestion pour gérer le saut vers le son précédent.
Tout d'abord, nous allons effacer le son actuel de l'instance de lecture en appelant
unloadAsync, ensuite nous mettrons à jour la valeur currentTrackIndex de l'état à
un de moins que la valeur actuelle.

On fera l’inverse pour HandleNextTrack, on ajoutera +1 de la valeur actuelle de

currentTrackIndex :

Maintenant on définira notre fonction render, :

20
La méthode renderSongInfo() renvoie JSX de base pour afficher les
métadonnées associées à la piste en cours de lecture

Et finalement on ajoutera un peu de style pour notre application

Et voilà le résultat final de notre application lecture audio :

21
3.6. Chapitre VI : Animations basiques pour notre application

Objectif du chapitre : Pour une meilleur expérience utilisateur, il est

parfois utile d’ajouter des animations à notre application pour mieux
diriger l'attention de l'utilisateur, mettre en évidence des actions
spécifiques, ou simplement ajouter une touche distinctive à notre
application. L’objectif de ce chapitre est donc de pouvoir réaliser des
animations intégrées dans nos applications. Nous aborderons
essentiellement la création des containers extensibles et pliables.

Dans l’exemple qui suit, nous allons créer un élément conteneur

personnalisé avec un titre et un contenu.
Lorsqu’un utilisateur appuie sur le titre, le contenu se réduira où se
développera l'API LayoutAnimation sera très utile.

Réalisation :

• Une fois que nous avons les dépendances, déclarons les defaultProps
pour initialiser ce composant. Dans cette recette, nous n'avons qu'à
initialiser la propriété développée cela se fait comme suit :

export default class Panel extends Component {

static defaultProps = { expanded:false};}
const styles = StyleSheet.create({ reste du code });

• Sur Android l'API React Native LayoutAnimation est désactivé par

défaut dans la version actuelle de React Native. Il faudra donc l’activer
à l’aide de l'assistant de plate-forme avec UIManager, de cette
manière :

composantWillMount() {
si (Plateforme.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true); }}

La figure ci-dessous présente des réalisations de conteneurs

personnalisés avec un titre et leurs contenus.

22
3.7. Chapitre VII : Animations avancés pour notre application

Dans cette partie, nous allons apprendre à créer des éléments de

liste dans un ListView avec une diapositive latérale animée. Si
l'utilisateur fait glisser l'élément au-delà d'un seuil, l'élément est
supprimé. Il s'agit d'un modèle courant dans de nombreuses
applications mobiles avec des listes modifiables. Nous allons
également voir comment utiliser PanResponder pour gérer les
événements de glisser.

Réalisation .

Premièrement commençons par importer les dépendances

Ce component sera simple, on a juste besoin d’une barre d’outils et le

contactList component qu’on a importé dans l’étape précédente :

23
Ajoutons les dépendances nécessaires sur index.js :

Définissons les données :

L'état de ce composant ne contiendra que deux propriétés : les données

de la liste et une valeur booléenne qui sera mise à jour lorsque le
déplacement commencera où se terminera.

Notre render méthode donc sera comme suivant :

24
La méthode renderItem retournera chaque item de la liste :

Nous devons basculer la valeur de la propriété swiping sur l'objet

d'état, qui basculera si le défilement vertical sur la liste est verrouillé
ou non :

Lors de la suppression d'un élément, nous devons trouver l'index du

contact donné, puis le supprimer de la liste d'origine. Après cela, nous
devons mettre à jour dataSource sur l'état pour restituer la liste avec
les données résultantes :

Ouvrons ContactItem.js et importons les dépendances qu’on aura

besoin :

25
 Définissons les propriétés par défaut pour ce compoennet
contactItem :

Une fois le component est créé, on doit configurer PanResponder :

Nous allons découper cette méthode en deux étapes. Tout d'abord,

nous devons déterminer si l'élément actuel doit être supprimé ou non.
Pour ce faire, nous devons fixer un seuil. Si l'utilisateur fait glisser
l'élément au-delà de notre seuil, nous supprimerons l'élément, comme
suit :

26
Une fois on a configuré l’animation, on est prêt pour bouger l’item :

Finalement on ajoute quelques styles :

Notre résultat final donc doit être comme suivant :

27
3.8. Chapitre VIII : Données logiques applicative

Objectif du chapitre : L’un des aspects les plus importants du

développement d'une application est la gestion des données. Ces données
peuvent provenir localement de l'utilisateur, peuvent être servies par un
serveur distant qui expose une API ou, comme avec la plupart des
applications métier, peuvent être une combinaison des deux.
Dans ce chapitre, nous découvrirons une méthode simple pour stocker et
obtenir des données localement sur un appareil. Pour mettre en œuvre les
différents outils développes dans ce chapitre nous verrons comment créer
le process de login avec un exemple de login avec Facebook.

Comment cela fonctionne... ?

L'interaction avec Facebook dans notre application React Native est rendue
beaucoup plus facile qu'elle ne l'aurait été autrement grâce à la
bibliothèque d'aide Facebook d'Expo.
Apres l’importations des différentes bibliothèques nous devons créer la
fonction logIn, qui utilise la fonction
Facebook.logInWithReadPermissionsAsync pour effectuer la demande de
connexion à Facebook. Cette fonction prend deux paramètres : un appID et
un objet d'options. Dans notre cas, nous ne définissons que l'option
permissions. L'option de permissions prend un tableau de chaînes pour
chaque type de permission demandée, mais dans notre cas, nous n'utilisons
que la plus basique des permissions la plus basique, 'public_profile'.
À l'étape 6, nous avons complété la fonction logIn. Elle appelle le point de
terminaison de l'API graphique de Facebook Graph de Facebook, /me,
après une connexion réussie, en utilisant le jeton fourni par les données
renvoyées par de logInWithReadPermissionsAsync.
Les informations de l'utilisateur et le statut de la connexion seront
enregistrés dans un état, ce qui déclenche un nouveau rendu et affiche les
données de l'utilisateur à l'écran.
Cet exemple ne fait qu'un appel à un seul point de terminaison API simple.
Vous pourriez utiliser les de ce point de terminaison pour remplir les
données de l'utilisateur dans votre application. Alternativement, on pourra
toutes fois utiliser le même jeton que celui reçu lors de la connexion pour
effectuer toutes les actions fournies par l'API graphique. Pour voir quel
type de données est à votre disposition via l'API.

28
3.9. Chapitre IX : Implémentation REDUX

Dans ce chapitre, nous allons passer pas à pas dans le processus d'ajout de
Redux à notre application.

À un moment donné du développement de la plupart des applications,

nous aurons besoin d'une meilleure façon de gérer l'état de l'application
globale. Cela facilitera le partage de données entre les composants et
fournira une architecture plus robuste pour faire évoluer notre application
à l'avenir.

Réalisation :

Après avoir installé la bibliothèque react-redux avec nos autres

dépendances. Dans cette recette, nous allons enfin nous en servir.

Tout d’abord commençons par les imports nécessaires depuis redux store
pour notre App.js

C'est le travail du Provider de connecter notre magasin Redux à

l'application React Native afin que les composants de l'application puissent
communiquer avec le magasin.

Passons au component Album. Le composant vivra à

componens/Album/index.js.

29
Créons maintenant la class Album :

Le premier ensemble de parenthèses dans un appel à connect prend deux

paramètres de fonction : mapStateToProps et mapDispatchToProps.

De même, la fonction mapDispatchToProps mappera également nos

créateurs d'action aux propriétés du composant

Maintenant que notre magasin Redux est connecté à notre composant,

créons le composant lui-même

30
Nous aurons également besoin d'une fonction pour ajouter des photos. Ici,
nous allons utiliser le package randomcolor (importé en tant que
randomColor par convention) pour créer une image avec le service
placehold.it

Nous aurons également besoin d'une fonction removePhoto

Le Template de l'application aura besoin d'un bouton TouchableOpacity

pour ajouter des photos, d'un ScrollView pour contenir toutes les images
dans une liste déroulante et de toutes nos images

31
Enfin, nous ajouterons des styles afin que l'application ait une mise en
page, comme suit :

L'application est complète ! Cliquer sur le bouton Ajouter une photo

ajoutera une nouvelle photo au début de la liste des images, et appuyer sur
une image la supprimera

32
3.10. Chapitre X : App Workflow et Third-Party Plugins

Objectif du chapitre

Dans ce chapitre, nous allons examiner de plus près le fonctionnement de

chaque méthode d'amorçage d'une nouvelle application React Native.
React Native, et comment intégrer des paquets tiers qui peuvent ou non être
adaptés à l'Expo.
Dans les chapitres précédents, l'accent a été entièrement mis sur la
construction de
pièces fonctionnelles d'une application React Native. Dans ce chapitre, la
plupart de des concepts serviront donc également à illustrer le
fonctionnement d'une application React Native. Cette section vise également
à illustrer comment différents packages peuvent être mis en œuvre.

Les plugins de React native

React Native CLI : c’est l’outil de développement officiel pour les

applications React Native. L’automatisation des tâches, y compris la liaison,
le partage et la création d’une application, est très simple dans React Native
CLI. Cet outil de développement React Native est très utile pour les
programmeurs. Vous pouvez utiliser le CLI pour installer des projets pré-
configurés avec un package spécifique. Le développeur peut déclencher le
menu dev et recharger l’application en utilisant l’interface en ligne de
commande en appuyant sur d ou r.

CocoaPods : CocoaPods est un gestionnaire de dépendances pour les projets

Swift et Objective-C Cocoa. Il fonctionne presque de la même manière que
npm, mais gère les dépendances open source pour le code iOS natif au lieu
du code JavaScript. Nous n'utiliserons pas beaucoup CocoaPods dans ce
livre, mais React Native fait usage de CocoaPods pour une partie de son
intégration iOS, donc avoir une compréhension de base du gestionnaire peut
être utile. Tout comme le fichier package.json abrite tous les paquets d'un
projet JavaScript géré avec npm, CocoaPods utilise un Podfile pour lister les
dépendances iOS d'un projet. De même, ces dépendances peuvent être
installées à l'aide de la commande

Application : Utilisation de react-native-spinkit pour l'ajout

Des indicateurs de chargement animés.

Quel que soit le type d'application que vous construisez, il y a de fortes

chances que votre application doive d'attendre des données d'une manière
ou d'une autre, qu'il s'agisse du chargement de ressources ou de l'attente
d'une réponse d'une requête AJAX. Lorsque cette situation se produit, vous
voudrez probablement aussi un moyen pour votre application d'indiquer à
l'utilisateur qu'un élément de données requis est toujours en cours de
chargement. Une solution facile à utiliser à l'adresse solution facile à
utiliser pour résoudre ce problème est d'utiliser react-native-spinkit.
Ce paquet fournit 15 indicateurs de chargement d'aspect professionnel et
faciles à utiliser (dont quatre pour iOS uniquement), à afficher pendant le
chargement des données dans votre application.
Ce paquet nécessite l'exécution de la commande suivante :
react-native link

33
3.11. Chapitre XI : Ajout de fonctionnalités native I

L'un des principes fondamentaux du développement React Native consiste à écrire

du JavaScript pour créer des applications mobiles véritablement natives. Pour ce
faire, de nombreuses API et composants d'interface utilisateur natifs sont exposés
via une couche d'abstraction et sont accessibles via le pont React Native.

Cette recette nous guidera dans l'écriture de notre premier module native Android.
Nous allons créer un module natif HelloManager avec une méthode greetUser qui
prend le nom et un booléen isAdmin comme arguments, qui renverra un message
d'accueil que nous afficherons dans l'interface utilisateur.

Réalisation :

Pour cela nous utiliserons react-native-button librairie qui peut être installé avec
npm :

npm install react-native-button --save

Ou il peut être installé à l'aide de yarn :

yarn add react-native-button

Nous allons commencer par ouvrir un nouveau projet dans Android Studio. Dans
l'écran d'accueil d'Android Studio, vous pouvez sélectionner Ouvrir un projet
Android Studio existant, puis sélectionner le répertoire Android dans le dossier du
projet.

Une fois le projet chargé, ouvrons l'explorateur de projet (c'est-à-dire

l'arborescence des répertoires) sur le côté gauche d'Android Studio et
développons la structure du package pour trouver les fichiers source Java, qui
doivent vivre dans l'application

34
Faites un clic droit sur le package com.nativemoduleapp, sélectionnez
Nouveau

Nous aurons également besoin d'une classe HelloPackage dans le même

répertoire. On peut répéter les étapes 2 et 3 pour créer cette classe, en
appliquant simplement le nouveau nom et en gardant le champ Kind
défini sur Classe.

Commençons par implémenter notre module natif HelloManager. Nous

allons commencer par le nom du package et les dépendances dont nous
aurons besoin dans ce fichier :

ReactContextBaseJavaModule est la classe de base de tous les modules

React Native, nous allons donc créer la classe HelloManager en tant que
sous-classe de celle-ci. Nous devons également définir une méthode
getName, qui est utilisée pour enregistrer les modules natifs avec le pont
React Native. Il s'agit d'une différence par rapport aux implémentations
de modules natifs iOS, car celles-ci sont définies via le nom de la classe :

35
Maintenant que nous avons configuré notre module native
HelloManager, il est temps d'y ajouter la méthode greetUser, qui
attendra comme arguments name, isAdmin, et le callback qui sera
exécuté pour envoyer le message à la couche React Native :

Une autre étape unique à Android consiste à enregistrer le module natif

avec l'application, ce qui est un processus en deux étapes. La première
étape consiste à ajouter notre module HelloManager à la classe
HelloPackage que nous avons créée précédemment. Nous allons
commencer par les dépendances pour HelloPackage.java :

La deuxième étape de l'enregistrement du module natif avec

l'application React Native consiste à ajouter HelloPackage au module
MainApplication. La plupart du code ici est généré par le processus
d'amorçage React Native. La méthode getPackages doit être mise à jour
pour prendre à la fois new MainReactPackage() et new HelloPackage()
comme arguments passés à Arrays.asList :

36
Nous avons terminé la partie Java de cette recette. Nous devons
construire notre interface utilisateur, qui invoquera la méthode native
HelloManager greetUser et affichera sa sortie

Nous devons faire une référence à l'objet HelloManager qui réside sur le
composant NativeModules importé :

37
Créons la classe App et l'état initial :

Nous sommes prêts à définir la fonction render du composant

38
Nous ajouterons des styles à la mise en page et styliserons l'application ;

L'application finale devrait ressembler à la capture d'écran suivante :

39
3.12. Chapitre XII : Ajout de fonctionnalités native II

Ce chapitre couvre essentiellement des exemples d'applications qui

exploitent des modules intégrés et créés par la communauté React native.
Des exemples traite de ce sujet, allant du rendu d'un bouton de base à la
création d'un processus multithread qui ne qui ne bloque pas le thread
principal de l’application, sont abordés dans ce chapitre. Comme exemple
illustratif nous verrons comment mettre en œuvre la fonctionnalité
« copier-coller ».

Copier et coller du contenu

L'une des fonctions les plus utilisées dans les systèmes d'exploitation de
bureau et mobiles est le presse-papiers pour copier et coller du contenu.
Un scénario courant sur mobile consiste à remplir des formulaires avec du
texte long, comme des adresses e-mail ou des mots de passe. Au lieu de le
taper avec quelques fautes de frappe, il serait plus facile d'ouvrir
l'application Contacts, de copier l'e-mail à partir de là et de le coller dans
votre TextInfo et de le coller dans votre champ TextInput.
Cette recette va montrer un exemple de base sur Android et iOS de la façon
dont nous pouvons copier et coller du texte dans notre React Native coller
du texte dans notre application React Native. Dans notre exemple
d'application, nous aurons à la fois une vue statique Text et un champ
TextInput statique et un champ TextInput que vous pouvez utiliser pour
copier son contenu dans le presse-papiers.
De plus, il y aura un bouton qui sortira le contenu du presse-papiers dans la
vue.

Mise en œuvre

• Commençons par créer un composant ClipboardText qui utilise à la

fois un composant Text pour afficher du texte et permet de copier
son contenu vers un autre composant Texte pour afficher du texte
et qui offre la possibilité de copier son contenu dans le presse-
papiers par une pression longue. Créons un dossier de composants
à la racine du projet et un fichier ClipboardText.js à l'intérieur de
celui-ci.
• Ensuite, nous allons définir la classe App et l'état initial. Nous
utiliserons la propriété clipboardContent de l'état pour stocker le
texte qui est collé du presse-papiers dans l'interface utilisateur
• L'interface utilisateur aura un composant Texte dont le texte
pourra être copié par une pression longue. Définissons la méthode
copyToClipboard. Nous allons saisir l'entrée via son ref (que nous
définirons plus tard), et accéderons au texte du composant via sa
propriété props.children. Une fois que le texte a été stocké dans une
variable locale, nous le passons simplement à la méthode setString
de Clipboard pour copier le texte dans le presse-papiers

40
3.13. Chapitre XIII : Intégration avec native applications

Dans cette recette, nous couvrirons la communication de la couche native à

la couche React Native, en envoyant des données de l'application iOS
parente à notre application React Native intégrée, en utilisant un
UITextField dans l'application iOS qui envoie ses données à l'application
React Native.

Réalisation :

Commençons par mettre à jour le fichier d'implémentation

ViewController.m dans la couche native

L'étape suivante consiste à ajouter une référence au pont React

Native via l'interface ViewController, reliant efficacement le
contrôleur natif au code React Native

Ensuite, nous devrons mettre à jour la méthode

openRNAppEmbeddedButtonPressed.

41
De retour dans le Main.storyboard, ajoutons ce champ de texte, ainsi
qu'une étiquette qui définit à quoi sert l'entrée

Nous avons maintenant terminé les étapes nécessaires dans

l'application native, nous nommerons l'application FromNativeToRN
pour correspondre au nom du module que nous avons défini dans la
couche native

42
Enfin, nous pouvons ajouter la fonction de rendu, qui restitue
simplement la valeur stockée dans state.userName :

Il est temps d'exécuter notre application ! Tout d'abord, à la racine

du projet, nous pouvons démarrer l'application React Native

React-native start

43
3.14. Chapitre XIV : Déploiement de l’application

Après la création d’une application, la première étape consiste à tester

votre application sur votre appareil personnel iOS ou Android. Après avoir
franchi cette étape, vous voudrez probablement la partager avec un groupe
de personnes sélectionnées pour obtenir des commentaires des utilisateurs
ou un groupe de personnes sélectionnées afin d'obtenir des commentaires
des utilisateurs. Finalement, vous allez atteindre un point où votre
application est prête à être diffusée dans le monde via les magasins
d'applications. Ce chapitre couvrira le déploiement sur un appareil iOS et
sur un appareil android.

Réalisation :

Déploiement sur IOS

• Ouvrons d'abord le projet React Native iOS nouvellement créé dans

Xcode. Ouvrez l'éditeur de Project Editor en sélectionnant la racine du
projet dans le panneau de gauche.

• Sous l'onglet Général de l'éditeur de projet, sélectionnez l'application

iOS dans la section TARGETS sur la gauche.
Sous la section Signature, sélectionnez votre équipe, comme suit :

• Répétez cette étape pour deux de chacune des entrées de la liste

TARGETS.
• Sélectionnez votre appareil dans le sélecteur de destination, comme
suit :

44
• Pour lancer l'application sur votre appareil connecté, appuyez
simplement sur le bouton Play. Vous devez vous assurer que votre
appareil est branché, déverrouillé et fiable pour qu'il apparaisse dans la
liste des appareils périphériques dans Xcode.
Si c'est la première fois que vous exécutez une application que vous
avez développée sur cet appareil, vous devrez également ajuster les
paramètres pour que les applications de votre compte de développeur.
Sur l'appareil iOS, ce paramètre peut être trouvé dans Paramètres |
Général | Gestion des périphériques.

Déploiement sur android

1. Commençons par ouvrir notre projet React Native Android dans Android
Studio.

2. Ensuite, appuyez sur le bouton d'exécution, comme suit :

3. Assurez-vous que le bouton radio Choisir un appareil en cours

d'exécution est sélectionné et que votre appareil est affiché dans la liste.
Périphérique est affiché dans la liste. Appuyez sur OK pour continuer,
comme suit :

45
4. BILAN DU PROJET BIBLIOGRAPHIQUE :

4.1. Résumé :

Ce rapport couvre tous les aspects du livre React Native Cookbook – Second Edition,
des applications React Native, y compris les principes de base, le développement
avancé et l’intégration avec des API externes. Il vise à fournir des instructions de base
aux développeurs débutants et intermédiaires qui souhaitent apprendre à créer une
application React Native avec un minimum d'effort. Les chapitres principaux abordent
la création d'une interface utilisateur, la configuration d'un serveur et la mise en
œuvre de technologies telles que GraphQL, MobX, Redux et Webpack. En outre, il
explique comment intégrer des API externes telles que Facebook Login, Google Maps
et Firebase Realtim Database.

4.2. Apports individuelles et collectifs :

Bilal KHARBACH

Lors de ce projet, j’ai eu l’occasion de travailler en équipe ainsi de mettre la main sur
React Native, ce sont des points importants, car j'ai pu élargir mes connaissances dans
le développement mobile grâce à ce livre, à la fois en effectuant mes tâches
individuelles mais aussi grâce à l'échange avec mon collègue.

Luccin DIGANBOU

En adéquation avec mes centres d'intérêt, l'idée de choisir un livre sur le

développement mobile React Native à immédiatement piquée ma curiosité. Ce projet
est une synthèse en lui-même, tant par sa structure pluridisciplinaire que par les
capacités et les aptitudes qu'il exige. Cette complexité technique nous pousse
rapidement à travailler sur la gestion de projet et les relations humaines, afin
d'organiser les hommes et leurs idées.

4.3. Conclusion :

Cette année, nous avons pris les devants en proposant notre propre vision du
développement mobile notamment React Native, nous avions en tête quelques bases et
méthodes scolaires concernant ce dernier En maitrisant le livre dans sa globalité, nous
avons eu un aperçu complet du processus de fabrication d’une application mobile via
React Native, des compétences et des connaissances qui y sont attachées.

46