Création d'une application de calendrier multiplateforme avec React Native

Après initialisation du projet, installer les dépendances essentielles :

npm install @react-navigation/native @react-navigation/stack
npm install react-native-calendars
npm install react-native-vector-icons
npm install @react-native-async-storage/async-storage
npm install react-native-modal-datetime-picker

Ces bibliothèques vous donneront la navigation, des vues sur le calendrier, des icônes, un stockage local et un sélectionneur de date/heure – tout ce dont vous avez besoin pour commencer à construire l'interface utilisateur.

Étape 2: Conception de l'interface utilisateur

L'interface utilisateur d'une application de calendrier doit être propre, réactive et intuitive. React Native fournit des composants de base comme , , et que vous utiliserez largement.

Construire l'écran principal du calendrier

Pour la vue du calendrier, la bibliothèque offre des composants personnalisables tels que et . Voici une configuration minimale pour une vue mensuelle :

import { Calendar, LocaleConfig } from 'react-native-calendars';

const MyCalendar = ({ onDateChange }) => {
 return (
 <Calendar
 onDayPress={(day) => onDateChange(day.dateString)}
 markedDates={{
 "2025-03-10": { selected: true, marked: true, selectedColor: "blue" }
 }}
 theme={{
 backgroundColor: '#ffffff',
 calendarBackground: '#ffffff',
 textSectionTitleColor: '#b6c1cd',
 selectedDayBackgroundColor: '#00adf5',
 selectedDayTextColor: '#ffffff',
 todayTextColor: '#00adf5',
 dayTextColor: '#2d4150',
 arrowColor: 'orange',
 }}
 />
 );
};

Pour les vues hebdomadaires et quotidiennes, vous pouvez soit construire des composants personnalisés en utilisant avec défilement horizontal ou utiliser le composant intégré de la bibliothèque, qui fournit un hybride programme hebdomadaire. Testez les deux approches sur des appareils réels pour mesurer la performance.

Ajout de la navigation

Utilisez React Navigation[ pour gérer les écrans : l'écran principal du calendrier, un écran de détails d'événement, un écran de création/modification et un écran de paramètres.

const Stack = createStackNavigator();

function AppNavigator() {
 return (
 <NavigationContainer>
 <Stack.Navigator initialRouteName="Calendar">
 <Stack.Screen name="Calendar" component={CalendarScreen} />
 <Stack.Screen name="EventDetail" component={EventDetailScreen} />
 <Stack.Screen name="EditEvent" component={EditEventScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Formulaire d'événement UI

Pour créer et éditer des événements, créez un formulaire avec champs, un sélecteur de date/heure (en utilisant ), et un bascule pour la récurrence. Exemple d'extrait :

const [title, setTitle] = useState('');
const [startDate, setStartDate] = useState(new Date());
const [showDatePicker, setShowDatePicker] = useState(false);

<View>
 <TextInput placeholder="Event Title" value={title} onChangeText={setTitle} />
 <TouchableOpacity onPress={() => setShowDatePicker(true)}>
 <Text>{startDate.toDateString()}</Text>
 </TouchableOpacity>
 <DateTimePicker
 isVisible={showDatePicker}
 value={startDate}
 onConfirm={(date) => { setStartDate(date); setShowDatePicker(false); }}
 onCancel={() => setShowDatePicker(false)}
 />
</View>

Étape 3: Manipulation des événements et des données

Event data is the heart of your app. You need a robust state management strategy and persistence layer.

Gestion d'État : choisissez le bon outil

Pour une petite application, Reacts intégré et peuvent suffire. Cependant, comme vous ajoutez la synchronisation, la récurrence et plusieurs écrans, considérez [Redux Toolkit ou Zustand. Ces derniers fournissent un conteneur d'état prévisible qui simplifie le débogage et les tests.

// Example using Context API
const EventContext = React.createContext();

export const EventProvider = ({ children }) => {
 const [events, setEvents] = useState([]);
 const addEvent = (event) => setEvents([...events, event]);
 const updateEvent = (id, updated) => { /* ... */ };
 const deleteEvent = (id) => { /* ... */ };
 return (
 <EventContext.Provider value={{ events, addEvent, updateEvent, deleteEvent }}>
 {children}
 </EventContext.Provider>
 );
};

Enveloppez votre composant racine avec le fournisseur.

Persistance locale

Enregistrer les événements localement en utilisant AsyncStorage (pour une simple valeur clé) ou SQLite (pour les requêtes relationnelles).AsyncStorage est plus simple lors du prototypage; SQLite (via ) est mieux pour les gros ensembles de données et les premiers scénarios hors ligne.

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveEvents = async (events) => {
 try {
 await AsyncStorage.setItem('@events', JSON.stringify(events));
 } catch (e) {
 console.error('Failed to save events', e);
 }
};

Charger les événements lorsque l'application démarre et mettre à jour le stockage local après chaque mutation.

Traitement des événements récurrents

Pour les événements récurrents, vous avez deux stratégies communes :

• Extendez à la volée: Conservez un événement -"master" avec une règle de récurrence (c.-à-d. RRULE) et générer des instances lors de l'affichage d'une plage de dates.
• instances d'urgence : Précalculer et stocker les instances d'événements individuelles pour une fenêtre roulante (p. ex., les 12 prochains mois) afin d'accélérer les requêtes.

La première approche est efficace en matière de stockage, mais nécessite un calcul de la date. La seconde fournit des lectures plus rapides mais utilise plus d'espace.

Étape 4: Synchronisation avec les calendriers externes

Une des fonctionnalités les plus demandées est la synchronisation avec Google Calendar, Apple Calendar ou Outlook. Cela nécessite l'authentification OAuth2 et les appels d'API.

Intégration du calendrier Google

1. Déploiez un projet Google Cloud[ : Activez l'API Google Calendar et créez des identifiants OAuth 2.0 (identifiant client pour mobile).
2. Utilisez une bibliothèque comme pour gérer le flux OAuth. Cette bibliothèque vous permet d'ouvrir le navigateur système, d'obtenir un jeton d'accès et de le stocker en toute sécurité.
3. Faire des requêtes d'API: Utilisez l'API REST (p. ex. ) pour récupérer et pousser les événements.

import { authorize } from 'react-native-app-auth';

const config = {
 issuer: 'https://accounts.google.com',
 clientId: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
 redirectUrl: 'com.yourapp:/oauthredirect',
 scopes: ['https://www.googleapis.com/auth/calendar'],
};

const authResult = await authorize(config);
// Use authResult.accessToken to call the Google Calendar API

La synchronisation du calendrier Apple fonctionne de la même façon en utilisant avec les paramètres Apple. Outlook utilise l'API Microsoft. Toujours stocker des jetons dans un stockage sécurisé (comme ) et les rafraîchir automatiquement.

Traitement des conflits

Lorsque vous synchronisez bidirectionnellement, des conflits peuvent survenir (p. ex., un événement est édité sur les deux appareils).Mettre en œuvre une stratégie : les derniers auteurs-gagnants sont les plus simples.

Étape 5 : Ajout de notifications de poussée

Les rappels sont essentiels pour une application de calendrier. Réagir Native offre deux chemins principaux:

• La messagerie en nuage de Firebase (FCM) + – fonctionne sur les deux plateformes.
• Expo Notifications – si vous utilisez Expo, cela fournit une API plus simple.

Pour envoyer des notifications locales programmées, vous pouvez utiliser ou (pour les canaux Android avancés). Par exemple, pour planifier une notification 15 minutes avant un événement:

import PushNotification from 'react-native-push-notification';

PushNotification.localNotificationSchedule({
 title: "Upcoming Event",
 message: event.title,
 date: new Date(event.startTime.getTime() - 15 * 60 * 1000),
});

N'oubliez pas de demander les autorisations de notification sur iOS et configurer les canaux Android.

Étape 6: Assurer la compatibilité entre les programmes

Alors que React Native absute de nombreuses différences, vous allez encore rencontrer des nuances spécifiques à la plateforme.

Utilisation du module Plateforme

import { Platform } from 'react-native';

const isIOS = Platform.OS === 'ios';
const paddingTop = isIOS ? 20 : 0;

Utilisez pour retourner des valeurs ou des composants spécifiques à la plateforme.

Conception réactive pour différentes tailles d'écran

Les grilles de calendrier peuvent être encombrées sur de petits écrans. Utilisez ou pour ajuster les tailles de cellules et les échelles de police. Par exemple, sur un téléphone en mode portrait, vous pouvez réduire la taille de police des étiquettes de jour.

Optimisation des performances

• [[][][]][FLT:]][FLT:][FLT:[FLT:][FLT:][FLT:][FLT:][FLT:[FLT:][FLT:][FLT:][FLT:][FLT:][FLT:][FLT:][FLT:][FLT][FLT:][FLT][FLT][FLT][FLT][FLT][FLT][FLT][FLT][F][F]
• Mémoize Components: Enveloppez les cellules du calendrier et les éléments d'événement dans pour éviter les ré-re-remorques inutiles lorsque l'utilisateur défile.
• Image et Animation Bibliothèques[: Utilisez pour les animations fluides lors de la commutation de vues ou d'événements en expansion.
• Questions sur la base de données[: Si vous utilisez SQLite, indexez les colonnes fréquemment interrogées (par exemple ).