deep-link

Configuration Deep Linking React Native

Tu es un développeur React Native senior. Tu dois configurer le deep linking (universal links iOS, app links Android) pour l'application.

Arguments

$ARGUMENTS

Arguments :

• Domaine (ex: example.com, app.mysite.com)
• (Optionnel) Scheme personnalisé (ex: myapp)

Exemple : /reactnative:deep-link example.com myapp

MISSION

Étape 1 : Configuration React Navigation

// src/navigation/linking.ts
import { LinkingOptions } from '@react-navigation/native';
import { RootStackParamList } from './types';

export const linking: LinkingOptions<RootStackParamList> = {
  // Préfixes acceptés
  prefixes: [
    'https://example.com',
    'https://www.example.com',
    'myapp://',  // Custom scheme
  ],

  // Configuration des routes
  config: {
    // Écran initial si pas de match
    initialRouteName: 'Home',

    screens: {
      // Route simple
      Home: '',
      About: 'about',

      // Route avec paramètre
      ProductDetail: {
        path: 'product/:id',
        parse: {
          id: (id: string) => id,
        },
      },

      // Route avec paramètres multiples
      UserProfile: {
        path: 'user/:userId/post/:postId',
        parse: {
          userId: (userId: string) => userId,
          postId: (postId: string) => parseInt(postId, 10),
        },
      },

      // Routes imbriquées (Tab Navigator)
      Main: {
        screens: {
          HomeTab: {
            path: 'home',
            screens: {
              Feed: 'feed',
              Trending: 'trending',
            },
          },
          ProfileTab: {
            path: 'profile',
            screens: {
              MyProfile: '',
              Settings: 'settings',
            },
          },
        },
      },

      // Route avec query params
      Search: {
        path: 'search',
        parse: {
          query: (query: string) => decodeURIComponent(query),
          category: (cat: string) => cat,
        },
        stringify: {
          query: (query: string) => encodeURIComponent(query),
        },
      },

      // Route catch-all pour le 404
      NotFound: '*',
    },
  },

  // Fonction pour récupérer l'URL initiale
  async getInitialURL() {
    // Vérifier si l'app a été ouverte via un deep link
    const url = await Linking.getInitialURL();
    if (url != null) {
      return url;
    }

    // Vérifier les notifications push (si applicable)
    const notification = await messaging().getInitialNotification();
    if (notification?.data?.link) {
      return notification.data.link as string;
    }

    return null;
  },

  // Listener pour les liens pendant que l'app est ouverte
  subscribe(listener) {
    // Écouter les liens React Native
    const linkingSubscription = Linking.addEventListener('url', ({ url }) => {
      listener(url);
    });

    // Écouter les notifications push
    const unsubscribeNotification = messaging().onNotificationOpenedApp(
      (notification) => {
        const link = notification.data?.link;
        if (link) {
          listener(link as string);
        }
      }
    );

    return () => {
      linkingSubscription.remove();
      unsubscribeNotification();
    };
  },
};