React Native

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.

Getting started

iOS

Using CocoaPods

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

   Copy

   pod 'Reblaze', :path => '<path_to_mobilesdk>/libs/iO pod 'RNReblazeReactNativeSdk', :path => '<path_to_mobilesdk>/libs/react-native/iOS/'

2. Install the new pods:

   Copy

   ```bash
   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:

   Copy

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

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

   Copy

   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:

   Copy

   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:

     Copy

     import com.reblaze.react.RNReblazeReactNativeSdkPackage;

   • In the getPackages method:

     Copy

     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;