[RNMobile] Added support for giphy and pexels images

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

@@ -6,6 +6,8 @@ import {
 	requestMediaPickFromMediaLibrary,
 	requestMediaPickFromDeviceLibrary,
 	requestMediaPickFromDeviceCamera,
+	getOtherMediaOptions,
+	requestOtherMediaPickFrom,
 } from 'react-native-gutenberg-bridge';
 
 /**
@@ -31,7 +33,27 @@ export class MediaUpload extends React.Component {
 		this.onPickerPresent = this.onPickerPresent.bind( this );
 		this.onPickerChange = this.onPickerChange.bind( this );
 		this.onPickerSelect = this.onPickerSelect.bind( this );
+
+		this.state = {
+			otherMediaOptions: undefined,
+		};
+	}
+
+	componentDidMount() {
+		const { allowedTypes = [] } = this.props;
+		getOtherMediaOptions( allowedTypes, ( otherMediaOptions ) => {
+			const otherMediaOptionsWithIcons = otherMediaOptions.map( ( option ) => {
+				return {
+					icon: this.getChooseFromDeviceIcon(),
+					value: option.value,
+					label: option.label,
+				};
+			} );
+
+			this.setState( { otherMediaOptions: otherMediaOptionsWithIcons } );
+		} );
 	}
+
 	getTakeMediaLabel() {
 		const { allowedTypes = [] } = this.props;
 
@@ -98,11 +120,22 @@ export class MediaUpload extends React.Component {
 			this.onPickerSelect( requestMediaPickFromDeviceCamera );
 		} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) {
 			this.onPickerSelect( requestMediaPickFromMediaLibrary );
+		} else {
+			const { onSelect, multiple = false } = this.props;
+			requestOtherMediaPickFrom( value, multiple, ( media ) => {
+				if ( ( multiple && media ) || ( media && media.id ) ) {
+					onSelect( media );
+				}
+			} );
 		}
 	}
 
 	render() {
-		const mediaOptions = this.getMediaOptionsItems();
+		let mediaOptions = this.getMediaOptionsItems();
+
+		if ( this.state.otherMediaOptions ) {
+			mediaOptions = [ ...mediaOptions, ...this.state.otherMediaOptions ];
+		}
 
 		const getMediaOptions = () => (
 			<Picker

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

@@ -40,3 +40,13 @@
 .iconDark {
 	fill: $white;
 }
+
+.content {
+	flex: 1;
+}
+
+.contentCentered {
+	flex: 1;
+	justify-content: center;
+	align-items: center;
+}

packages/block-library/src/media-text/media-container.native.js

@@ -164,14 +164,16 @@ class MediaContainer extends Component {
 		const { finalWidth, finalHeight, imageWidthWithinContainer, isUploadFailed, retryMessage } = params;
 		const opacity = isUploadInProgress ? 0.3 : 1;
 
+		const conttentStyle = ! imageWidthWithinContainer ? styles.content : styles.contentCentered;
+
 		return (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
 				onPress={ this.onMediaPressed }
 				onLongPress={ openMediaOptions }
 				disabled={ ! isSelected }
 			>
-				<View style={ styles.content }>
+				<View style={ conttentStyle }>
 					{ ! imageWidthWithinContainer &&
 						<View style={ styles.imageContainer }>
 							{ this.getIcon( false ) }

packages/block-library/src/media-text/style.native.scss

@@ -32,6 +32,12 @@
 	flex: 1;
 }
 
+.contentCentered {
+	flex: 1;
+	justify-content: center;
+	align-items: center;
+}
+
 .imageContainer {
 	align-items: center;
 	background-color: $gray-lighten-30;

test/native/setup.js

@@ -19,6 +19,8 @@ jest.mock( 'react-native-gutenberg-bridge', () => {
 		requestMediaPickFromMediaLibrary: jest.fn(),
 		requestMediaPickFromDeviceLibrary: jest.fn(),
 		requestMediaPickFromDeviceCamera: jest.fn(),
+		getOtherMediaOptions: jest.fn(),
+		requestOtherMediaPickFrom: jest.fn(),
 	};
 } );