Editions ENI Livres | Vidéos | e-Formations
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.
