[Mobile] Fix gallery upload sync

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { useRef } from 'react';
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import { uniqWith } from 'lodash';
 
@@ -21,6 +22,11 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  */
 import styles from './styles.scss';
 
+// remove duplicates after gallery append
+const dedupMedia = ( media ) => uniqWith( media, ( media1, media2 ) => {
+	return media1.id === media2.id || media1.url === media2.url;
+} );
+
 function MediaPlaceholder( props ) {
 	const {
 		addToGallery,
@@ -35,10 +41,14 @@ function MediaPlaceholder( props ) {
 		value = [],
 	} = props;
 
-	const setMedia = multiple && addToGallery ?
-		( selected ) => onSelect( uniqWith( [ ...value, ...selected ], ( media1, media2 ) => {
-			return media1.id === media2.id || media1.url === media2.url;
-		} ) ) :
+	// 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 ) => {
+		return onSelect( dedupMedia( [ ...mediaRef.current, ...selected ] ) );
+	} :
 		onSelect;
 
 	const isOneType = allowedTypes.length === 1;

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

@@ -128,15 +128,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,
@@ -90,7 +92,7 @@ export const Gallery = ( props ) => {
 							key={ img.id || img.url }
 							url={ img.url }
 							alt={ img.alt }
-							id={ img.id }
+							id={ parseInt( img.id ) } // make id an integer explicitly
 							isCropped={ imageCrop }
 							isFirstItem={ index === 0 }
 							isLastItem={ ( index + 1 ) === images.length }