React Native

React Native and the Link11 WAAP SDK

The SDK can be used with React Native applications. This SDK comes with an example app which demonstrates such integration. You can use the code of the example to integrate the SDK in your ReactNative project.

These instructions assume that you have already read the Developer Guide. If you have not yet done so, please do so before continuing below.

Getting started

iOS

Using CocoaPods

1. Add the following lines to your target in Podfile:

   pod 'Reblaze', :path => '../../../../libs/iOS/'
   pod 'RNReblazeReactNativeSdk', :path => '../../../../libs/react-native/iOS/'

2. Install the new pods:

   pod install

3. Open your application's .xcworkspace file

Manually

Follow the official instructions to manually link libraries: https://reactnative.dev/docs/linking-libraries-ios#manual-linking

Android

Manually

1. Add the following lines to android/build.gradle:

   allprojects {
       repositories {
           maven { url "file:${rootDir.path}/<path_to_mobilesdk>/libs/android" }
       }
   }

2. Add the following lines to android/settings.gradle:

   include ':reblaze-react-native-sdk'
   project(':reblaze-react-native-sdk').projectDir = new File(
     rootProject.projectDir,
     '<path_to_mobilesdk>./libs/react-native/Android'
   )

3. Add the following lines inside the dependencies block of android/app/build.gradle:

   implementation project(":reblaze-react-native-sdk")

4. Add the following lines to your application's MainApplication.java:

   • In the imports at the top of the file:

     import com.reblaze.react.RNReblazeReactNativeSdkPackage;

   • In the getPackages method:

     packages.add(new RNReblazeReactNativeSdkPackage());

Usage

Importing the module

import {NativeModules} from "react-native";
const {reblaze} = NativeModules;

Setting properties

const [backendUrl, setBackendUrl] = useState<string>("https://example.com");

// set backend url as a root domain of your API url. E.g. "https://example.com"
reblaze.setBackendUrl(backendUrl);

Getting properties

reblaze.getBackendUrl((backendUrl: string) => {
  console.log(`Backend url: ${url}`);
});

Sending events

reblaze.sendEvent("ButtonClick");

Listening to events

import {useEffect} from "react";
import {NativeEventEmitter} from "react-native";

// [...]

function App(): JSX.Element {
  type ReblazeEvent = {
    kind: Number;
    message: String;
  };
  
  function eventKindToString(kind: Number): string {
    switch (kind) {
      case reblaze.KindVerbose:
        return "VERBOSE";
      case reblaze.KindDebug:
        return "DEBUG";
      case reblaze.KindInfo:
        return "INFO";
      case reblaze.KindWarn:
        return "WARN";
      case reblaze.KindError:
        return "ERROR";
      default:
        return "UNKNOWN";
    }
  }
  
  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(reblaze);
    let eventListener = eventEmitter.addListener(reblaze.EVENT_NAME, ({kind, message}: ReblazeEvent) => {
      console.log(`[${eventKindToString(king)}] {message}`);
    });
  
    return () => {
      eventListener.remove();
    };
  }, []);

  return (
    // [...]
  );
}

export default App;