Integrating a React Native App (RN Version 0.65.1) with an Existing iOS Native App

Integrating a React Native App (RN Version 0.65.1) with an Existing iOS Native App

A Step-by-Step Guide to Integrate a React Native App (RN version 0.65.1) with an iOS Native App.

In this tutorial, we’ll learn how to integrate a React Native App with an existing iOS Native app, demonstrating with one example.

Even though the official documentation is available on this topic, it is not clear and precise for newbies 😃

There are a few situations that occur where a developer wants to bring the components to build using React Native to his/her native projects. This blog deals with the end-to-end detailed steps to achieve the same.

#Prerequisites

Please make sure the below prerequisites are done for integrating the React Native App into an iOS Native app.

  • Create a React Native App, which needs to be integrated with a Native iOS App. Please refer to the Getting Started guide for creating the React Native App.
  • Create an iOS Native App, in which the react-native App needs to be plugged in. Please refer to the Getting Started guide for creating the iOS App.
  • Install CocoaPods. CocoaPods is a package management tool for iOS development.
  • 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 (RN version 0.65.1) to our iOS Native app

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

2. Create the “React Native App” folder and place the React Native App inside it.

3. Open the terminal and navigate to the React native project path. Execute the below command, which will create the “node_modules” folder.

npm install or yarn install

4. Add the below script in 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'"
}

Using the above command we can create the main.jsbundle file using the local CLI that lies within the react-native npm package.

The short description for the above command,

  • entry-file=’<path to our index.js file>’
  • bundle-output=’<path to where the main.jsbundle will be created>’
  • dev=false (a bunch of perf optimizations is made when false)
  • platform=’ios’

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

npm run build:ios or yarn run build:ios

The “build:ios” command creates the 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 the 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 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:

# Uncomment the next line to define a global platform for your project
platform :ios, '11.0'
target 'Native_iOS_App' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!
pod 'React', :podspec => '../../React Native App/Bakesale/node_modules/react-native/React.podspec'
pod 'React-Core', :podspec => '../../React Native App/Bakesale/node_modules/react-native/React-Core.podspec'
pod 'React-CoreModules', :path => '../../React Native App/Bakesale/node_modules/react-native/React/CoreModules'
pod 'React-RCTActionSheet', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/ActionSheetIOS'
pod 'ReactCommon', :path => '../../React Native App/Bakesale/node_modules/react-native/ReactCommon'
pod 'React-RCTAnimation', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/Vibration'
pod 'React-cxxreact', :path => '../../React Native App/Bakesale/node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../../React Native App/Bakesale/node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../../React Native App/Bakesale/node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../../React Native App/Bakesale/node_modules/react-native/ReactCommon/jsinspector'
pod 'React-perflogger', :path => '../../React Native App/Bakesale/node_modules/react-native/ReactCommon/reactperflogger'
pod 'FBReactNativeSpec', :path => '../../React Native App/Bakesale/node_modules/react-native/React/FBReactNativeSpec'
pod 'RCTTypeSafety', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/TypeSafety'
pod 'RCTRequired', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/RCTRequired'
pod 'FBLazyVector', :path => '../../React Native App/Bakesale/node_modules/react-native/Libraries/FBLazyVector'
pod 'React-callinvoker', :path => "../../React Native App/Bakesale/node_modules/react-native/ReactCommon/callinvoker"
pod 'React-runtimeexecutor', :path => "../../React Native App/Bakesale/node_modules/react-native/ReactCommon/runtimeexecutor"
# Your 'node_modules' directory is probably in the root of your project,
# but if not, adjust the `:path` accordingly
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'Yoga', :path => '../../React Native App/Bakesale/node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
# 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 'RCT-Folly', :podspec => '../../React Native App/Bakesale/node_modules/react-native/third-party-podspecs/RCT-Folly.podspec'
# Pods for Native_iOS_App target 'Native_iOS_AppTests' do
inherit! :search_paths
# Pods for testing
end
target 'Native_iOS_AppUITests' do
inherit! :search_paths
# Pods for testing
end
end

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

pod install

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

10. Now, open the 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’. With 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 to import the React library into the ViewController.

import React

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

@IBAction func ReactNativeAppButtonTapped(sender : UIButton) {
//let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
let jsBundleLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")
let data:NSDictionary = [:]; //We can use this parameter to pass the data to the React native App from the Native App.

let rootView = RCTRootView(
bundleURL: jsBundleLocation!,
moduleName: "Bakesale",
initialProperties: data as [NSObject : AnyObject],
launchOptions: nil
)
let viewController = UIViewController()
viewController.view = rootView
viewController.modalPresentationStyle = .fullScreen
self.present(viewController, animated: true, completion: nil)
}

NOTE — The aboveRCTRootView bundle URL 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 bundle URL, use RCTBridge initWithBundleURL to create a bridge and then use RCTRootView initWithBridge.

After completing the above steps. The iOS native app should look like this 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:

https://github.com/IbrahimSulai/Integration_ReactNative_iOS_Upgrade/tree/master

--

--

--

Mobile — Full stack developer, React Native Developer, iOS App Developer, Front End Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Conditional Statements in JavaScript

Part 1 Prioritize and React to Technical Debt

UI with Angular and Carbon Design System to call an IBM Cloud Function.

How to show Queue Position in Salesforce Chat?

Connecting NodeJs & PostgreSQL

Bringing everything into one place — GSoC Week 7

Classes in JavaScript

Filtering out duplicates in a Javascript array

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ibrahim Sulaiman

Ibrahim Sulaiman

Mobile — Full stack developer, React Native Developer, iOS App Developer, Front End Developer

More from Medium

Archiving iOS React Native app in an NRWL monorepo: debugging guide

How to build react-native iOS CI/CD pipeline using Github Actions + Ms AppCenter

Better Credentials Management with Expo Application Services

React-Native Push Notifications with Amazon SNS