React Native App Development Company in USA | Page 2

How to Create Bridge in React Native for iOS and Android?
What is React Native Bridge?
React Native is developed in such a way that we will create a bridge between the language and therefore the JavaScript
code. A “bridge” is nothing but how to line up communication between native platform and React Native.
One of the most important reasons for the recognition of React Native app development is that we can create a bridge
between the language and JavaScript code, which suggests we will reuse all the reusable libraries created in the iOS and
Android world.
To create a production grade application at some point of your time you would like to use Native Bridge. There are only
a few articles and tutorials on cross-platform React Native bridge which works on both iOS and Android. During this
article, we'll create a Native Bridge to access Swift and Java class from JavaScript.
Create the LightApp
To better understand Native Modules we'll create an easy LightApp example using react-native CLI.
$ react-native init LightApp
$ cd LightApp
Next, we'll create a category Bulb in Swift for iOS and Java for Android, and this may be utilized in this app during a
React component. This may be a cross-platform example and therefore the same React code will add both iOS and
Android.
As we've created a basic skeleton of the project, next we've divided this text into two sections:
Section 1 — Native Bridge in iOS
Section 2 — Native Bridge in Android
Section 1 — Native Bridge iOS
In this section, we'll specialise in iOS and make a bridge between Swift/Objective C and your React Component. it's these
three steps:
Step 1 - Create a Bulb class and Bridge Header
Step 2 - Understanding GCD Queue and fixing the warning:
Step 3 - Accessing a variable in JavaScript from Swift and Callbacks
Step 1 - Create a Bulb class and Bridge Header
To get started we'll create a Bulb class in swift, which can have a static class variable isOn and a couple of other
functions. then we'll access this swift class from Javascript. Let's start by opening LightApp.xcodeproj in the ios folder. It
should open Xcode together with your ios code.
Once you open the project in Xcode, then create a replacement Swift file Bulb.
We have also clicked on Create Bridging Header which can create a file LightApp-Bridging-Header.h this may help to
speak between Swift and Objective C code. Remember that during a project we've just one Bridge Header file. So if we
add new files, we will reuse this file.
Update following code in LightApp-Bridging-Header.hfile:
#import “React/RCTBridgeModule.h”
RCTBridgeModule will arrange an interface to join a bridge module.
Next update Bulb.swift with the subsequent code: