Integrate React Native with Existing IOS App
By: Ran Zeller
Tags: iOS, React Native

This article proposes is the walk you through integrate React Native with existing App and building a bridge to making calls to JS

First step is to create an iOS native app (IosSampleIntgrateApp) with one button. When pressing on the button it opens React Native view.

After creating the iOS native app put all the native iOS project under an iOS directory like you see in the image below.

Integrate React Native within the native project

Create package.json file in the root directory:

2. In the root directory where you can find package.json file run the following command:

%npm install

3. Go to iOS directory and run the following command(It will create Podfile):

%pod init

4. Edit the Podfile with the following example:

5. Run in the iOS directory:

%pod install

6. Go to main.storyboard define a button and connect it to the ViewController, In the button action(startReactNativeView) create RCTRootView and set it to viewController to present it on screen.

7. Create the index.js file in the root directory which will be the entry point of the react-native.

8. In the info.plist you need to add the following permission. This will allowed you to communicate with RN server in debug mode.

<key>NSAppTransportSecurity</key>

<dict>

<key>NSExceptionDomains</key>

<dict>

<key>localhost</key>

<dict>

<key>NSIncludesSubdomains</key>

<true/>

<key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>

<true/>

</dict>

</dict>

</dict>

To run this you should run the following commands from the root directory:

npm start

and then run iOS application form the Xcode on simulator

Till now I explained how the start react-native from an iOS native app, all the code is here:

Now I would like to explain how to communicate with javaScript, in this case, we will have two ways of communication as described in the following image.

Bridge from native to javascript

For creating the bridge form native to java script we should export our function which will be called the RN with params. for this we should create a class which inherent from

RCTEventEmitter <RCTBridgeModule>

and also we should use objectiveC since the RN for create the bridge use some macros which can’t use in swift.

This is the header file which inherent from RCTEventEmitter and I define one static function to send event

In this class implement the supportedEvent and return list of event name and then we will use the super function sendEventWithName and the event name(in the case runJsCode)

In the index file we should import the NativeModules and NativeEventEmittr, form NativeModules we can export the module we defined in the native code (in this example EventSenderManager). and then we can add listener for the events which come form the native(in this case runJScode)

Now we can run it as I explained before and seeing in the loges that the javaScript print whenever we press on the button a data which come from the native.

all the code is here:

Bridge from javascript to native

To implement the calls from javascript to native I will define a new export module with the macro RCT_EXPORT_MODULE and in the same class I will define function which will be able to be called from the JS

In the index.js file we can bring the CallbackManager from the NativeModules and with it makes call to the native as you can see in the example

all the code is here: