Integrating React Native features in an existing iOS native app

In one of our recent projects, we integrated React Native feature in an iOS native app. Official documentation is readily available on this topic, but still, a couple of newbies in our team had a tough time understanding it. So, we decided to come up with this tutorial, with an example, which is easy to follow.

In this step-by-step guide, we are going to integrate the React Native Bakesale app with iOS Native app through the button action highlighted below.

Prerequisites

1. Create React Native App, which needs to be integrated with Native iOS App.
2. Create iOS Native App, in which the React Native app needs to be plugged in.
3. Install CocoaPods, which is a package management tool, that manages dependencies for iOS development.
4. Make sure npm/yarn is installed in your machine. The npm/yarn is the package manager for JavaScript. It is used for fast and reliable dependency management.

Steps for integrating the React Native app to iOS native app

1. Create “iOS App” folder in your desktop and place the iOS Native App inside the same.

2. Create “React Native App” folder in your desktop and place the React Native App inside the same.

3. Open the terminal and navigate to the React Native project path and execute the command given below to install all the dependencies.

npm install

or

yarn install

4. Add the script given below to the “package.json” file in the React Native project.

"scripts": {
"build:ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file='index.js' --bundle-output='./main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
}

Here is a short description of the commands in build:ios:

— entry-file=’<path to index.js file>’

— bundle-output=’<define the path for creating main.bundlejs >’

— dev=false (Fewer optimizations are made when false)

— platform=’ios’

5. To create “main.jsbundle”, open the terminal and navigate to React Native project path and execute the command given below:

npm run build:ios

or

yarn run build:ios

The “build:ios” command creates main. jsbundle file.

6. Check for main.jsbundle in the root folder of the React Native project.

7. Open a new terminal window and navigate to iOS native project path and initiate pod file in the project using the command given below:

pod init

On successful execution of “pod init” you can to see the pod file in the iOS Native project folder path as shown below.

8. Open the pod file and include the pods given below:

# Your 'node_modules' directory is probably in the root of your project,
# but if not, adjust the `:path` accordingly
pod 'React', :path => '../../React Native App/Bakesale/node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # Include this for RN >= 0.47
'DevSupport', # Include this to enable In-App Devmenu
'RCTText',
'RCTNetwork',
'RCTImage',
'RCTWebSocket', # Needed for debugging
# Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => '../../React Native App/Bakesale/node_modules/react-native/ReactCommon/yoga'
# Third party deps podspec link
pod 'DoubleConversion', :podspec => '../../React Native App/Bakesale/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../../React Native App/Bakesale/node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../../React Native App/Bakesale/node_modules/react-native/third-party-podspecs/Folly.podspec'

9. Execute the command given below to install the pods:

pod install

After successfully executing the “pod install” command you can see success message given below:

10. Now, open iOS Native project workspace in the XCode IDE, as shown below:

11. Drag and drop the “main.jsbundle” in the XCode project.

NOTE — For react assets to work without any glitches, select the option “Create folder references” while adding the “main.jsbundle”.

Now, the “main.jsbundle” file will be added to the iOS native app as shown below.

12. Create the Event Handler in the ViewController, where the React Native module needs to be invoked.

In this tutorial, we have integrated the “Bakesale”(React Native App) in the iOS Native App, by event handler ‘button click’. By the click of this button, the React Native app can be launched from the iOS app. The button click holds the RCTRootView which is available in the React library. Therefore, you need toimport the React library in the ViewController.

import React

The initialProperties are for illustration purposes only. In our Bake Sale React Native component, let us use this.props to get access to that initialProperties.

@IBAction func BakeSaleButtonTapped(sender : UIButton) {
//Code to get the url of the main.jsbundle in the project.
   let jsBundleLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")
//The data is used as initialProperties to React Native App.
   let data:NSDictionary = [:]; //We can use this parameter to pass the data to the React native App from the Native App.
//The RCTRootView is a native view used to host React-managed views within the app. Can be used just like any ordinary UIView.
   let rootView = RCTRootView(
bundleURL: jsBundleLocation,
moduleName: "Bakesale",
initialProperties: data as [NSObject : AnyObject],
launchOptions: nil)
let viewController = UIViewController()
viewController.view = rootView
self.present(viewController, animated: true, completion: nil)
}

NOTE — The aboveRCTRootView bundleURL starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using RCTRootView bundleURL, use RCTBridge initWithBundleURL to create a bridge and then use RCTRootView initWithBridge.

After completing the above steps. The iOS native app should look like below in the XCode.

13. Build and Run the iOS Native App. Now React Native Bake sale app can be accessed with the click of a button.

Sample Code Repository Detail:

IbrahimSulai/IntegrationReactNative