---
title: "React Native using Expo"
section: "Libraries: Web"
route: /reactnativeexpo
account: {accountId}
bruce_api: https://{accountId}.api.nextspace.host
guardian_api: https://guardian.nextspace.host
---
# React Native using Expo

We don't develop using React Native but we've made an example to help you get started. React Native does not support CesiumJS so we've opted to use an IFrame for the example.

We recommend looking through our Web Library examples that focus on API communication and authentication rather than rendering data as that is the same for React Native.

## Starter kit

To save some setup explanation we've created a starter kit for you to use.

[Download starter kit](/res/samples/web-react-native-expo-example.zip)

Once you've downloaded and extracted the ZIP, run the following commands to start it up.

```bash
npm i
npx expo start
```

Please give the initial setup some time. It will take a while to download all the dependencies and prepare the app.

Once started you can download the Expo App on your mobile device and scan the QR code that will be shown in the terminal.

![](/res/expo-react-native/preview.jpg)

The example will showcase a basic connection to the Nextspace API, and render an IFrame of a Project View.

Within the "App.tsx" file you can edit the parameters to change the initial view to match your own account and data.

```typescript
ENVIRONMENT.PARAMS = {
    ...ENVIRONMENT.PARAMS,

    // Replace with your accountId, found in your account url.
    // Eg: "https://my-account-id.nextspace.host" would mean "my-account-id" is your ID.
    // The ZIP example will be pointed at a test account.
    accountId: "<REPLACE_ME>",

    // Replace with UAT or PROD for client data.
    // DEV is for Nextspace only data.
    // The ZIP example will be set to DEV until you change it!
    env: Api.EEnv.DEV,

    // Required if your Project View is restricted.
    sessionId: ""
};

/**
 * Warning: This will not include information on Project Views that weren't accessible due to permissions.
 */
ProjectView.GetList({}).then((data) => {
    // You can use a request like this to drive the IFrame URL and load one of your Project Views.
    const views = data.views;
    if (views.length) {
        setText("Project views: " + views.map(x => x.Name).join(", "));
    }
    else {
        setText("No project views found.");
    }
}).catch((e) => {
    console.error(e);
    setText("Failed to load project views.");
});
```

```typescript
// Replace the Iframe URL with adjusted parameters.
// Check the embed documentation site here: https://embed.nextspace-dev.net/
<WebView
    source={{ uri: 'https://embed.nextspace-dev.net/embed?id=navigator&accountId=matvey&viewId=ed84f179-41f0-4204-9eb1-12926f3821a1&env=DEV' }}
    style={styles.webview}
/>
```

---

Urls on this page are resolved for account `{accountId}`.
Site index: https://docs.nextspace.host/llms.txt · whole site in one file: https://docs.nextspace.host/llms-full.txt
Human-readable version of this page: https://docs.nextspace.host/reactnativeexpo