Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. React
  3. Fonctionnalités avancées avec React Native
Extrait - React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition)
Extraits du livre
React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition) Revenir à la page d'achat du livre

Fonctionnalités avancées avec React Native

Introduction

React Native offre un accès direct aux fonctionnalités avancées des appareils mobiles, ce qui se traduit par une amélioration significative de l’expérience utilisateur. Ces fonctionnalités incluent des techniques telles que l’utilisation de la géolocalisation ou encore l’accès à l’appareil photo.

De plus, l’un des avantages majeurs de ces fonctionnalités avancées est leur compatibilité multiplateforme. Les fonctionnalités développées pour une plateforme, qu’il s’agisse d’iOS ou d’Android, peuvent souvent être réutilisées sur l’autre plateforme. Cela simplifie le développement, réduit les coûts et permet d’atteindre un public plus large bien qu’il faille parfois adapter certains développements en fonction de la plateforme cible.

Dans cette section, nous allons explorer plusieurs exemples concrets d’utilisation, notamment la géolocalisation et l’accès aux contacts. Nous découvrirons aussi comment tirer parti de l’API Context pour offrir aux utilisateurs la possibilité de choisir entre un thème clair et un thème sombre.

Utiliser la géolocalisation et accéder aux contacts

1. Utiliser la géolocalisation

La géolocalisation permet à votre application de récupérer la position GPS de l’appareil. Vous pouvez l’utiliser pour afficher des informations qui s’appuient sur la localisation de l’utilisateur.

a. Installer le module de géolocalisation

 Installez le module de géolocalisation en utilisant npm :

npx expo install expo-location 

b. Utilisation de la géolocalisation

Au sein de notre projet React Native avec Expo, nous avons vu dans le chapitre précédent qu’il est très simple d’implémenter le routage. Nous devons simplement créer un nouveau fichier dans le dossier /app.

Nous allons créer un nouveau fichier appelé location.js qui sera un nouvel écran sur lequel nous allons simplement afficher les coordonnées GPS de l’appareil :

// location.js 
import React, { useState, useEffect } from 'react'; 
import { Text, View } from 'react-native'; 
import * as Location from 'expo-location'; 
 
export default function LocationPage() { 
  const [location, setLocation] = useState(null); 
  const [errorMsg, setErrorMsg] = useState(null); 
 
  useEffect(() => { 
    (async () => { 
      let { status } = await Location.requestForegroundPermissionsAsync(); 
      if (status !== 'granted') { 
        setErrorMsg('Permission to access location was denied'); 
        return; 
      } 
 
      let location = await Location.getCurrentPositionAsync({}); 
      setLocation(location); 
    })(); 
  }, []); 
 
  let text = 'Chargement..'; ...

Exemple : utiliser un thème clair ou sombre avec l’API Context

La possibilité de basculer entre un thème clair ou sombre est devenue une caractéristique essentielle des applications modernes. Vous pouvez implémenter cette fonctionnalité en utilisant le contexte (Context API) de React. Cet exemple va nous permettre de réaliser que, même dans le cadre du développement mobile, nous avons à notre disposition tous les outils de React.js. Pour cet exemple, nous générons un nouveau projet avec la commande :

npx create-expo-app ThemeContextProjet 

Créer un Context pour le thème

 Commencez par créer un contexte pour gérer l’état du thème à l’intérieur de l’application. Voici le fichier ThemeContext.js :

import React, { createContext, useState } from 'react'; 
 
export const ThemeContext = createContext(); 
 
export const ThemeProvider = ({ children }) => { 
  const [isDarkTheme, setIsDarkTheme] = useState(false); 
 
  const toggleTheme = () => { 
    setIsDarkTheme(!isDarkTheme); 
  }; 
 
  return ( 
    <ThemeContext.Provider value={{ isDarkTheme, toggleTheme }}> 
      {children} ...

Conclusion

Au cours de ce chapitre, nous avons exploré un éventail de fonctionnalités avancées offertes par React Native et surtout par Expo, qui permettent de créer des applications mobiles riches.

Nous avons examiné en détail l’utilisation de capacités telles que la géolocalisation et l’accès aux contacts, qui permettent d’offrir des expériences utilisateur personnalisées. Nous avons aussi implémenté un thème clair/sombre à l’aide de l’API Context, offrant ainsi aux utilisateurs la possibilité de personnaliser l’apparence de l’application en fonction de leurs préférences individuelles.

À travers cette exploration, vous avez développé une compréhension de la puissance inhérente à React Native pour le développement d’applications mobiles modernes. Approfondir vos compétences en React Native vous permettra d’avoir une palette de compétences plus large, pour un effort minime.

Pour aller plus loin, il est recommandé de prendre en main Expo si le sujet vous intéresse. La documentation permet de couvrir beaucoup plus de cas d’usage.