Link11 WAAP
Mobile SDK v2.2.x
Mobile SDK v2.2.x
  • Developer Guide: SDK v2.2.x
  • Android
  • iOS
  • Flutter
  • React Native
  • Support
  • Release Notes
  • Page 1
Powered by GitBook
On this page
  • React Native Reblaze SDK
  • Getting started
  • iOS
  • Android
  • Usage
  • Importing the module
  • Setting properties
  • Getting properties
  • Sending events
  • Listening to events

Was this helpful?

Export as PDF

React Native

PreviousFlutterNextSupport

Last updated 4 months ago

Was this helpful?

React Native Reblaze 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 . 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 => '<path_to_mobilesdk>/libs/iO pod 'RNReblazeReactNativeSdk', :path => '<path_to_mobilesdk>/libs/react-native/iOS/'

  2. Install the new pods:

    ```bash
    pod install

  3. Open your application's .xcworkspace file

Manually

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

reblaze.setBackendUrl("mock://localhost");

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;

Follow the official instructions to manually link libraries:

Developer Guide
https://reactnative.dev/docs/linking-libraries-ios#manual-linking