{"record":{"id":"b044d0fc61aade48","repo":"necolas/react-native-web","slug":"onlayout-relies-on-resizeobserver-which-is-not-sup","errorCode":null,"errorMessage":"onLayout relies on ResizeObserver which is not supported by your browser. Please include a polyfill, e.g., https://github.com/que-etc/resize-observer-polyfill.","messagePattern":"onLayout relies on ResizeObserver which is not supported by your browser\\. Please include a polyfill, e\\.g\\., https://github\\.com/que-etc/resize-observer-polyfill\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-native-web/src/modules/useElementLayout/index.js","lineNumber":55,"sourceCode":"                },\n                timeStamp: Date.now()\n              };\n              Object.defineProperty(event.nativeEvent, 'target', {\n                enumerable: true,\n                get: () => entry.target\n              });\n              onLayout(event);\n            });\n          }\n        });\n      });\n    }\n  } else if (!didWarn) {\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'test'\n    ) {\n      console.warn(\n        'onLayout relies on ResizeObserver which is not supported by your browser. ' +\n          'Please include a polyfill, e.g., https://github.com/que-etc/resize-observer-polyfill.'\n      );\n      didWarn = true;\n    }\n  }\n  return resizeObserver;\n}\n\nexport default function useElementLayout(\n  ref: ElementRef<any>,\n  onLayout?: ?(e: LayoutEvent) => void\n) {\n  const observer = getResizeObserver();\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/necolas/react-native-web/blob/a9de220ba9e65bdea540fb5322ffb1da2b0bf442/packages/react-native-web/src/modules/useElementLayout/index.js#L37-L73","documentation":"useElementLayout implements onLayout using the browser's ResizeObserver API. If ResizeObserver is undefined (very old browsers), the hook warns once (dev builds only) that layout events won't fire unless a polyfill is installed. It is a capability warning, not a crash.","triggerScenarios":"Rendering any component using onLayout in a browser lacking window.ResizeObserver, in a NODE_ENV that isn't production or test.","commonSituations":"Supporting legacy browsers (old Safari/IE11-era WebView); server-side rendering or environments without ResizeObserver; embedded WebViews with outdated engines.","solutions":["Install and import a ResizeObserver polyfill (e.g. resize-observer-polyfill) at app entry before rendering.","Modernize the target browsers or drop onLayout usage where unsupported.","Only import the polyfill conditionally if ResizeObserver is undefined to avoid bundle bloat."],"exampleFix":"// before\nimport React from 'react';\n// after\nimport 'resize-observer-polyfill/dist/ResizeObserver.global';\nimport React from 'react';","handlingStrategy":"fallback","validationCode":"if (typeof window !== 'undefined' && typeof window.ResizeObserver === 'undefined') {\n  require('resize-observer-polyfill');\n}","typeGuard":"const supportsResizeObserver = () => typeof window !== 'undefined' && typeof window.ResizeObserver === 'function';","tryCatchPattern":"if (!supportsResizeObserver()) { import('resize-observer-polyfill').catch(() => disableOnLayoutFeatures()); }","preventionTips":["Detect ResizeObserver support at startup and polyfill before first render","Test onLayout features in your oldest supported browser","Provide a layout fallback (fixed sizes / CSS media queries) when onLayout can't fire"],"tags":["react-native-web","onlayout","browser-support","polyfill"],"backgroundTag":"missing-browser-api","analyzedSha":"a9de220ba9e65bdea540fb5322ffb1da2b0bf442","analyzedAt":"2026-09-01T10:01:09.883Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T15:18:49.778Z"}