App Bridge Utility Question

HunkyBill
Shopify Expert
4374 36 468

I am using the App Bridge Utility to set modal size. It works perfect, but only on second click of the content, not the first. So the Modal content loads this component. And when I click the thumbnail a second time and re-open the Modal, it looks perfect! But only on a second click. Why is that? The function I am using is: setupModalAutoSizing

The other huge problem with this Polaris component, is if you are scrolled down the screen, looking at resource 49 of 50 say, and you click for the modal, the whole screen shifts right back up to the top, thus losing your place? Why is that? What can I do to prevent a Modal open/close from RE-RENDERING the whole layout?

The code to open the Modal is:

const handleClick = useCallback((imageSrc) => {
    const modalOptions = {
      title: 'Zoomer Collection',
      path: `/media?url=${imageSrc}`
    }
    const myModal = Modal.create(appBridge, modalOptions);
    myModal.dispatch(Modal.Action.OPEN);
  })

The Modal content itself, which runs the resizer is:

import React, {
  useContext,
} from "react"
var qs = require('qs')
import {
  Page,
} from '@shopify/polaris'
import { setupModalAutoSizing } from '@shopify/app-bridge-utils';
import { Context } from '@shopify/app-bridge-react';
export default function Media(props) {
  const appBridge = useContext(Context)
  setupModalAutoSizing(appBridge)
  const url = qs.parse(props.location.search, { ignoreQueryPrefix: true }).url
  return (
    <Page fullwidth>
      <img src={url} alt="Zoomer Collection" />
    </Page>
  )
}

But the disappointing result on first click is:

 

image

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes