08.10.2020 Views

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

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.

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.

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Not all functions are exposed to Javascript explicitly, to show a function to JavaScript a Java method must be annotated

using @ReactMethod. The return sort of bridge method is usually void.

We have also created a getStatus function which has params as callback and it returns a callback and passes the worth

of static variable isOn.

Next step is to register the module, if a module isn't registered it'll not be available from JavaScript. Create a file by

clicking on Menu File -> New -> Java Class and therefore the filename as BulbPackage then click OK. then add following

code to

package com.bridgeapp;

Import com.facebook.react.bridge.Callback;

Import com.facebook.react.bridge.ReactApplicationContext;

Import com.facebook.react.bridge.ReactContextBaseJavaModule;

Import com.facebook.react.bridge.ReactMethod;

class Bulb extends ReactContextBaseJavaModule {

Private static Boolean inOn = false;

Public Bulb (ReactApplicationContext reactContext) {

Super (reactContext);

}

@ReactMethod

Public void getStatus (

Callback successCallback){

successCallback.invoke ( null,isOn);

}

@ReactMethod

Public void turnOn (){

isOn = true ;

system.out.println(“Bulb is turn On ”);

}

@ ReactMethod

Public void turnOff (){

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!