In React Native, you can create Firebase Dynamic Links with custom parameters by using the Firebase Dynamic Links API provided by the @react-native-firebase/dynamic-links package. This package allows you to create deep links that carry additional information (parameters) and are handled by your app when users open them.

Here's a step-by-step guide on how to add parameters to Firebase Dynamic Links in React Native:

Step 1: Install the necessary packages Ensure that you have installed the required packages for Firebase in your React Native project:

npm install @react-native-firebase/app npm install @react-native-firebase/dynamic-links

Step 2: Set up Firebase in your React Native app Follow the official Firebase setup guide for React Native to initialize Firebase in your app. This includes configuring your Android and iOS projects, adding the google-services.json and GoogleService-Info.plist files, and initializing Firebase in your app.

Step 3: Create a Firebase Dynamic Link with parameters Now, you can create a Firebase Dynamic Link with custom parameters. Here's an example of how you can do it:

import React, { useEffect } from 'react'; import { View, Text, Button, Linking } from 'react-native'; import dynamicLinks from '@react-native-firebase/dynamic-links'; const YourComponent = () => { useEffect(() => { const handleDynamicLink = async () => { const link = await dynamicLinks().getInitialLink(); // Handle the dynamic link when the app is opened from the link if (link) { console.log('Received dynamic link:', link.url); } }; // Set up listener for dynamic links when the app is already running const unsubscribe = dynamicLinks().onLink(handleDynamicLink); // Clean up the listener when the component unmounts return () => unsubscribe(); }, []); const createDynamicLink = async () => { const link = await dynamicLinks().buildLink({ link: '', // Your domain for Dynamic Links // Include your custom parameters as key-value pairs // These parameters will be available in the app when the link is opened // Example parameters: campaignId, userId, promoCode, etc. dynamicLinkParameters: { campaignId: '1234', promoCode: 'SUMMER20', }, // Optional: Set the behavior of the link based on the platform (Android/iOS) android: { packageName: '', minimumVersion: '12', // Minimum Android version required for the link to open }, ios: { bundleId: 'com.yourapp.ios', appStoreId: '123456789', // Your iOS app's App Store ID }, }); console.log('Dynamic link:', link); }; return ( <View> <Text>React Native Firebase Dynamic Links</Text> <Button title="Create Dynamic Link" onPress={createDynamicLink} /> </View> ); }; export default YourComponent;

Step 4: Handle the Dynamic Link in your app In the example above, the Dynamic Link is created with custom parameters like campaignId and promoCode. When users click on the Dynamic Link, your app will receive the link in the handleDynamicLink function. You can extract the parameters from the URL and use them within your app.

That's it! You can now create Firebase Dynamic Links with custom parameters in your React Native app using the @react-native-firebase/dynamic-links package. When users open these links, your app will handle them and use the provided parameters as needed.

Have questions or queries?
Get in Touch