# React Native

You can directly embed an MSquared streaming client into a WebView in your own React Native app. You can see the required configuration in our example app and, by following the guide below, you can test the end-to-end flow!

{% embed url="<https://www.youtube.com/watch?v=07oeaXPPoVU>" %}

## Downloading and Setting Up the Project

### Download our Example Project

Navigate to our public github repository here:

[https://github.com/msquared-io/msquared-react-native-webview](https://github.com/msquared-io/msquared-react-native-webview/tree/main)

This contains all the code you need to run an example mobile application using Expo Go.

The example will connect you to one of our public-facing persistent worlds that is open to all users, and gives you an example of what joining an experience via the WebView looks like.

<figure><img src="/files/1onT9YTYafrztV96Lu4d" alt=""><figcaption></figcaption></figure>

Download and extract a copy of this project into a directory of your choosing.

Also ensure you download [Expo Go](https://expo.dev/go) onto your device:

**For Native Devices**

* You should be able to find the `Expo Go` app in the relevant app store for your device. Simply download and install. The app should look like the below:

<figure><img src="/files/6KmXfLZE3eFizWHq9LOL" alt="" width="151"><figcaption></figcaption></figure>

**For Emulators:**

* Download the relevant emulator. E.g. for Android, you can download the latest version of Android Studio, and spin up their default "Medium Phone" virtual device.

<figure><img src="/files/rlWqXSAs5BFirOVuw53N" alt=""><figcaption></figcaption></figure>

* Download Expo Go for emulators via the link above. You should find a file named `Exponent-[version #].apk` .
* Drag the `.apk` file onto your virtual device to install app on the emulator

<figure><img src="/files/sPm9TpCeOUsQtOJhZoVG" alt=""><figcaption></figcaption></figure>

### Installing project packages

**Once your device OR emulator is set up:**

Navigate to the project directory in your terminal, and run: `npm i` . If successful, you should see output in your terminal that looks something like this (this command may find vulnerabilities; this can be safely ignored in most cases, but you are free to address these issues in your project should you wish):

<figure><img src="/files/rw7959Jkyj2bcwE0fuJl" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Ensure you have **NodeJS** installed before attempting to run `npm i`, otherwise this command will fail
{% endhint %}

### Starting Up the Project on your Device

Once you've installed all the relevant packages, and Expo Go is is up and running on your device/emulator, in your project repo execute:

* `npx expo start`

If this command does not work on your native device (e.g. your android phone), execute a different command in your terminal from your project directory:

* `npx expo start --tunnel` - this will allow your device to connect to your development project.

This may require you to install an additional package: `The package @expo/ngrok@^4.1.0 is required to use tunnels, would you like to install it globally?`

* Simply enter 'y' to accept and install.

You can now either scan the QR code, or copy and paste the relevant exp\:// url from the logs into the expo app. This should load an example landing page, from which you can enter our example MSquared world.

<figure><img src="/files/pvzcvjPKUQP5NZJPzBD8" alt=""><figcaption><p>Example of what you should see in your terminal after running the start command</p></figcaption></figure>

If successful, you should see the experience run in your device/emulator as shown in the example at the top of this page!


---

# 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://docs.otherside.xyz/platform-documentation/creation/running-events/player-entry/embedding-client-in-mobile-app.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.