[RNMobile] Create cross platform useResizeObserver() hook

packages/block-library/src/embed/test/__snapshots__/index.js.snap

@@ -2,16 +2,8 @@
 
 exports[`core/embed block edit matches snapshot 1`] = `
 <div
-  class="components-placeholder wp-block-embed"
+  class="components-placeholder wp-block-embed is-large"
 >
-  <iframe
-    aria-hidden="true"
-    aria-label="resize-listener"
-    frameborder="0"
-    src="about:blank"
-    style="display:block;opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1"
-    tabindex="-1"
-  />
   <div
     class="components-placeholder__label"
   >

packages/components/package.json

@@ -52,7 +52,6 @@
 		"moment": "^2.22.1",
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
-		"react-resize-aware": "^3.0.0",
 		"react-spring": "^8.0.20",
 		"reakit": "^1.0.0-beta.12",
 		"rememo": "^3.0.0",

packages/components/src/placeholder/index.js

@@ -2,7 +2,11 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import useResizeAware from 'react-resize-aware';
+
+/**
+ * WordPress dependencies
+ */
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,9 +30,9 @@ function Placeholder( {
 	isColumnLayout,
 	...additionalProps
 } ) {
-	const [ resizeListener, { width } ] = useResizeAware();
+	const [ resizeListener, { width } ] = useResizeObserver();
 
-	// Since `useResizeAware` will report a width of `null` until after the
+	// Since `useResizeObserver` will report a width of `null` until after the
 	// first render, avoid applying any modifier classes until width is known.
 	let modifierClassNames;
 	if ( typeof width === 'number' ) {

packages/components/src/placeholder/test/index.js

@@ -2,23 +2,24 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { more } from '@wordpress/icons';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import Placeholder from '../';
 
-jest.mock( 'react-resize-aware' );
-
 describe( 'Placeholder', () => {
 	beforeEach( () => {
-		useResizeAware.mockReturnValue( [ <div key="1" />, { width: 320 } ] );
+		useResizeObserver.mockReturnValue( [
+			<div key="1" />,
+			{ width: 320 },
+		] );
 	} );
 
 	describe( 'basic rendering', () => {
@@ -109,8 +110,8 @@ describe( 'Placeholder', () => {
 	} );
 
 	describe( 'resize aware', () => {
-		it( 'should not assign modifier class in first-pass `null` width from `useResizeAware`', () => {
-			useResizeAware.mockReturnValue( [
+		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
+			useResizeObserver.mockReturnValue( [
 				<div key="1" />,
 				{ width: 320 },
 			] );
@@ -123,7 +124,7 @@ describe( 'Placeholder', () => {
 		} );
 
 		it( 'should assign modifier class', () => {
-			useResizeAware.mockReturnValue( [
+			useResizeObserver.mockReturnValue( [
 				<div key="1" />,
 				{ width: null },
 			] );

packages/compose/README.md

@@ -157,6 +157,30 @@ _Returns_
 
 -   `boolean`: Reduced motion preference value.
 
+<a name="useResizeObserver" href="#useResizeObserver">#</a> **useResizeObserver**
+
+Hook which allows to listen the resize event of any target element when it changes sizes.
+_Note: `useResizeObserver` will report `null` until after first render_
+
+_Usage_
+
+```js
+const App = () => {
+	const [ resizeListener, sizes ] = useResizeObserver();
+
+	return (
+		<div>
+			{ resizeListener }
+			Your content here
+		</div>
+	);
+};
+```
+
+_Returns_
+
+-   `?Object`: Measurements object with properties `width` and `height`.
+
 <a name="useViewportMatch" href="#useViewportMatch">#</a> **useViewportMatch**
 
 Returns true if the viewport matches the given query, or false otherwise.

packages/compose/package.json

@@ -27,7 +27,8 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"lodash": "^4.17.15",
-		"mousetrap": "^1.6.2"
+		"mousetrap": "^1.6.2",
+		"react-resize-aware": "^3.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/compose/src/hooks/use-resize-observer/index.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import useResizeAware from 'react-resize-aware';
+
+/**
+ * Hook which allows to listen the resize event of any target element when it changes sizes.
+ * _Note: `useResizeObserver` will report `null` until after first render_
+ *
+ * @return {?Object} Measurements object with properties `width` and `height`.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<div>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ *
+ */
+const useResizeObserver = () => {
+	const [ resizeListener, sizes ] = useResizeAware();
+
+	return [ resizeListener, sizes ];
+};
+
+export default useResizeObserver;

packages/compose/src/hooks/use-resize-observer/index.native.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { View, StyleSheet } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Hook which allows to listen the resize event of any target element when it changes sizes.
+ *
+ * @return {Object} Measurements object with properties `width` and `height`.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<View>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</View>
+ * 	);
+ * };
+ * ```
+ *
+ */
+const useResizeObserver = () => {
+	const [ measurements, setMeasurements ] = useState( null );
+
+	const onLayout = useCallback( ( { nativeEvent } ) => {
+		const { width, height } = nativeEvent.layout;
+		setMeasurements( ( prevState ) => {
+			if (
+				! prevState ||
+				prevState.width !== width ||
+				prevState.height !== height
+			) {
+				return { width, height };
+			}
+			return prevState;
+		} );
+	}, [] );
+
+	return [
+		// `key` is needless in that place since we are not rendering an array of elements
+		// eslint-disable-next-line react/jsx-key
+		<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />,
+		measurements,
+	];
+};
+
+export default useResizeObserver;

packages/compose/src/hooks/use-resize-observer/test/index.native.js

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { create, act } from 'react-test-renderer';
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import useResizeObserver from '../';
+
+const TestComponent = ( { onLayout } ) => {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+
+	return (
+		<View sizes={ sizes } onLayout={ onLayout }>
+			{ resizeObserver }
+		</View>
+	);
+};
+
+const renderWithOnLayout = ( component ) => {
+	const testComponent = create( component );
+
+	const mockNativeEvent = {
+		nativeEvent: {
+			layout: {
+				width: 300,
+				height: 500,
+			},
+		},
+	};
+
+	act( () => {
+		testComponent.toJSON().children[ 0 ].props.onLayout( mockNativeEvent );
+	} );
+
+	return testComponent.toJSON();
+};
+
+describe( 'useResizeObserver()', () => {
+	it( 'should return "{ width: 300, height: 500 }"', () => {
+		const component = renderWithOnLayout( <TestComponent /> );
+
+		expect( component.props.sizes ).toMatchObject( {
+			width: 300,
+			height: 500,
+		} );
+	} );
+} );

packages/compose/src/index.js

@@ -19,3 +19,4 @@ export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';
 export { default as useMediaQuery } from './hooks/use-media-query';
 export { default as useReducedMotion } from './hooks/use-reduced-motion';
 export { default as useViewportMatch } from './hooks/use-viewport-match';
+export { default as useResizeObserver } from './hooks/use-resize-observer';

packages/compose/src/index.native.js

@@ -6,3 +6,4 @@ export { default as withPreferredColorScheme } from './higher-order/with-preferr
 
 // Hooks
 export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
+export { default as useResizeObserver } from './hooks/use-resize-observer';

storybook/test/__snapshots__/index.js.snap

@@ -4311,29 +4311,8 @@ exports[`Storyshots Components/Panel With Icon 1`] = `
 
 exports[`Storyshots Components/Placeholder Default 1`] = `
 <div
-  className="components-placeholder"
+  className="components-placeholder is-large"
 >
-  <iframe
-    aria-hidden={true}
-    aria-label="resize-listener"
-    frameBorder={0}
-    src="about:blank"
-    style={
-      Object {
-        "display": "block",
-        "height": "100%",
-        "left": 0,
-        "opacity": 0,
-        "overflow": "hidden",
-        "pointerEvents": "none",
-        "position": "absolute",
-        "top": 0,
-        "width": "100%",
-        "zIndex": -1,
-      }
-    }
-    tabIndex={-1}
-  />
   <div
     className="components-placeholder__label"
   >

test/unit/config/global-mocks.js

@@ -1,6 +1,11 @@
 jest.mock( '@wordpress/compose', () => {
+	const App = () => null;
 	return {
 		...jest.requireActual( '@wordpress/compose' ),
 		useViewportMatch: jest.fn(),
+		useResizeObserver: jest.fn( () => [
+			<App key={ 'mock-key' } />,
+			{ width: 700, height: 500 },
+		] ),
 	};
 } );