Questions and discussions about using the Shopify CLI and Shopify-built libraries.
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!
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
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.
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 ) }