react-native-fluq

A Firebase Dynamic Links alternative for React Native applications.

Features

• Generate dynamic links on the backend
• Pass parameters through the installation process
• Handle platform-specific behavior (iOS, Android, Web)
• Receive parameters after app installation
• Lightweight and easy to use

Installation

npm install react-native-fluq --save
# or
yarn add react-native-fluq

iOS Setup

1. Add the following to your AppDelegate.m:

#import <RNFluq.h>

// Add this method if it doesn't exist
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [RNFluq handleLink:url];
}

// For Universal Links
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  if ([userActivity.activityType isEqualToString:NSUserActivityTypeBrowsingWeb]) {
    return [RNFluq handleLink:userActivity.webpageURL];
  }
  return NO;
}

2. Add API configuration to Info.plist:

<key>FluqApiKey</key>
<string>YOUR_SERVER_API_KEY</string>
<key>FluqServerUrl</key>
<string>https://your-api.example.com</string>

3. Update your Info.plist to add URL Schemes:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>your-app-scheme</string>
    </array>
  </dict>
</array>

The iOS SDK automatically does two server calls when FluqApiKey and FluqServerUrl are configured:

1. First launch after install: posts attribution token data to your endpoint.
2. Installed app link open (including short Universal Links): posts the incoming full URL to the same endpoint to resolve JSON params.

Android Setup

1. Add API configuration metadata to your android/app/src/main/AndroidManifest.xml inside the <application> tag:

<meta-data
  android:name="com.fluq.api_key"
  android:value="YOUR_SERVER_API_KEY" />
<meta-data
  android:name="com.fluq.server_url"
  android:value="https://your-api.example.com" />

2. Add the following to your android/app/src/main/AndroidManifest.xml within the <activity> tag:

<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="your-app-scheme" />
</intent-filter>

3. Update your MainActivity.kt:

import com.fluq.RNFluqPackage;
import android.content.Intent;

class MainActivity : ReactActivity() {
    override fun onNewIntent(intent: Intent?) {
        super.onNewIntent(intent)
        (reactNativeHost
            .reactInstanceManager
            .getNativeModule(RNFluqModule::class.java))
            ?.onNewIntent(intent)
    }
}

4. Make sure to add the package to your MainApplication.kt:

import com.fluq.RNFluqPackage;

override fun getPackages(): List<ReactPackage> {
    val packages = PackageList(this).packages.toMutableList()
    packages.add(RNFluqPackage())
    return packages
}

In your android/app/build.gradle, add the Google Play library:

dependencies {
    implementation 'com.android.installreferrer:installreferrer:2.2' // Check for latest version
}

The Android SDK automatically does two server calls when metadata is configured:

1. First launch after install: posts Play Install Referrer data (including referral code) to your endpoint.
2. Installed app link open: posts the incoming full URL (for example short links) to the same endpoint to resolve JSON params.

Usage

Check for initial link that opened the app

import Fluq from 'react-native-fluq';

// In your component or app startup
async function checkInitialLink() {
  const linkData = await Fluq.getInitialLink();
  if (linkData) {
    // App was opened with a dynamic link
    console.log('App opened with link:', linkData.url);
    console.log('Parameters:', linkData.params);
    
    // Handle link parameters
    if (linkData.params.referral) {
      // Handle referral code
    }
  }
}

Listen for dynamic links while app is running

import Fluq from 'react-native-fluq';

// Set up listener in your component
useEffect(() => {
  const unsubscribe = Fluq.onLink((linkData) => {
    // App received a dynamic link while running
    console.log('Received link:', linkData.url);
    console.log('Parameters:', linkData.params);
    
    // Handle the link parameters
    // ...
  });
  
  // Clean up listener
  return () => unsubscribe();
}, []);

Backend Configuration

This library works with any backend that can generate appropriately formatted dynamic links. The backend should:

1. Generate a short URL that redirects to your app
2. Include platform-specific fallback URLs for web, iOS, and Android
3. Pass parameters through the installation process

See the C# Azure Functions backend implementation for a complete reference.

License

MIT