Fonctionnalités avancées avec React Native

Utiliser une fonctionnalité native : l’appareil photo

Dans l’exemple du chapitre précédent, nous avons créé une application permettant de gérer des contacts, en affichant des listes et en gérant une navigation pour les écrans. Nous allons dans ce chapitre améliorer cet exemple en raffinant la navigation et en y ajoutant Redux. Mais tout d’abord, explorons une possibilité offerte par React Native et Expo : l’utilisation de fonctionnalités natives du smartphone. Nous allons voir comment permettre à l’utilisateur de prendre des photos et de les afficher dans l’application. Cela nous permettra d’ajouter une fonctionnalité à l’application : celle d’associer des photos de profil à nos contacts.

Pour cette section, nous nous contenterons de réaliser un composant permettant de prendre une photo et de l’afficher ensuite. Dans les sections suivantes, nous intégrerons cette fonctionnalité à l’application.

Tout d’abord, nous aurons besoin d’installer deux dépendances à notre projet :

Installer ces dépendances avec NPM ne sera pas suffisant, car il y a également des opérations à faire dans le code natif de l’application, c’est-à-dire le code spécifique de chaque plateforme, iOS et Android. Nous n’avons pas accès directement à ce code, car c’est Expo qui le gère pour nous. C’est...

Ajouter Redux à l’application

Ajouter Redux à une application React Native ne présente pas de différence par rapport à une application web. Il faudra commencer par installer les dépendances nécessaires :

$ yarn add redux react-redux redux-thunk 

Il n’est pas nécessaire ici de séparer la gestion du store en plusieurs services, nous aurons donc un seul fichier store.js dans lequel nous placerons actions et reducer.

// src/store.js 
import { createStore, applyMiddleware } from 'redux' 
import thunk from 'redux-thunk' 
 
const initialState = { 
 loading: false, 
 contacts: [], 
 error: null 
} 
 
const actionTypes = { 
 LOAD_CONTACTS: 'LOAD_CONTACTS', 
 LOAD_CONTACTS_START: 'LOAD_CONTACTS_START', 
 LOAD_CONTACTS_SUCCESS: 'LOAD_CONTACTS_SUCCESS', 
 LOAD_CONTACTS_FAILURE: 'LOAD_CONTACTS_FAILURE' 
} 
 
export const actions = { 
 loadContacts: () => async dispatch => { 
   dispatch(actions.loadContactsStart()) 
   try { 
     const res = await 
       fetch('https://jsonplaceholder.typicode.com/users') 
     const contacts = await res.json() 
     dispatch(actions.loadContactsSuccess(contacts)) ...

Plus loin avec la navigation

Pour clôturer ce chapitre, allons un peu plus loin dans la navigation en ajoutant la possibilité de créer et de modifier des contacts. Cela nous donnera l’occasion d’une part de voir comment afficher des fenêtres modales (ou simplement modales) avec React Navigation, et d’autre part de réfléchir au meilleur moyen de faire travailler Redux et React Navigation ensemble.

Les modifications effectuées dans cette section sont importantes bien qu’une grande partie n’apporte pas de nouveautés aux notions que nous avons vues, c’est pourquoi je ne mettrai ici que quelques bouts de code ciblés.

Je vous encourage à vous référer aux exemples téléchargeables accompagnant le livre si vous souhaitez voir l’ensemble du code source final de l’application.

createStackNavigator( 
 { 
   contactsList: ContactsListScreen, 
   viewContact: ViewContactScreen 
 }, 
 { mode: 'modal' } 
) 

Conclusion

Ces deux chapitres consacrés à React Native vous auront permis, je l’espère, de voir que développer des applications mobiles n’est pas beaucoup plus difficile que développer pour le Web. J’aurais aimé présenter beaucoup d’autres choses à ce sujet, mais le développement avec React Native pourrait se voir consacrer un livre entier ! Notamment je n’ai pas abordé la gestion de fichiers ressources (images par exemple), ou certaines possibilités offertes par Expo (affichage d’un splashscreen au démarrage de l’application), ou encore la possibilité de persister des données localement dans le téléphone (les photos que l’on a prises par exemple, pour qu’elles soient disponibles au prochain lancement de l’application).

Si vous souhaitez aller plus loin dans le développement avec React Native, je ne doute pas que vous trouverez les ressources nécessaires sur Internet. La documentation de React Native (https://facebook.github.io/react-native/) est bien sûr le premier site à mettre dans vos favoris ! Elle contient de nombreux tutoriels pratiques, des fonctions les plus simples aux plus avancées (problématiques de performances par exemple).

La documentation de React Navigation (https://reactnavigation.org/docs/en/getting-started.html) est également très complète...