{"id":7869,"date":"2018-04-04T07:50:30","date_gmt":"2018-04-04T14:50:30","guid":{"rendered":"\/developerblog\/?p=7869"},"modified":"2020-03-14T17:07:23","modified_gmt":"2020-03-15T00:07:23","slug":"app-app-communication-react-native-android","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/ise\/app-app-communication-react-native-android\/","title":{"rendered":"App-to-app communication with React Native on Android"},"content":{"rendered":"

The <\/span>ixo Foundation<\/a>\u00a0was created to build a decentralized impact evaluation protocol using blockchain and the\u00a0<\/span>W3C decentralized identifier specification<\/a>. Impact, in this case, refers to impact investments, which are funding for projects that can make a <\/span>measurable change<\/a><\/span> in society. Impact projects are based on the UN’s 17 Sustainable Development Goals<\/a>, including projects to eliminate hunger, improve education, supply clean water, and increase gender equality. One of the key challenges with impact projects is producing, measuring, and valuing impact data at scale, and this is what ixo aims to address with the ixo protocol.\u00a0<\/span>In addition to the protocol, ixo is also building sample apps and SDKs for interacting with the impact protocol on the blockchain. They developed a <\/span>Web client<\/a> in <\/span>React.js<\/a> and an <\/span>SDK<\/a> based on <\/span>ethjs<\/a> to run using <\/span>MetaMask<\/a> or any other DApps (Decentralized Application<\/a>) browser. <\/span><\/span><\/p>\n

We recently worked with ixo to develop a sample client in <\/span>React Native,<\/a><\/span>\u00a0with the goals of sharing as much code as possible with the Web client and investigating strategies to allow different organizations to set their own standards for signing impact project documents.<\/span><\/p>\n

<\/p>\n

Problem<\/span><\/h2>\n

When using a DApps browser like MetaMask, the user is already authenticated in the browser context. On mobile, ixo needed a way to store the user\u2019s decentralized identifier (DID) and a mechanism to sign impact projects and verifications. <\/span><\/p>\n

One of ixo\u2019s use cases is to support multiple cryptographic signing algorithms and to allow different organizations to set their own standards for what and how an impact project or verification is signed. The approach to this use case that we investigated was to separate the impact project creation and verification app (henceforth, the impact app<\/em>) from the signing app, so organizations would be allowed to publish their own signing apps with their own standards.<\/span><\/p>\n

ixo chose React Native because they were already familiar with React.js, and they wanted to leverage their existing JavaScript SDK for managing DIDs and signing documents as much as possible. We needed to find a way to support app-to-app communication in React Native apps. Specifically, we needed to enable the impact app to send a JSON document to a signing app and await the signed response. While ixo does intend to eventually support Android and iOS, the first version of the app is only targeting Android.<\/span><\/p>\n

Attempt #1: Linking Module<\/span><\/h2>\n

Our first attempt at app-to-app communication was the <\/span>Linking<\/code> module<\/a><\/span> that already existed in the core React Native library. The benefit of this approach was that it was cross-platform out-of-the-box; iOS, Android, and even Windows 10<\/a>\u00a0support the Linking module. Our primary concern with this approach was that you are limited to sending data to other apps using URL parameters.<\/span><\/p>\n

Linking.openURL(url).catch(err => console.error('An error occurred', err));<\/pre>\n
For the impact app to send the JSON document to a signing app using the Linking<\/code> module, we\u2019d have to URL encode the JSON document and send it as a URL parameter. Before we did this, we checked for any limitations on the number of characters that could be used in a URL for the Linking<\/code> module and found that, on Android, the limit was between 100K and 200K characters. While this limit may have been reasonable for most JSON documents, ixo did not want to impose an arbitrary limit on the length of data being signed.<\/span><\/p>\n
Solution: Custom Native Modules for Android<\/span><\/h2>\n
While looking at the <\/span>native implementation<\/a> of the Linking<\/code> module on Android, we discovered that the Linking<\/code> module only supports triggering new activities using the <\/span>Activity.startActivity<\/code> API<\/a>. What we really wanted to use was the <\/span>Activity.startActivityForResult<\/code> API<\/a>, which supported getting a response back when the launched activity finished. Since React Native does not have any core modules for invoking this API, we had to create our own custom native module, which we called StartActivityModule<\/code>. Snippets of the StartActivityModule<\/code> are provided throughout this section, but you can find the full implementation on <\/span>GitHub<\/a><\/span>.<\/span><\/p>\n
Starting an Activity from React Native Android<\/span><\/h2>\n
To create a native module for React Native on Android, you need to create a new class that implements the <\/span>NativeModule<\/code> interface<\/a>. It\u2019s rare that you implement this interface directly, as React Native also provides a few useful base classes, including <\/span>BaseJavaModule<\/code><\/a> and <\/span>ReactContextBaseJavaModule<\/code><\/a><\/span>. In this case of StartActivityModule<\/code>, we chose the abstract ReactContextBaseJavaModule<\/code> because we required access to the ReactContext<\/code> inside the module. To derive from ReactContextBaseJavaModule<\/code>, you must supply an implementation for the getName<\/code> method and a constructor that takes the ReactApplicationContext<\/code> as a parameter.<\/span><\/p>\n
public class StartActivityModule extends ReactContextBaseJavaModule implements ActivityEventListener {\r\n\r\n  private final SparseArray<Promise> mPromises;\r\n\r\n  public StartActivityModule(ReactApplicationContext reactContext) {\r\n    super(reactContext);\r\n    mPromises = new SparseArray<>();\r\n  }\r\n\r\n  @Override\r\n  public String getName() {\r\n    return \"StartActivity\";\r\n  }\r\n}<\/pre>\n
To add a native method that gets exposed to JavaScript, use the <\/span>ReactMethod<\/code> attribute<\/a>. The method must be void-returning, and parameters can only use:<\/span><\/span><\/p>\n