diff --git a/packages/viewport/src/with-viewport-match.native.js b/packages/viewport/src/with-viewport-match.native.js
new file mode 100644
index 00000000000000..3398fda7e4f3f5
--- /dev/null
+++ b/packages/viewport/src/with-viewport-match.native.js
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Higher-order component creator, creating a new component which renders with
+ * the given prop names, where the value passed to the underlying component is
+ * the result of the query assigned as the object's value.
+ *
+ * @see isViewportMatch
+ *
+ * @param {Object} queries  Object of prop name to viewport query.
+ *
+ * @example
+ *
+ * ```jsx
+ * function MyComponent( { isMobile } ) {
+ * 	return (
+ * 		<div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>
+ * 	);
+ * }
+ *
+ * MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );
+ * ```
+ *
+ * @return {Function} Higher-order component.
+ */
+const withViewportMatch = ( queries ) => createHigherOrderComponent(
+	withSelect( ( select ) => {
+		return mapValues( queries, ( query ) => {
+			return select( 'core/viewport' ).isViewportMatch( query );
+		} );
+	} ),
+	'withViewportMatch'
+);
+
+export default withViewportMatch;