# 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="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-3fdc472707edf0acec36b8387719d26863bcc234%2Fimage.png?alt=media" 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="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-f67edad4e1820e79599e3698c9aeb555f4259357%2Fimage.png?alt=media" 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="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-c8465ae905423367fa6695bc235650923cd09acf%2Fimage.png?alt=media" 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="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-87cbd6bef7f600503c8a3c9323d0bf5503636c41%2Fimage.png?alt=media" 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="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-4809f4cb622fe026a53e390a97f779239869baf3%2Fimage.png?alt=media" 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="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-858f41dd13b5d8da416547efd20d643c7f9dcd4c%2Fimage.png?alt=media" 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!