> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/rest-api-integration/using-rest-api-in-native-screens.md).

# Using REST API in Native Screens

#### Step 1: Select a Native Screen Element

1. Go to **Screens** in the Twinr Builder
2. Open any screen (e.g., Home, Shop)
3. Select a supported element such as:
   * Product List
   * List
   * Banner etc.

***

#### Step 2: Choose Data Source

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F5d9miymc3HR3SxZW6LeT%2FScreenshot%202026-01-27%20at%202.25.08%E2%80%AFPM.png?alt=media&amp;token=546fcc9c-5799-45de-b17a-b82da4d84c9c" alt="" width="285"><figcaption></figcaption></figure>

1. In the element’s **Content** panel, locate **Data Source**
2. Select **API** (instead of Static)
3. Choose the required API from the **API Call** dropdown

#### Step 3: Configure API Response Mapping

![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F3xLWgPmvbTpSSVlBWIik%2FScreenshot%202026-01-27%20at%202.27.01%E2%80%AFPM.png?alt=media\&token=4c1c1aa6-fa4c-4188-a717-b2c87056848c). ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FWZutH1VuNiPgYGNOzrhQ%2FScreenshot%202026-01-27%20at%202.29.19%E2%80%AFPM.png?alt=media\&token=2b5e0200-a3b3-4905-89c8-113a1bb06f1d)

1. Click **Configure API Response**
2. The configuration dialog opens with:
   * **Response Preview** (live API data)
   * **Response Mapping** options
3. Map API response fields to UI properties, such as:
   * Image URL
   * Title
   * Description
   * Background color (optional)
4. Provide a **Default Image URL** to handle missing images
5. Click **Save**

> Once mapping is completed, the element is automatically populated with API data.

***

#### Step 4: Preview and Publish

* The mapped data appears instantly in the **Preview**
* The same data is rendered on **mobile devices**
* Any future API updates reflect automatically without manual changes