necolas/react-native-web · warning

onLayout relies on ResizeObserver which is not supported by

Error message

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.

What it means

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.

Source

Thrown at packages/react-native-web/src/modules/useElementLayout/index.js:55

                },
                timeStamp: Date.now()
              };
              Object.defineProperty(event.nativeEvent, 'target', {
                enumerable: true,
                get: () => entry.target
              });
              onLayout(event);
            });
          }
        });
      });
    }
  } else if (!didWarn) {
    if (
      process.env.NODE_ENV !== 'production' &&
      process.env.NODE_ENV !== 'test'
    ) {
      console.warn(
        '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.'
      );
      didWarn = true;
    }
  }
  return resizeObserver;
}

export default function useElementLayout(
  ref: ElementRef<any>,
  onLayout?: ?(e: LayoutEvent) => void
) {
  const observer = getResizeObserver();

  useLayoutEffect(() => {
    const node = ref.current;
    if (node != null) {

View on GitHub (pinned to a9de220ba9)

Solutions

1. Install and import a ResizeObserver polyfill (e.g. resize-observer-polyfill) at app entry before rendering.
2. Modernize the target browsers or drop onLayout usage where unsupported.
3. Only import the polyfill conditionally if ResizeObserver is undefined to avoid bundle bloat.

Example fix

// before
import React from 'react';
// after
import 'resize-observer-polyfill/dist/ResizeObserver.global';
import React from 'react';

if (typeof window !== 'undefined' && typeof window.ResizeObserver === 'undefined') {
  require('resize-observer-polyfill');
}

const supportsResizeObserver = () => typeof window !== 'undefined' && typeof window.ResizeObserver === 'function';

if (!supportsResizeObserver()) { import('resize-observer-polyfill').catch(() => disableOnLayoutFeatures()); }

When it happens

Trigger: Rendering any component using onLayout in a browser lacking window.ResizeObserver, in a NODE_ENV that isn't production or test.

Common situations: Supporting legacy browsers (old Safari/IE11-era WebView); server-side rendering or environments without ResizeObserver; embedded WebViews with outdated engines.

Related errors

• Image: asset with ID "${source}" could not be found. Please
• The <Image> component cannot contain children. If you want t
• Invalid CSS keyframes type: ${typeof keyframesValue}
• StyleSheet.compose() only accepts 2 arguments, received ${le
• Unrecognized signal `${signal}` or state `${curState}` for T

AI-assisted analysis of necolas/react-native-web@a9de220ba9 (2026-09-01). Data as JSON: /api/errors/b044d0fc61aade48. Report an issue: GitHub.