Natuurlijk! Hier is een stapsgewijze gids om deep linking in je React Native-app te implementeren, inclusief het instellen van URL-schema's voor zowel iOS als Android, configuratiestappen en codevoorbeelden. --- ### 1. Installeren van benodigde packages Gebruik bijvoorbeeld `react-navigation` en `react-native-deep-linking` of de ingebouwde ondersteuning van React Navigation. ```bash npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context npm install @react-navigation/native-stack npm install react-native-url-polyfill ``` Vergeet niet om de nodige native dependencies te linken en opnieuw te bouwen. --- ### 2. Deep linking configureren in `app.json` / `Info.plist` / `AndroidManifest.xml` #### iOS - **URL-schema instellen in Xcode:** 1. Open Xcode en ga naar je project. 2. Selecteer je project target → "Info" tab → "URL Types". 3. Klik op het "+" teken en voeg een nieuwe URL Type toe: - Identifier: bijvoorbeeld `com.mijnapp` - URL Schemes: bijvoorbeeld `mijnapp` - **Voorbeeld:** ```xml <!-- In Info.plist --> <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLName</key> <string>com.mijnapp</string> <key>CFBundleURLSchemes</key> <array> <string>mijnapp</string> <!-- Dit is je URL-schema --> </array> </dict> </array> ``` #### Android - **In `AndroidManifest.xml`:** ```xml <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="mijnapp" android:host="start" /> <!-- host kan je aanpassen --> </intent-filter> ``` - **In `app/build.gradle`:** (optioneel, voor app links verificatie) ```gradle // Voeg deze toe onder defaultConfig manifestPlaceholders = [ appAuthRedirectScheme: 'mijnapp' ] ``` --- ### 3. Deep linking in React Navigation Configureer je navigator om de deep links te ondersteunen. ```javascript import { NavigationContainer } from '@react-navigation/native'; const linking = { prefixes: ['mijnapp://'], // je URL-schema config: { screens: { Startpagina: '', // andere schermen }, }, }; ``` Gebruik dit in je `NavigationContainer`: ```jsx <NavigationContainer linking={linking}> {/* je navigator */} </NavigationContainer> ``` --- ### 4. Code voor URL-afhandeling React Navigation handelt automatisch de link af via de `linking` configuratie. Voor extra controle kun je `getInitialURL` en `addEventListener` gebruiken. ```javascript import { useEffect } from 'react'; import { Linking } from 'react-native'; function App() { useEffect(() => { const handleDeepLink = (event) => { // extra logica indien nodig console.log('Deep link ontvangen:', event.url); }; // Controleer of de app geopend wordt via een link Linking.getInitialURL().then((url) => { if (url) { console.log('Start URL:', url); } }); // Luister naar nieuwe links const subscription = Linking.addEventListener('url', handleDeepLink); return () => { subscription.remove(); }; }, []); return ( <NavigationContainer linking={linking}> {/* navigator */} </NavigationContainer> ); } ``` --- ### 5. Testen van deep links - **iOS:** Gebruik Xcode's terminal: ```bash xcrun simctl openurl booted mijnapp://start ``` - **Android:** Gebruik `adb`: ```bash adb shell am start -W -a android.intent.action.VIEW -d "mijnapp://start" com.jouwapp.package ``` --- ### 6. Uitdagingen en tips - Zorg dat je URL-schema uniek is. - Controleer dat de juiste configuratie in Xcode en AndroidManifest.xml is gedaan. - Bij problemen met URL-afhandeling, controleer of de app correct is geregistreerd en of de links daadwerkelijk openen. - Test op echte apparaten, niet alleen simulators/emulators. - Overweeg het gebruik van [Branch](https://branch.io/) of [Firebase Dynamic Links](https://firebase.google.com/products/dynamic-links) voor meer geavanceerde functionaliteit. --- Als je nog specifieke issues hebt met URL-afhandeling of andere uitdagingen, laat het gerust weten!

Hier is een complete handleiding voor het implementeren van deep linking in je React Native app, specifiek gericht op je startpagina en URL-afhandeling. ## 1. Installatie benodigde packages ```bash npm install react-navigation/native react-navigation/stack npm install react-navigation/native-stack # Voor deep linking npm install react-native-screens react-native-safe-area-context ``` ## 2. iOS Configuratie ### Info.plist toevoegen (ios/[AppName]/Info.plist) ```xml <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>com.jouwnaam.app</string> <key>CFBundleURLSchemes</key> <array> <string>jouwapp</string> </array> </dict> </array> ``` ### AppDelegate.m aanpassen (iOS) ```objective-c #import <React/RCTLinkingManager.h> - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options { return [RCTLinkingManager application:application openURL:url options:options]; } - (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler { return [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler]; } ``` ## 3. Android Configuratie ### AndroidManifest.xml aanpassen (android/app/src/main/AndroidManifest.xml) ```xml <activity android:name=".MainActivity" android:launchMode="singleTask" <!-- Belangrijk voor deep linking --> android:exported="true"> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="jouwapp" /> </intent-filter> <!-- Voor HTTP/HTTPS links --> <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="https" android:host="www.jouwdomein.nl" /> </intent-filter> </activity> ``` ## 4. Navigation Setup ### App.js ```javascript import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { Linking } from 'react-native'; const Stack = createNativeStackNavigator(); // Je schermen const HomeScreen = ({ navigation }) => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Startpagina</Text> </View> ); }; const App = () => { // Deep linking configuratie const linking = { prefixes: ['jouwapp://', 'https://www.jouwdomein.nl'], // Configuratie van je routes config: { screens: { Home: 'home', // jouwapp://home of https://www.jouwdomein.nl/home // Voeg hier andere schermen toe }, }, }; return ( <NavigationContainer linking={linking} fallback={<Text>Laden...</Text>} > <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> {/* Voeg hier andere schermen toe */} </Stack.Navigator> </NavigationContainer> ); }; export default App; ``` ## 5. URL Afhandeling - Specifieke Uitdagingen Oplossen ### Geavanceerde URL Parsing ```javascript const linking = { prefixes: ['jouwapp://', 'https://www.jouwdomein.nl'], config: { screens: { Home: { path: 'home', screens: { // Voor complexe URL structuren Profile: 'profile/:userId', Settings: 'settings/:tab', }, }, }, }, // Custom URL afhandeling getInitialURL: async () => { // Check voor deep links bij app start const url = await Linking.getInitialURL(); if (url != null) { return url; } }, // Subscribe op URL changes subscribe: (listener) => { const onReceiveURL = ({ url }) => { listener(url); }; // Event listener voor deep links const subscription = Linking.addEventListener('url', onReceiveURL); return () => { subscription.remove(); }; }, }; ``` ### URL Parameters Verwerken ```javascript // In je HomeScreen component import { useRoute } from '@react-navigation/native'; const HomeScreen = () => { const route = useRoute(); React.useEffect(() => { // Check voor URL parameters if (route.params?.userId) { // Doe iets met de userId parameter console.log('Gebruiker ID:', route.params.userId); } }, [route.params]); return ( // Je UI componenten ); }; ``` ## 6. Testen van Deep Links ### Test commando's ```bash # iOS npx uri-scheme open jouwapp://home --ios # Android npx uri-scheme open jouwapp://home --android # Met parameters npx uri-scheme open "jouwapp://home?userId=123" --android ``` ### Handmatig testen in ontwikkelomgeving ```javascript // Tijdelijke test knop in je app <Button title="Test Deep Link" onPress={() => { Linking.openURL('jouwapp://home'); }} /> ``` ## 7. Probleemoplossing URL Afhandeling ### Veelvoorkomende problemen en oplossingen: 1. **Links werken niet op iOS**: - Controleer Info.plist configuratie - Zorg dat AppDelegate.m correct is geïmplementeerd 2. **Android app opent niet**: - Verifieer android:launchMode="singleTask" - Check intent filters in AndroidManifest.xml 3. **URL parameters worden niet doorgegeven**: - Gebruik useRoute hook om parameters te lezen - Controleer je linking configuratie 4. **Universal Links werken niet**: - Zorg voor apple-app-site-association file op je domein - Controleer of je domein geverifieerd is ### Debug functie: ```javascript const DebugLinking = () => { React.useEffect(() => { const getInitialURL = async () => { const initialUrl = await Linking.getInitialURL(); console.log('Initial URL:', initialUrl); }; getInitialURL(); const subscription = Linking.addEventListener('url', ({ url }) => { console.log('URL changed:', url); }); return () => subscription.remove(); }, []); return null; }; ``` Deze implementatie zorgt ervoor dat gebruikers je startpagina kunnen openen via externe links zoals `jouwapp://home` of `https://www.jouwdomein.nl/home`. De URL-afhandeling wordt centraal beheerd door React Navigation, wat consistent gedrag garandeert op beide platformen.