How to Build an iMessage Extension for a React Native App (Part 1)
Typically, creating an iMessage Extension requires you to write your code in Swift. In this series, we look at how to make it work with React Native.
Join the DZone community and get the full member experience.Join For Free
When we set out to build an iMessage extension for Lisk Mobile using React Native, we immediately hit an exciting challenge. As it turns out, when it comes to third-party applications, Apple likes developers to play by their own rules. If a company wants to benefit from the tech giant's operational systems and rich user base, it needs to be built using Apple's own tools and programming language. iPhone's iMessage is definitely worth this hassle. It has proven to be a big hit since its release in 2016. Within the first six months, iMessage has generated thousands of innovative in-messenger extensions, including those created by Airbnb and Dropbox. Late in 2018, Mark Zuckerberg admitted this feature is one of Facebook's 'biggest competitor by far.' Since the release of Lisk Mobile during Lisk's Berlin meetup in October 2018, our team has been busy implementing features such as Face ID Authentication, as well as developing blockchain-specific solutions. Identifying the opportunity to extend the iMessage option for our users, we got to work on our own integration.
There was no up-to-date documentation to create an iMessage extension using React Native
The first option was to look for existing React Native components and educational material. Unfortunately, we could not find official documentation or up-to-date resources due to the fast pace of change in both React Native and native iOS development.
The second option was to try native iOS development within the Lisk Mobile codebase. The benefit of this approach was example projects and conference talks provided by Apple. However, introducing a considerable amount of Swift or Objective-C into the codebase was not desirable. Such a move would cause too much code duplication due to us having to rewrite most of our existing business logic and UI components.
We wrote our own bridge implementation and documented the process.
After careful evaluation, we decided to take an alternative route: writing our own bridge implementation. In the rest of this article, we will explain how we did it. If you want to jump straight into code, we've also created this handy demo project on GitHub.
Create a React Native Project
First things first! Let's start by creating a brand new React Native application. Since we are going to use native features, it would be better to follow the related part of the official documentation that suggests using the react-native-cli.
If you don't have it installed, you can install it by running:
$ npm install -g react-native-cli
Then let's create a new project called, of course, AwesomeProject!
$ react-native init AwesomeProject
Add an iMessage Extension Target
The next step is to add a target for our Xcode project that covers the iMessage extension.
Create an iMessage Root on the React Native Side
Now that we have our Xcode target for the iMessage extension, it's time to create a blueprint for our root component on the React Native side.
We also need to register that component in order to access it easily in the following steps. Let's create another file in the project root similar to the one React Native creates for the main application.
Connecting the iMessage Component With the Native Side
In this step, we will update our iMessage target to have the capability of rendering a React Native application within a native one. In order to achieve this, we have some manual work to do. In a regular React Native application, this step is actually handled automatically by the boilerplate that we have from react-native-cli, this is the case for Lisk. If you feel something is missing, you can compare the configuration and structure of your iMessage extension target with the main application.
We will start the configuration by linking the React related libraries. Since it's meant to be a simple application, libraries we add are just the core ones we need at the moment. If you are using some third-party modules on your main application and also need them in your iMessage Extension, don't forget to link them here as well!
Creating a Bridge Header File for Swift
Now that we have made those libraries available for our native part, it's time to create a Bridging-Header file to make them recognizable for the Swift compiler. The reason behind this is the libraries we have linked to in the previous step are written with Objective-C. This has been a common approach since Apple introduced Swift as the new language of the iOS platform and you can obtain deeper knowledge about it here.
We start with creating a new header file called Bridging-Header.h inside the AwesomeProjectMessageExtension folder.
Next, by navigating to Build Settings / Swift Compiler - General section of the Xcode configuration, choose that file as the Objective-C bridging header.
Updating Project and Build Configurations
The first one is updating Info.plist, a configuration file placed in every iOS project. In order to make our React Native bundle accessible in development mode, we need to enable loading content from localhost.
The next step is to add a Build Phase for iMessage extensions target in order to make sure we trigger the build script of React Native when we are running the extension.
The last step for this section is to update the schemes of the project. Each target in the application has a scheme that defines the configuration for actions available within the context of Xcode like Build, Run, and Analyze.
We update the schemes of both the main application and iMessage extension to make sure we have all the required content while preparing the app for the release.
RCTBridge and the Initial Render
Now that we are pretty much done with the configuration, it's time to start building our structure to render the application we have registered in the Create iMessage Root on the React Native Side section.
First, let's take a quick look at the structure of the iMessage extension. Every iMessage Extension has an entry point called MSMessagesAppViewController which extends the UIViewController class from UIKit and contains lifecycle methods and properties of an iMessage extension instance. This is similar to the AppDelegate in our main iOS application but doesn't have all the capabilities of it.
What we focus on at this point is to find a suitable way to create our RCTRootView (a UIView subclass exposed by React Native that can be embedded in any part of a native application) and load our iMessage related code on the React Native side as the bundle.
First, we start with modifying our MessagesViewController.swift to create an RCTBridge, RCTRootView and render our registered AwesomeProjectMessageExtension module within that view.
Since we want to clear out everything in the screen before and after opening the iMessage extension, we also create a little helper module that does the trick for us!
That’s it for Part 1! Check out Part 2 of the walkthrough on Monday to see the following steps of the walkthrough, afterthoughts, gotchas and much more!
Published at DZone with permission of Altay Aydemir. See the original article here.
Opinions expressed by DZone contributors are their own.