[RNMobile] Create cross platform useResizeObserver() hook

packages/compose/src/hooks/use-container-match/compare-widths.js

@@ -0,0 +1,21 @@
+export default function compareWidths( operator, queryWidth, containerWidth ) {
+	switch ( operator ) {
+		case '<':
+			return containerWidth < queryWidth;
+		case '<=':
+			return containerWidth <= queryWidth;
+		case '===' :
+		case '==' :
+		case '=' :
+			return containerWidth === queryWidth;
+		case '!==' :
+		case '!=' :
+			return containerWidth !== queryWidth;
+		case '>' :
+			return containerWidth > queryWidth;
+		case '>=':
+			return containerWidth >= queryWidth;
+		default:
+			throw new Error( `Unsupported operator: ${ operator }` );
+	}
+}

packages/compose/src/hooks/use-container-match/index.native.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import compareWidths from './compare-widths';
+
+const useContainerMatch = ( queries ) => {
+	const [ currentContainerWidth, setContainerWidth ] = useState( null );
+	const [ containerMatches, setContainerMatches ] = useState( null );
+
+	const matchWidth = ( containerWidth ) => mapValues( queries, ( query ) => {
+		const [ queryWidth, operator = '>=' ] = query.split( ' ' ).reverse();
+		return compareWidths( operator, queryWidth, containerWidth );
+	} );
+
+	const onLayout = useCallback( ( { nativeEvent } ) => {
+		const { width } = nativeEvent.layout;
+
+		if ( width !== currentContainerWidth ) {
+			setContainerWidth( width );
+			matchWidth( width );
+			setContainerMatches( matchWidth( width ) );
+		}
+	}, [] );
+
+	return [ containerMatches, onLayout ];
+};
+
+export default useContainerMatch;
+

packages/compose/src/index.native.js

@@ -7,3 +7,4 @@ export { default as withPreferredColorScheme } from './higher-order/with-preferr
 
 // Hooks
 export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
+export { default as useContainerMatch } from './hooks/use-container-match';