The `Fullscreen` action hides Shopify UI and expands the application iframe to cover the entirety of the browser window. This gives applications the ability to implement complex workflows such as editing workflows, immersive experiences, or previews.

## Guidelines

- Full-screen mode should only be launched after users interact with a button that indicates the entire canvas will be used.
- When in full-screen mode, apps must display the [FullscreenBar](https://polaris.shopify.com/components/navigation/fullscreen-bar) with a back button.
- When exiting, the app should immediately return to the same screen where the user entered full-screen mode. If the user has unsaved changes, the app should display a dialog that prompts users to save their changes before exiting.

Refer to the <a href="/docs/apps/design-guidelines/app-structure#full-screen-mode">design guidelines for full-screen mode</a> for more information.

## Setup

Create an app and import the `Fullscreen` module from `@shopify/app-bridge/actions`. Note that we'll be referring to this sample application throughout the examples below.

> Note
> In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).


```js
import {useAppBridge} from '@shopify/app-bridge-react';
import {Fullscreen} from '@shopify/app-bridge/actions';

const app = useAppBridge();
const fullscreen = Fullscreen.create(app);
```

## Enter full screen

Put the app in full-screen mode with the `ENTER` action.

```js
// Call the `ENTER` action to put the app in full-screen mode
fullscreen.dispatch(Fullscreen.Action.ENTER);
```

## Exit full screen

Take the app out of full-screen mode with the `EXIT` action.

```js
// Call the `EXIT` action to take the app out of full-screen mode
fullscreen.dispatch(Fullscreen.Action.EXIT);
```

## Subscribe to actions

You can subscribe to actions that are dispatched through the full-screen action set,

```js
const unsubscribeEnter = fullscreen.subscribe(Fullscreen.Action.ENTER, () => {
  // Do something when fullscreen is entered
});

const unsubscribeExit = fullscreen.subscribe(Fullscreen.Action.EXIT, () => {
  // Do something when fullscreen is exited
});
```

## Unsubscribe when the component is unloaded

It's important to clean up subscriptions when the subscribed component is unmounted.

```js
useEffect(() => {
  return () => {
    unsubscribeEnter();
    unsubscribeExit();
  }
}, []);
```