React-native-web: How to properly include ResizeObserver polyfill

[vladp]

This is a documentation enhancement request

Getting
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. Falling back to window.onresize
warning in Firefox and Edge browsers.

The documentation clearly states to include a polyfill for ResizeObserver function.
However, I could not find any hints on how to include the polyfill.

Simply doing
npm install resize-observer-polyfill --save

and then,

//import ResizeObserver from 'resize-observer-polyfill';
import 'resize-observer-polyfill/dist/ResizeObserver.global'

Does not eliminate the warning message on Firefox or Edge.
I do not have any of my own code that relies on onLayout properties.

[appden]

@vladp The polyfill need to be imported _before_ you ever import from react-native-web.

[necolas]

Yes, import polyfills first in your boot file

[vladp]

perfect. it worked. thank you.
Imported it right in App.js (as my app is generated by create-create-react-app, and it is in App.js I am importing react-native web the first time).

[jacobmischka]

It seems the global polyfill is deprecated and will be removed, are there migration plans for when that happens?

Edit: Ah nevermind, I guess that's been that way for a long time now, so probably not a very pressing issue.

[valentinewallace]

I've tried importing the polyfill in App.js and index.js and still getting the warning :( @necolas?

[vladp]

@valentinewallace
Check if you are importing the polyfill before any React-native-web imports

//IMPORTANT THIS POLYFILL MUST BE INCLUDED BEFORE any RNW (react-native) imports
import 'resize-observer-polyfill/dist/ResizeObserver.global'

[yairopro]

Hi @jacobmischka
Using therequire() function instead of the ES6 import, you can set globally the polyfill module in your index.js like bellow:
`````
import React from 'react';
import ReactDOM from 'react-dom';
import ResizeObserver from "resize-observer-polyfill"

window.ResizeObserver = ResizeObserver; // set the observer globally before importing app

const App = require('./src/main/App').default; // import the App which imports RN-web
ReactDOM.render(React.createElement(App), document.body);
`````