[Mobile] Fix gallery upload sync

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -15,12 +15,21 @@ import {
 } from '@wordpress/block-editor';
 import { Dashicon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
+// remove duplicates after gallery append
+const dedupMedia = ( media ) =>
+	uniqWith(
+		media,
+		( media1, media2 ) =>
+			media1.id === media2.id || media1.url === media2.url
+	);
+
 function MediaPlaceholder( props ) {
 	const {
 		addToGallery,
@@ -35,19 +44,16 @@ function MediaPlaceholder( props ) {
 		value = [],
 	} = props;
 
+	// use ref to keep media array current for callbacks during rerenders
+	const mediaRef = useRef( value );
+	mediaRef.current = value;
+
+	// append and deduplicate media array for gallery use case
 	const setMedia =
 		multiple && addToGallery
 			? ( selected ) =>
 					onSelect(
-						uniqWith(
-							[ ...value, ...selected ],
-							( media1, media2 ) => {
-								return (
-									media1.id === media2.id ||
-									media1.url === media2.url
-								);
-							}
-						)
+						dedupMedia( [ ...mediaRef.current, ...selected ] )
 					)
 			: onSelect;
 

packages/block-library/src/gallery/gallery-image.native.js

@@ -145,15 +145,15 @@ class GalleryImage extends Component {
 	}
 
 	finishMediaUploadWithSuccess( payload ) {
-		this.props.setAttributes( {
-			id: payload.mediaServerId,
-			url: payload.mediaUrl,
-		} );
-
 		this.setState( {
 			isUploadInProgress: false,
 			didUploadFail: false,
 		} );
+
+		this.props.setAttributes( {
+			id: payload.mediaServerId,
+			url: payload.mediaUrl,
+		} );
 	}
 
 	finishMediaUploadWithFailure() {

packages/block-library/src/gallery/gallery.native.js

@@ -7,6 +7,7 @@ import { isEmpty } from 'lodash';
 /**
  * Internal dependencies
  */
+import { mediaUploadSync } from 'react-native-gutenberg-bridge';
 import GalleryImage from './gallery-image';
 import { defaultColumnsNumber } from './shared';
 import styles from './gallery-styles.scss';
@@ -17,7 +18,7 @@ import Tiles from './tiles';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { BlockCaption } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 
 const TILE_SPACING = 15;
 
@@ -27,6 +28,7 @@ const MAX_DISPLAYED_COLUMNS_NARROW = 2;
 
 export const Gallery = ( props ) => {
 	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
+	useEffect( mediaUploadSync, [] );
 
 	const {
 		clientId,
@@ -98,7 +100,7 @@ export const Gallery = ( props ) => {
 							key={ img.id || img.url }
 							url={ img.url }
 							alt={ img.alt }
-							id={ img.id }
+							id={ parseInt( img.id, 10 ) } // make id an integer explicitly
 							isCropped={ imageCrop }
 							isFirstItem={ index === 0 }
 							isLastItem={ index + 1 === images.length }