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

Retired Boards Appdev Tools
,
1

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.

2

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!

3

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

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 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.

5

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

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

7

have you find out solution? Same problem

8

It took me a while to find this:
https://community.shopify.com/topic/2366133
The fullscreen view is now called max-modal and realized differently