How to Create Bridge in React Native for iOS and Android?

More documents

Recommendations

Info

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 JavaScriptcode. 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 bridgebetween the language and JavaScript code, which suggests we will reuse all the reusable libraries created in the iOS andAndroid world.To create a production grade application at some point of your time you would like to use Native Bridge. There are onlya few articles and tutorials on cross-platform React Native bridge which works on both iOS and Android. During thisarticle, we'll create a Native Bridge to access Swift and Java class from JavaScript.Create the LightAppTo better understand Native Modules we'll create an easy LightApp example using react-native CLI.$ react-native init LightApp$ cd LightAppNext, we'll create a category Bulb in Swift for iOS and Java for Android, and this may be utilized in this app during aReact component. This may be a cross-platform example and therefore the same React code will add both iOS andAndroid.As we've created a basic skeleton of the project, next we've divided this text into two sections:Section 1 — Native Bridge in iOSSection 2 — Native Bridge in AndroidSection 1 — Native Bridge iOSIn this section, we'll specialise in iOS and make a bridge between Swift/Objective C and your React Component. it's thesethree steps:Step 1 - Create a Bulb class and Bridge HeaderStep 2 - Understanding GCD Queue and fixing the warning:Step 3 - Accessing a variable in JavaScript from Swift and CallbacksStep 1 - Create a Bulb class and Bridge HeaderTo get started we'll create a Bulb class in swift, which can have a static class variable isOn and a couple of otherfunctions. then we'll access this swift class from Javascript. Let's start by opening LightApp.xcodeproj in the ios folder. Itshould 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 tospeak between Swift and Objective C code. Remember that during a project we've just one Bridge Header file. So if weadd 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:Import Foundation@objc(Bulb)Class Bulb : NSObject {@objcStatic var isOn = false@objcFunc turnOn(){Bulb.isOn = truePrint (“Bulb is now ON”)}}We have created a Bulb class which is inherited from NSObject. The base class of most Objective-C class ranking isNSObject, from which subclasses acquire a basic interface to the runtime system and therefore the capability to behaveas Objective-C objects. we will see that we've used @objc before a function and sophistication , this may make that class,function or object available to Objective CReact Native won't expose any function of Bulb to React JavaScript unless explicitly done. to try to do so we've usedRCT_EXPORT_METHOD() macro. So we've exposed the Bulb class and turnOn function to our Javascript code. Since Swiftobject is converted to Javascript object, there's a kind of conversation. RCT_EXPORT_METHOD supports all standardJSON object types:NSString to stringNSInteger, float, double, CGFloat, NSNumber to numberBOOL to booleanNSArray to arrayNSDictionary to object with string keys and values of any type from this listRCTResponseSenderBlock to functionNow let’s modernize JavaScript code and approach this Bulb class from our React component. to try to to so open App.jsand update with the subsequent code:
Page 4 and 5: Export default class App extends Co
Page 6 and 7: @objcFunc getStatus(_ callback : RC
Page 8 and 9: Public class Bulb extends ReactCont
Page 10: isOn = false;system.out.println(“

How to Create Bridge in React Native for iOS and Android?

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?