Issue with "@gadgetinc/react-shopify-app-bridge"
@gadgetinc/react-shopify-app-bridge handles the main App Bridge initialization
We are not using the v4 script tag approach - instead using React providers
I’m seeing odd sizing issues with "@shopify/app-bridge-react".
If I open a small modal first, then a large modal, the large one initially renders small and only resizes after content loads.
If I open a large modal first, then a small modal, the small one stays large.
Expected:
Each modal should respect its variant (small or large) independently, without inheriting the last size.
Repro code (simplified):
2 Replies
FYI, We can see that both the models are having same div ids, is this an expected behavior? Or this maybe the cause of the issue of why its retaining the height of the previous modal?
Both modals are rendered with the following ids
small modal:
<div id="ddef59c6-1a05-40dc-84ad-2bc006623284" style="max-height: 100vh; display: flex; position: relative; height: 400px; transition: height 0.2s ease-in-out;"><iframe name="frame://realityshop-test/modal/8ee943db-ccb7-49c8-ab7f-44c5f8232f87" title="realityshop-test" ...
large modal:
<div id="ddef59c6-1a05-40dc-84ad-2bc006623284" style="max-height: 100vh; display: flex; position: relative; height: 400px; transition: height 0.2s ease-in-out;"><iframe name="frame://realityshop-test/modal/8ee943db-ccb7-49c8-ab7f-44c5f8232f87" title="realityshop-test" ...
But 1 modal is of max variant and other is of small
Everything works as expected
small modal:
<div id="947ca469-1a77-4dbc-8fca-0eb26794067a" style="max-height: 100vh; display: flex; position: relative; height: 80px; transition: height 0.2s ease-in-out; flex: 1 1 0%;"><iframe name="frame://realityshop-test/modal/3a45d482-5d62-4571-8ae8-6ff8c909c613" title="realityshop-test"
max modal:
<div id="d7b70b48-2a4e-4a6a-973d-1643d1e544c5" style="max-height: 100vh; display: flex; position: relative; height: 80px; transition: height 0.2s ease-in-out;"><iframe name="frame://realityshop-test/modal/3986b8fe-e6e2-474c-87c1-4d3f2905f838" title="realityshop-test"
Hello,
The
@gadgetinc/react-shopify-app-bridge component doesn't handle anything in regards to the UI; it is only in charge of authentication and session token handling. I would suggest that you bring up the issue with Shopify/Polaris.