[RNMobile] Simplify media insertion flow Part 2 - media upload

packages/block-editor/src/components/media-placeholder/README.md

@@ -63,6 +63,15 @@ This property is similar to the `accept` property. The difference is the format
 - Required: No
 - Platform: Web | Mobile
 
+### autoOpenMediaUpload
+
+If true, the MediaUpload component auto-opens the picker of the respective platform.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+- Platform: Mobile
+
 ### className
 
 Class name added to the placeholder.

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

@@ -48,6 +48,7 @@ function MediaPlaceholder( props ) {
 		height,
 		backgroundColor,
 		hideContent,
+		autoOpenMediaUpload,
 	} = props;
 
 	// use ref to keep media array current for callbacks during rerenders
@@ -160,6 +161,7 @@ function MediaPlaceholder( props ) {
 				}
 				multiple={ multiple }
 				isReplacingMedia={ false }
+				autoOpenMediaUpload={ autoOpenMediaUpload }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
 						<TouchableWithoutFeedback

packages/block-editor/src/components/media-upload/README.md

@@ -129,6 +129,15 @@ Only applies if `gallery === true`.
 - Default: `false`
 - Platform: Web
 
+### autoOpenMediaUpload
+
+If true, the picker of the respective platform auto-opens.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+- Platform: Mobile
+
 ### gallery
 
 If true, the component will initiate all the states required to represent a gallery. By default, the media modal opens in the gallery edit frame, but that can be changed using the `addToGallery`flag.

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

@@ -1,7 +1,14 @@
+/**
+ * External dependencies
+ */
+import { Platform } from 'react-native';
+
+import { delay } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, React } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Picker } from '@wordpress/components';
 import {
@@ -26,20 +33,21 @@ export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
 export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 
+const PICKER_OPENING_DELAY = 200;
+
 export class MediaUpload extends Component {
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );
 		this.onPickerSelect = this.onPickerSelect.bind( this );
 		this.getAllSources = this.getAllSources.bind( this );
-
 		this.state = {
 			otherMediaOptions: [],
 		};
 	}
 
 	componentDidMount() {
-		const { allowedTypes = [] } = this.props;
+		const { allowedTypes = [], autoOpenMediaUpload } = this.props;
 		getOtherMediaOptions( allowedTypes, ( otherMediaOptions ) => {
 			const otherMediaOptionsWithIcons = otherMediaOptions.map(
 				( option ) => {
@@ -54,6 +62,10 @@ export class MediaUpload extends Component {
 
 			this.setState( { otherMediaOptions: otherMediaOptionsWithIcons } );
 		} );
+
+		if ( autoOpenMediaUpload ) {
+			this.onPickerPresent();
+		}
 	}
 
 	getAllSources() {
@@ -136,8 +148,20 @@ export class MediaUpload extends Component {
 	}
 
 	onPickerPresent() {
+		const { autoOpenMediaUpload } = this.props;
+		const isIOS = Platform.OS === 'ios';
+
 		if ( this.picker ) {
-			this.picker.presentPicker();
+			// the delay below is required because on iOS this action sheet gets dismissed by the close event of the Inserter
+			// so this delay allows the Inserter to be closed fully before presenting action sheet.
+			if ( autoOpenMediaUpload && isIOS ) {
+				delay(
+					() => this.picker.presentPicker(),
+					PICKER_OPENING_DELAY
+				);
+			} else {
+				this.picker.presentPicker();
+			}
 		}
 	}