diff --git a/packages/block-editor/src/components/media-upload-progress/styles.native.scss b/packages/block-editor/src/components/media-upload-progress/styles.native.scss
index 9924af03a33c4..22355ccc1ad02 100644
--- a/packages/block-editor/src/components/media-upload-progress/styles.native.scss
+++ b/packages/block-editor/src/components/media-upload-progress/styles.native.scss
@@ -4,4 +4,5 @@
 
 .progressBar {
 	background-color: $gray-lighten-30;
+	z-index: 1;
 }
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
index c19045d9e021b..a2cc12e6028f7 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -105,9 +105,9 @@ export class MediaUpload extends React.Component {
 			.filter( ( source ) => {
 				return __experimentalOnlyMediaLibrary
 					? source.mediaLibrary
-					: allowedTypes.filter( ( allowedType ) =>
+					: allowedTypes.some( ( allowedType ) =>
 							source.types.includes( allowedType )
-					  ).length > 0;
+					  );
 			} )
 			.map( ( source ) => {
 				return {
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index b41810e614529..230a129123c08 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, TouchableWithoutFeedback } from 'react-native';
-import { default as Video } from 'react-native-video';
+import Video from 'react-native-video';
 
 /**
  * WordPress dependencies
@@ -25,6 +25,7 @@ import {
 	MEDIA_TYPE_VIDEO,
 	MediaPlaceholder,
 	MediaUpload,
+	MediaUploadProgress,
 	withColors,
 	__experimentalUseGradient,
 } from '@wordpress/block-editor';
@@ -74,6 +75,7 @@ const Cover = ( {
 		focalPoint,
 		minHeight,
 		url,
+		id,
 		style,
 	} = attributes;
 	const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;
@@ -122,8 +124,8 @@ const Cover = ( {
 		url && { opacity: dimRatio / 100 },
 		! gradientValue && {
 			backgroundColor:
-				( overlayColor && overlayColor.color ) ||
-				( style && style.color && style.color.background ) ||
+				overlayColor?.color ||
+				style?.color?.background ||
 				styles.overlay.color,
 		},
 		// While we don't support theme colors we add a default bg color
@@ -183,7 +185,10 @@ const Cover = ( {
 		</InspectorControls>
 	);
 
-	const background = ( openMediaOptions, getMediaOptions ) => (
+	const renderBackground = ( {
+		open: openMediaOptions,
+		getMediaOptions,
+	} ) => (
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
 			onLongPress={ openMediaOptions }
@@ -192,23 +197,39 @@ const Cover = ( {
 			<View style={ styles.background }>
 				{ getMediaOptions() }
 				{ isParentSelected && toolbarControls( openMediaOptions ) }
-
-				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
-					<ImageWithFocalPoint
-						focalPoint={ focalPoint }
-						url={ url }
-					/>
-				) }
-				{ VIDEO_BACKGROUND_TYPE === backgroundType && (
-					<Video
-						muted
-						disableFocus
-						repeat
-						resizeMode={ 'cover' }
-						source={ { uri: url } }
-						style={ styles.background }
-					/>
-				) }
+				<MediaUploadProgress
+					mediaId={ id }
+					onFinishMediaUploadWithSuccess={ ( {
+						mediaServerId,
+						mediaUrl,
+					} ) => {
+						setAttributes( {
+							id: mediaServerId,
+							url: mediaUrl,
+							backgroundType,
+						} );
+					} }
+					renderContent={ () => (
+						<>
+							{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+								<ImageWithFocalPoint
+									focalPoint={ focalPoint }
+									url={ url }
+								/>
+							) }
+							{ VIDEO_BACKGROUND_TYPE === backgroundType && (
+								<Video
+									muted
+									disableFocus
+									repeat
+									resizeMode={ 'cover' }
+									source={ { uri: url } }
+									style={ styles.background }
+								/>
+							) }
+						</>
+					) }
+				/>
 			</View>
 		</TouchableWithoutFeedback>
 	);
@@ -217,7 +238,8 @@ const Cover = ( {
 		return (
 			<View>
 				<MediaPlaceholder
-					__experimentalOnlyMediaLibrary
+					// eslint-disable-next-line no-undef
+					__experimentalOnlyMediaLibrary={ ! __DEV__ }
 					icon={ placeholderIcon }
 					labels={ {
 						title: __( 'Cover' ),
@@ -251,12 +273,11 @@ const Cover = ( {
 			</View>
 
 			<MediaUpload
-				__experimentalOnlyMediaLibrary
+				// eslint-disable-next-line no-undef
+				__experimentalOnlyMediaLibrary={ ! __DEV__ }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onSelect={ onSelectMedia }
-				render={ ( { open, getMediaOptions } ) => {
-					return background( open, getMediaOptions );
-				} }
+				render={ renderBackground }
 			/>
 		</View>
 	);
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 739742d1e6227..1742bf45f9de5 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -1,7 +1,6 @@
 .wp-block-cover-image,
 .wp-block-cover {
 	position: relative;
-	background-color: $black;
 	background-size: cover;
 	background-position: center center;
 	min-height: 430px;
@@ -11,7 +10,6 @@
 	justify-content: center;
 	align-items: center;
 	overflow: hidden;
-
 	&.has-parallax {
 		background-attachment: fixed;
 
@@ -28,9 +26,13 @@
 		}
 	}
 
-	&.has-background-dim::before {
-		content: "";
-		background-color: inherit;
+	&.has-background-dim {
+		background-color: $black;
+
+		&::before {
+			content: "";
+			background-color: inherit;
+		}
 	}
 
 	&.has-background-dim:not(.has-background-gradient)::before,
diff --git a/packages/components/src/mobile/image-with-focalpoint/index.native.js b/packages/components/src/mobile/image-with-focalpoint/index.native.js
index 0997b766101bb..440b8477ff2bc 100644
--- a/packages/components/src/mobile/image-with-focalpoint/index.native.js
+++ b/packages/components/src/mobile/image-with-focalpoint/index.native.js
@@ -97,18 +97,10 @@ const ImageWithFocalPoint = ( { focalPoint, url } ) => {
 	return (
 		<View style={ styles.container } onLayout={ onContainerLayout }>
 			<Image
-				aspectRatio={
-					originalImageData
-						? originalImageData.aspectRatio
-						: undefined
-				}
+				aspectRatio={ originalImageData?.aspectRatio }
 				style={ [
 					styles.image,
-					{
-						height: containerSize
-							? containerSize.height
-							: undefined,
-					},
+					{ height: containerSize?.height },
 					getImageStyles(),
 				] }
 				source={ { uri: url } }
diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
index be0eca3d77358..6dc54e4e1f53c 100644
--- a/packages/components/src/popover/README.md
+++ b/packages/components/src/popover/README.md
@@ -127,11 +127,22 @@ Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to
 
 ### anchorRect
 
-A custom `DOMRect` object at which to position the popover.
+A custom `DOMRect` object at which to position the popover. `anchorRect` is used when the position (custom `DOMRect` object) of the popover needs to be fixed at one location all the time.
 
 - Type: `DOMRect`
 - Required: No
 
+### getAnchorRect
+
+A callback function which is used to override the anchor value computation algorithm. `anchorRect` will take precedence over this prop, if both are passed together.
+
+If you need the `DOMRect` object i.e., the position of popover to be calculated on every time, the popover re-renders, then use `getAnchorRect`.
+
+`getAnchorRect` callback function receives a reference to the popover anchor element as a function parameter and it should return a `DOMRect` objcet.
+
+- Type: `Function`
+- Required: No
+
 ## Methods
 
 ### refresh