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: Fullscreen in the current app bridge (remix)

Fullscreen in the current app bridge (remix)

ejb1
Shopify Partner
7 1 0

We are building a new app using the remix app template and would like to make some pages full screen.

 

We can see that the previous versions of the app bridge allowed this but the current version doesn't. We've tried the `fullscreen=1` flag in the url, but don't seem to be able to then get out of full screen mode.

 

Is this something that will be added back to app bridge? Is there a way to do it now? 

 

Any help would be very appreciated!

Replies 4 (4)

Liam
Community Manager
3108 344 904

Hi Ejb1,

 

It does seem that Fullscreen was a feature of previous App Bridge versions, but it has been since removed, I'll connect with that team to see if there's a plan to support it in newer versions. 

 

Hope this helps,

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

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.

devmeow1510
Shopify Partner
2 0 2

Hey @ejb1 , if you read the guidelines carefully, you can see it's not `fullscreen=1` in the url
it should be `fullscreen=true`
https://shopify.dev/docs/apps/design-guidelines/app-structure#behavior
To implement it, just simply use the hook `useSearchParams` and `useEffect`

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
  )
}