Expo Quick Start

Get MovableInk deeplinking working in your Expo app in under 10 minutes.

Prerequisites

Before you begin, ensure you have:

[x] Your MovableInk subdomain (e.g., mi.yourcompany.com)
[x] AASA and Digital Asset Links files configured by MovableInk
[x] Expo SDK 44+
[x] iOS deployment target of iOS 13.0+
[x] Android minSdkVersion of 24+

Need Help?

If you don't have these prerequisites, see the Getting Started guide or contact your Movable Ink client experience team.

Step 1: Install the SDK

npx expo install react-native-movable-ink

Step 2: Configure app.json

Update your app.json to configure deeplinking for both iOS and Android:

iOS Configuration

{
  "expo": {
    "scheme": "yourapp",
    "ios": {
      "associatedDomains": [
        "applinks:mi.yourcompany.com"
      ],
      "infoPlist": {
        "movable_ink_universal_link_domains": [
          "mi.yourcompany.com"
        ]
      }
    }
  }
}

Android Configuration

{
  "expo": {
    "android": {
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "mi.yourcompany.com",
              "pathPrefix": "/p/cpm"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        },
        {
          "action": "VIEW",
          "data": [
            {
              "scheme": "https",
              "host": "mi.yourcompany.com",
              "pathPrefix": "/p/rpm"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        },
        {
          "action": "VIEW",
          "data": [
            {
              "scheme": "https",
              "host": "mi.yourcompany.com",
              "pathPrefix": "/p/gom"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

Note

Replace mi.yourcompany.com with your actual MovableInk subdomain.

Step 3: Handle Incoming Links

In your App.tsx or App.js:

import React, { useEffect } from 'react';
import * as Linking from 'expo-linking';
import RNMovableInk from 'react-native-movable-ink';

export default function App() {
  useEffect(() => {
    // Handle deeplinks
    const handleDeeplink = (event: { url: string }) => {
      if (event.url) {
        resolveMovableInkLink(event.url);
      }
    };

    // Listen for deeplinks while app is running
    const subscription = Linking.addEventListener('url', handleDeeplink);

    // Handle deeplink that opened the app
    Linking.getInitialURL().then(url => {
      if (url) {
        resolveMovableInkLink(url);
      }
    });

    return () => {
      subscription.remove();
    };
  }, []);

  const resolveMovableInkLink = (url: string) => {
    RNMovableInk.resolveURL(url)
      .then((resolvedURL: string) => {
        console.log('Deeplink resolved to:', resolvedURL);
        // TODO: Navigate to appropriate screen
        navigateToContent(resolvedURL);
      })
      .catch((error: Error) => {
        console.error('Failed to resolve link:', error);
      });
  };

  const navigateToContent = (url: string) => {
    // Parse URL and navigate
    if (url.includes('/products/')) {
      // Navigate to product detail
      // navigation.navigate('ProductDetail', { productId });
    } else if (url.includes('/categories/')) {
      // Navigate to category
    }
  };

  return (
    // Your app content
    <YourAppContent />
  );
}

Step 4: Build and Test

Since Expo requires native builds for deeplinking to work:

# Build for iOS
eas build --platform ios

# Build for Android
eas build --platform android

Then test with a MovableInk link on your device.

It Works!

If you see the resolved URL in the console, your integration is working!