# React Native

## React Native and the Link11 WAAP 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](/mobile-sdk-v2.3.0/developer-guide-sdk-v2.3.0.md). 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>

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

2. Install the new pods:<br>

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://waap.docs.link11.com/mobile-sdk-v2.3.0/react-native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.