# React Native

## React Native Reblaze SDK <a href="#react-native-reblaze-sdk" id="react-native-reblaze-sdk"></a>

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.

{% hint style="info" %}
These instructions assume that you have already read the [Developer Guide](https://waap.docs.link11.com/mobile-sdk-v2.2.x/developer-guide-sdk-v2.2.x). If you have not yet done so, please do so before continuing below.
{% endhint %}

## Getting started <a href="#getting-started" id="getting-started"></a>

### **iOS**

#### **Using CocoaPods**

1. Add the following lines to your target in `Podfile`:<br>

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

2. Install the new pods:<br>

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

   ```
   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 <a href="#usage" id="usage"></a>

### **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;
```