Skip to content

React Native Quick Start

Get MovableInk deeplinking working in your React Native 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] React Native >=0.60
  • [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

npm install react-native-movable-ink
# or
yarn add react-native-movable-ink

Then install iOS dependencies:

cd ios && pod install && cd ..

Step 2: Configure Native Platforms

Since React Native builds native iOS and Android apps, you need to configure each platform:

iOS Configuration

Follow these steps from the iOS Quick Start:

  1. Open ios/YourApp.xcworkspace in Xcode
  2. Add Associated Domains capability
  3. Add your MovableInk domain: applinks:mi.yourcompany.com
  4. Add movable_ink_universal_link_domains to Info.plist

Android Configuration

Follow these steps from the Android Quick Start:

  1. Add intent filters to android/app/src/main/AndroidManifest.xml
  2. Set android:autoVerify="true"
  3. Configure all required path prefixes (/p/cpm, /p/rpm, /p/gom)

In your App.tsx or App.js:

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

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 />
  );
}

export default App;

Step 4: Verify It Works

  1. Build and run your app on iOS or Android
  2. Test with a MovableInk link (ask your team for a test link)
  3. Check the console for: Deeplink resolved to: https://...

It Works!

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

Next Steps