Fullscreen in the current app bridge (remix)

Retired Boards Appdev Tools
1

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!

2

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,

3

Try this: https://community.shopify.com/c/shopify-cli-and-tools/how-to-use-fullscreen-mode-for-apps-with-the-new-remix-template/m-p/2282347/highlight/true#M4018

4

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

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.