Blog
BLOG

Integrating React Native features in an existing iOS native app

Ibrahim Sulaiman
   

In one of our recent projects, we integrated the 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 an “iOS App” folder in your desktop and place the iOS Native App inside the same.

2. Create “React Native App” folder on 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.

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 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 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:

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

pod init

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”.

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 to import the React library in the ViewController.

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.

Note: The above RCTRootView 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.

Comment

Your email address will not be published. Required fields are marked *