Intent (data sharing)

Introduction

React-native provide mechanism that permits to share a document into the desired application (ent).

The application could be in two states:

• close
• in background

In Android, we can achieve this with the help of Intent Filters.

Intent Filter

Intent filters are basically filters that define what an app can expect as its input.

Intent filter are specified in androidmanifest.xml file.

Here an extract for ent containing the intent-filter sections:

         <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                android:windowSoftInputMode="adjustResize"
                android:launchMode="singleTask"
                android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.SEND"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <data android:mimeType="application/*"/>
                <data android:mimeType="audio/*"/>
                <data android:mimeType="image/*"/>
                <data android:mimeType="text/*"/>
                <data android:mimeType="video/*"/>
            </intent-filter>
        </activity>

The first intent filter permits to:

• create an icon on the desktop of the application
• launch the application from the desktop icon

The second intent filter permits to:

• associate data (intent) to the application
• launch the application

Another thing interesting to note: intents are embedded inside android activities

Architecture

How the ent application can receive these documents?

There is differents possibilities. We have privilegied API with loose coupling between software layers.

react-native provide 3 api which both permits that:

• ActivityEventListener,
• LifecycleEventListener,
• RCTDeviceEventEmitter

ActivityEventListener

/**
 * Listener for receiving activity events.
**/
public interface ActivityEventListener {

  /** Called when host (activity/service) receives an onActivityResult call. */
  void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data);

  /** Called when a new intent is passed to the activity */
  void onNewIntent(Intent intent);
}

LifecycleEventListener

/**
 * Listener for receiving activity lifecycle events.
 */
public interface LifecycleEventListener {

  /**
   * Called when application resume (background ===> foreground)
   */
  void onHostResume();

  ...
}

RCTDeviceEventEmitter

Signal events to JavaScript without being invoked directly

Implementation

We forked the project react-native-file-intent which provided interested functionnalities like filepath calculation.

We added the following enhancments:

• return the content uri
• have a "publish subscribe" API

Native code

Here the corresponding native code permitting to handle intent notifications

public RNFileShareIntentModule(ReactApplicationContext reactContext) {
    ...
    reactContext.addActivityEventListener(this);
    reactContext.addLifecycleEventListener(this);
  }

  @Override
  public void onNewIntent(Intent aIntent) {
    /* if call to js code is made on onNewIntent, that not works on the second call when application in background. So its done on onHostResume() function. */

    if (mIntent == null) {
      mIntent = aIntent;
    }
  }

  @Override
  public void onHostResume() {
    Intent aIntent =  mIntent;

    if (mIntent != null) {
      mIntent = null;
      shareFile(aIntent);
    }
  }

...
  /**
   * Share the intent to js application part
   * @param intent
   */
   private void shareFile(Intent intent) {
    String action = intent.getAction();
    String type = intent.getType();
    Activity currentActivity = getCurrentActivity();

    WritableMap res = new WritableNativeMap();
    if (Intent.ACTION_SEND.equals(action)) {
      if (type.startsWith("application/") || type.startsWith("audio/") || type.startsWith("image/") ||
              type.startsWith("video/")) {
          sendEvent( fileHelper.getFileData(intent.getParcelableExtra(Intent.EXTRA_STREAM), currentActivity));
      }
    }

...

  /**
   * send event to js code
   * "FileShareIntent" is the name space subscription
   * @param params
   */
  private void sendEvent(WritableMap params) {
    reactContext
      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
      .emit("FileShareIntent", params);
  }

js code

MainNavigator instance is mandatory because on receipt of an intent, we navigate to the workspace. So We use an HOC above the MainNavigator to do the navigation. That permits not to have to test a MainNavigator instance has been created.

export default function withLinkingAppWrapper(WrappedComponent: React.Component): React.Component {
  class HOC extends React.Component {
    eventEmitter: NativeEventEmitter | null = null;

    public componentDidMount() {
      if (Platform.OS === "android") {
        RNFileShareIntent.getFilePath((contentUri: ContentUri) => {
          this.navigate(contentUri);
        });

        this.eventEmitter = new NativeEventEmitter(NativeModules.RNFileShareIntent);

        this.eventEmitter.addListener("FileShareIntent", (contentUri: ContentUri) => {
          this.navigate(contentUri);
        });
      }
    }

    private navigate(contentUri: ContentUri) {
      nainNavNavigate("Workspace", {
        contentUri: null,
        filter: FilterId.root,
        parentId: FilterId.root,
        title: I18n.t("workspace"),
        childRoute: "Workspace",
        childParams: {
          parentId: "owner",
          filter: FilterId.owner,
          title: I18n.t("owner"),
          contentUri: [contentUri],
        },
      });
    }

    public componentWillUnmount(): void {
      if (Platform.OS === "android") this.eventEmitter?.removeListener("FileShareIntent", this.navigate);
    }

    public render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return HOC;
}

On the function componentDidMount, we an explicit call to native module RNFileShareIntent.getFilePath((contentUri: ContentUri) is done.

That's because ActivityEvent and LifecycleEvent are not call when ent application is open explicitly.