---
title: Migrate FullscreenBar from Polaris React
description: Learn how to migrate Polaris React FullscreenBar to Polaris web components.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/fullscreen-bar
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/fullscreen-bar.md
api_name: app-home
---

# Migrate Fullscreen​Bar from Polaris React

Use `s-app-window` only for a dedicated workflow that needs an app-owned window. Keep ordinary routes in the embedded app page shell.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `FullscreenBar` | [`s-app-window`](https://shopify.dev/docs/api/app-home/app-bridge-web-components/app-window) for a dedicated fullscreen workflow | App Bridge |

***

## Map fullscreen workflow responsibilities

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `children` | Complete workflow in `s-app-window` | Move the workflow, not only its header, into the app window. |
| Back or close action | App-window close command plus router state | Return to a defined embedded route and clean up temporary state. |
| `accessibilityLabel` | Visible window heading and labelled close action | Keep the workflow purpose and exit clear to assistive technology. |

***

## Migrate the call site

1. Identify the host-level behavior currently implemented by `FullscreenBar` inside the iframe.

2. Move that behavior to the linked App Bridge component or API and connect it to the app router or workflow state.

3. Verify setup, updates, cleanup, and route transitions inside Shopify admin.

4. After verification, remove the `FullscreenBar` import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

***

## Preserve these behaviors

* Synchronization between the iframe route or workflow and Shopify admin.
* Visibility, lifecycle cleanup, and callback outcomes.
* Keyboard, focus, and navigation behavior as the host UI state changes.

***

## Test and remove Polaris React

Test the migrated `FullscreenBar` behavior inside Shopify admin. Verify initial setup, updates, route and browser navigation, callbacks, and cleanup when the owning route unmounts.

Don't remove `@shopify/polaris` while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

***

## Migration example

## Migrating FullscreenBar

##### Polaris web components

```tsx
export function FullscreenBarMigrationExample() {
  return (
    <><s-app-window id="product-editor" src="/app/products/edit"></s-app-window></>
  );
}
```

##### Polaris React

```tsx
import {FullscreenBar, Text} from '@shopify/polaris';


export function FullscreenBarMigrationExample() {

  return (
    <FullscreenBar onBack={() => {}}><Text as="span">Edit product</Text></FullscreenBar>
  );
}
```

`s-app-window` renders in the Shopify admin host, so it can't be shown in this isolated live-preview environment. Test the workflow from your embedded app and verify that the app-owned `src` route opens, closes, and restores the expected route state.

***