Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: How to use Fullscreen mode for apps with the new Remix template

How to use Fullscreen mode for apps with the new Remix template

Jacin
Shopify Partner
1 0 4

Hello, I'm using the new Remix app template and I can't manage to make the fullscreen mode to work.

In the new docs about App Bridge there is no reference to Fullscreen. The only reference is in a "previous versions" sections and it seems legacy and I can't make it work with remix.

 

 

Replies 7 (7)

turis
Shopify Partner
1 0 1

I have the exact same problem. I tried wrapping the app in the legacy App Bridge but with no luck. If someone from the dev team could help out that would be great!

meecrobe
Shopify Partner
2 0 0

  I solved this as follows (entering fullscreen immediately after page load):

 

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

export default function App() {
  const app = useAppBridge();
  const fullscreen = Fullscreen.create(app);

  useEffect(() => {
    fullscreen.dispatch(Fullscreen.Action.ENTER);
  }, [fullscreen]);

  return (
    <Page>
        <FullScreenBar onAction={noop}/>
    </Page>
  )
}

 

umran
Shopify Partner
1 0 0

This did not work for me. Are you sure you're using the new Remix template?

I get the following error: "Error: No AppBridge context provided. Your component must be wrapped in the <Provider> component from App Bridge
React."

The component I'm trying to render is already a child of the AppProvider component. It seems that for some reason the app context is not being passed down to the useAppBridge effect call.

devmeow1510
Shopify Partner
2 0 2

Following the document of Shopify, you can achieve it by this way:
https://shopify.dev/docs/apps/design-guidelines/app-structure#behavior

import { useSearchParams } from '@remix-run/react'
import { useEffect } from 'react'

function Editor() {
  const [, setSearchParams] = useSearchParams()
  
  useEffect(() => {
    setSearchParams(prevParams => {
      return {
        ...prevParams,
        fullscreen: true
      }
  }, [])
  
  return (
    // your component
  )
}
osmatique
Shopify Partner
2 0 2

Getting into fullscreen mode works this way, but how to you get out? Removing the "fullscreen" search param in the same way does nothing...

dunganh21
Shopify Partner
6 0 1

have you find out solution?  Same problem 

 

m20io
Shopify Partner
12 0 2

It took me a while to find this:
https://community.shopify.com/c/announcements/ux-changes-to-app-bridge-fullscreen-api/td-p/2366133
The fullscreen view is now called max-modal and realized differently