Questions and discussions about using the Shopify CLI and Shopify-built libraries.
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.
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!
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>
)
}
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.
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 ) }
Getting into fullscreen mode works this way, but how to you get out? Removing the "fullscreen" search param in the same way does nothing...
have you find out solution? Same problem
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