[RNMobile] Image block makes call to native for fullscreen preview (#…

…18493)

* Call to RN gutenberg bridge for Android native fullscreen preview

* Added highlight border around image when image block is selected

* Do not request fullscreen preview if tapped mid upload or while showing tap to rety.

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

@@ -2,12 +2,13 @@
  * External dependencies
  */
 import React from 'react';
-import { View, ImageBackground, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
+import { View, ImageBackground, Text, TouchableWithoutFeedback, Dimensions, Platform } from 'react-native';
 import {
 	requestMediaImport,
 	mediaUploadSync,
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
+	requestImageFullscreenPreview,
 } from 'react-native-gutenberg-bridge';
 import { isEmpty, map } from 'lodash';
 
@@ -142,11 +143,14 @@ export class ImageEdit extends React.Component {
 			requestImageUploadCancelDialog( attributes.id );
 		} else if ( attributes.id && ! isURL( attributes.url ) ) {
 			requestImageFailedRetryDialog( attributes.id );
+		} else if ( Platform.OS === 'android' ) {
+			requestImageFullscreenPreview( attributes.url );
 		}
 
 		this.setState( {
 			isCaptionSelected: false,
 		} );
+
 	}
 
 	updateMediaProgress( payload ) {
@@ -334,6 +338,7 @@ export class ImageEdit extends React.Component {
 		};
 
 		const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO;
+
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
@@ -359,6 +364,7 @@ export class ImageEdit extends React.Component {
 						renderContent={ ( { isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage } ) => {
 							const opacity = isUploadInProgress ? 0.3 : 1;
 							const icon = this.getIcon( isUploadFailed );
+							const imageBorderOnSelectedStyle = isSelected && !( isUploadInProgress || isUploadFailed ) ? styles.imageBorder : '';
 
 							const iconContainer = (
 								<View style={ styles.modalIcon }>
@@ -378,7 +384,7 @@ export class ImageEdit extends React.Component {
 										accessibilityLabel={ alt }
 										accessibilityHint={ __( 'Double tap and hold to edit' ) }
 										accessibilityRole={ 'imagebutton' }
-										style={ { width: finalWidth, height: finalHeight, opacity } }
+										style={ [ imageBorderOnSelectedStyle, { width: finalWidth, height: finalHeight, opacity } ] }
 										resizeMethod="scale"
 										source={ { uri: url } }
 										key={ url }

packages/block-library/src/image/styles.native.scss

@@ -6,6 +6,12 @@
 	background-color: $gray-lighten-30;
 }
 
+.imageBorder {
+	border-color: $blue-medium;
+	border-width: 2px;
+	border-style: solid;
+}
+
 .uploadFailedText {
 	color: #fff;
 	font-size: 14;