From 0f08be65e12b1820a87bfa58d8b3b4c10b98339b Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Mon, 4 Feb 2019 15:21:05 +0100
Subject: [PATCH 01/13] Implemented media options sheet

---
 .../block-library/src/image/edit.native.js    | 98 ++++++++++++++-----
 .../media-placeholder/index.native.js         | 25 +++--
 .../media-placeholder/styles.native.scss      |  1 +
 3 files changed, 84 insertions(+), 40 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 985c333e4be401..f4244d288547d2 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -34,6 +34,7 @@ export default class ImageEdit extends React.Component {
 
 		this.state = {
 			showSettings: false,
+			showMediaOptions: false,
 			progress: 0,
 			isUploadInProgress: false,
 			isUploadFailed: false,
@@ -133,6 +134,7 @@ export default class ImageEdit extends React.Component {
 		const { url, caption, height, width } = attributes;
 
 		const onMediaLibraryButtonPressed = () => {
+			this.setState( { showMediaOptions: false } );
 			requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
 				if ( mediaUrl ) {
 					setAttributes( { id: mediaId, url: mediaUrl } );
@@ -140,33 +142,25 @@ export default class ImageEdit extends React.Component {
 			} );
 		};
 
-		if ( ! url ) {
-			const onMediaUploadButtonPressed = () => {
-				requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
-					if ( mediaUri ) {
-						this.addMediaUploadListener( );
-						setAttributes( { url: mediaUri, id: mediaId } );
-					}
-				} );
-			};
-
-			const onMediaCaptureButtonPressed = () => {
-				requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
-					if ( mediaUri ) {
-						this.addMediaUploadListener( );
-						setAttributes( { url: mediaUri, id: mediaId } );
-					}
-				} );
-			};
+		const onMediaUploadButtonPressed = () => {
+			this.setState( { showMediaOptions: false } );
+			requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
+				if ( mediaUri ) {
+					this.addMediaUploadListener( );
+					setAttributes( { url: mediaUri, id: mediaId } );
+				}
+			} );
+		};
 
-			return (
-				<MediaPlaceholder
-					onUploadMediaPressed={ onMediaUploadButtonPressed }
-					onMediaLibraryPressed={ onMediaLibraryButtonPressed }
-					onCapturePhotoPressed={ onMediaCaptureButtonPressed }
-				/>
-			);
-		}
+		const onMediaCaptureButtonPressed = () => {
+			this.setState( { showMediaOptions: false } );
+			requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
+				if ( mediaUri ) {
+					this.addMediaUploadListener( );
+					setAttributes( { url: mediaUri, id: mediaId } );
+				}
+			} );
+		};
 
 		const onImageSettingsButtonPressed = () => {
 			this.setState( { showSettings: true } );
@@ -176,12 +170,20 @@ export default class ImageEdit extends React.Component {
 			this.setState( { showSettings: false } );
 		};
 
+		const onMediaOptionsButtonPressed = () => {
+			this.setState( { showMediaOptions: true } );
+		};
+
+		const onMediaOptionsClose = () => {
+			this.setState( { showMediaOptions: false } );
+		};
+
 		const toolbarEditButton = (
 			<Toolbar>
 				<ToolbarButton
 					label={ __( 'Edit image' ) }
 					icon="edit"
-					onClick={ onMediaLibraryButtonPressed }
+					onClick={ onMediaOptionsButtonPressed }
 				/>
 			</Toolbar>
 		);
@@ -214,6 +216,47 @@ export default class ImageEdit extends React.Component {
 			</BottomSheet>
 		);
 
+		const getMediaOptions = () => (
+			<BottomSheet
+				isVisible={ this.state.showMediaOptions }
+				onClose={ onMediaOptionsClose }
+				hideHeader
+			>
+				<BottomSheet.Cell
+					label={ __( 'Choose from device' ) }
+					labelStyle={ { color: '#00aadc'} }
+					onPress={ onMediaUploadButtonPressed }
+				/>
+				<BottomSheet.Cell
+					label={ __( 'Take a Photo' ) }
+					labelStyle={ { color: '#00aadc'} }
+					onPress={ onMediaCaptureButtonPressed }
+				/>
+				<BottomSheet.Cell
+					label={ __( 'WordPress Media Library' ) }
+					labelStyle={ { color: '#00aadc'} }
+					onPress={ onMediaLibraryButtonPressed }
+				/>
+				<BottomSheet.Cell
+					label={ __( 'Dismiss' ) }
+					labelStyle={ { color: '#00aadc', fontWeight: 'bold' } }
+					drawSeparator={ false }
+					onPress={ onMediaOptionsClose }
+				/>
+			</BottomSheet>
+		);
+
+		if ( ! url) {
+			return (
+				<View style={ { flex: 1 } } >
+				{ getMediaOptions() }
+				<MediaPlaceholder
+					onMediaOptionsPressed={ onMediaOptionsButtonPressed }
+				/>
+				</View>
+			);
+		}
+
 		const showSpinner = this.state.isUploadInProgress;
 		const opacity = this.state.isUploadInProgress ? 0.3 : 1;
 		const progress = this.state.progress * 100;
@@ -252,6 +295,7 @@ export default class ImageEdit extends React.Component {
 							return (
 								<View style={ { flex: 1 } } >
 									{ getInspectorControls() }
+									{ getMediaOptions() }
 									<ImageBackground
 										style={ { width: finalWidth, height: finalHeight, opacity } }
 										resizeMethod="scale"
diff --git a/packages/editor/src/components/media-placeholder/index.native.js b/packages/editor/src/components/media-placeholder/index.native.js
index 0b70472c2407f9..68af2fdd23a39a 100644
--- a/packages/editor/src/components/media-placeholder/index.native.js
+++ b/packages/editor/src/components/media-placeholder/index.native.js
@@ -1,27 +1,26 @@
 /**
  * External dependencies
  */
-import { View, Text, Button } from 'react-native';
+import { View, Text, Button, TouchableWithoutFeedback } from 'react-native';
 
 import styles from './styles.scss';
 
 import { __ } from '@wordpress/i18n';
+import { Dashicon } from '@wordpress/components';
 
 function MediaPlaceholder( props ) {
 	return (
-		<View style={ styles.emptyStateContainer }>
-			<Text style={ styles.emptyStateTitle }>
-				{ __( 'Image' ) }
-			</Text>
-			<Text style={ styles.emptyStateDescription }>
-				{ __( 'Upload a new image or select a file from your library.' ) }
-			</Text>
-			<View style={ styles.emptyStateButtonsContainer }>
-				<Button title={ __( 'Device Library' ) } onPress={ props.onUploadMediaPressed } />
-				<Button title={ __( 'Take photo' ) } onPress={ props.onCapturePhotoPressed } />
+		<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
+			<View style={ styles.emptyStateContainer }>
+				<Dashicon icon={ 'cover-image' }/>
+				<Text style={ styles.emptyStateTitle }>
+					{ __( 'Image' ) }
+				</Text>
+				<Text style={ styles.emptyStateDescription }>
+					{ __( 'UPLOAD IMAGE' ) }
+				</Text>
 			</View>
-			<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPressed } />
-		</View>
+		</TouchableWithoutFeedback>
 	);
 }
 
diff --git a/packages/editor/src/components/media-placeholder/styles.native.scss b/packages/editor/src/components/media-placeholder/styles.native.scss
index 0014afe089ac51..a8b70ae3e89b79 100644
--- a/packages/editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/editor/src/components/media-placeholder/styles.native.scss
@@ -15,6 +15,7 @@
 
 .emptyStateDescription {
 	text-align: center;
+	color: #0087be;
 }
 
 .emptyStateButtonsContainer {

From 65fbbb7d00964dcab7414265cd095a07e8c86f5b Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Mon, 4 Feb 2019 15:38:58 +0100
Subject: [PATCH 02/13] Fixed lint errors

---
 .../block-library/src/image/edit.native.js     | 18 +++++++++---------
 .../media-placeholder/index.native.js          |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index f4244d288547d2..b549b34c5df11e 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -224,35 +224,35 @@ export default class ImageEdit extends React.Component {
 			>
 				<BottomSheet.Cell
 					label={ __( 'Choose from device' ) }
-					labelStyle={ { color: '#00aadc'} }
+					labelStyle={ { color: '#00aadc' } }
 					onPress={ onMediaUploadButtonPressed }
 				/>
 				<BottomSheet.Cell
 					label={ __( 'Take a Photo' ) }
-					labelStyle={ { color: '#00aadc'} }
+					labelStyle={ { color: '#00aadc' } }
 					onPress={ onMediaCaptureButtonPressed }
 				/>
 				<BottomSheet.Cell
 					label={ __( 'WordPress Media Library' ) }
-					labelStyle={ { color: '#00aadc'} }
+					labelStyle={ { color: '#00aadc' } }
 					onPress={ onMediaLibraryButtonPressed }
 				/>
 				<BottomSheet.Cell
 					label={ __( 'Dismiss' ) }
-					labelStyle={ { color: '#00aadc', fontWeight: 'bold' } }
+					labelStyle={ { color: '#00aadc ', fontWeight: 'bold' } }
 					drawSeparator={ false }
 					onPress={ onMediaOptionsClose }
 				/>
 			</BottomSheet>
 		);
 
-		if ( ! url) {
+		if ( ! url ) {
 			return (
 				<View style={ { flex: 1 } } >
-				{ getMediaOptions() }
-				<MediaPlaceholder
-					onMediaOptionsPressed={ onMediaOptionsButtonPressed }
-				/>
+					{ getMediaOptions() }
+					<MediaPlaceholder
+						onMediaOptionsPressed={ onMediaOptionsButtonPressed }
+					/>
 				</View>
 			);
 		}
diff --git a/packages/editor/src/components/media-placeholder/index.native.js b/packages/editor/src/components/media-placeholder/index.native.js
index 68af2fdd23a39a..4ec19d0a560f0a 100644
--- a/packages/editor/src/components/media-placeholder/index.native.js
+++ b/packages/editor/src/components/media-placeholder/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View, Text, Button, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
 
 import styles from './styles.scss';
 
@@ -12,7 +12,7 @@ function MediaPlaceholder( props ) {
 	return (
 		<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
 			<View style={ styles.emptyStateContainer }>
-				<Dashicon icon={ 'cover-image' }/>
+				<Dashicon icon={ 'cover-image' } />
 				<Text style={ styles.emptyStateTitle }>
 					{ __( 'Image' ) }
 				</Text>

From a1294a974d5367a9b9af9e18fdd3bffaa8ee5bcc Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Tue, 5 Feb 2019 12:30:11 +0100
Subject: [PATCH 03/13] Fixed color error

---
 packages/block-library/src/image/edit.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index b73b25847585fb..c0740a872d083d 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -238,7 +238,7 @@ export default class ImageEdit extends React.Component {
 				/>
 				<BottomSheet.Cell
 					label={ __( 'Dismiss' ) }
-					labelStyle={ { color: '#00aadc ', fontWeight: 'bold' } }
+					labelStyle={ { color: '#00aadc', fontWeight: 'bold' } }
 					drawSeparator={ false }
 					onPress={ onMediaOptionsClose }
 				/>

From fe66aa6e53ce96e8130f23a5df9357b682018a49 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Tue, 5 Feb 2019 12:38:32 +0100
Subject: [PATCH 04/13] Change "Upload Image" label to "Select Image" label

---
 .../editor/src/components/media-placeholder/index.native.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/media-placeholder/index.native.js b/packages/editor/src/components/media-placeholder/index.native.js
index 4ec19d0a560f0a..580c8ff528d51c 100644
--- a/packages/editor/src/components/media-placeholder/index.native.js
+++ b/packages/editor/src/components/media-placeholder/index.native.js
@@ -17,7 +17,7 @@ function MediaPlaceholder( props ) {
 					{ __( 'Image' ) }
 				</Text>
 				<Text style={ styles.emptyStateDescription }>
-					{ __( 'UPLOAD IMAGE' ) }
+					{ __( 'SELECT IMAGE' ) }
 				</Text>
 			</View>
 		</TouchableWithoutFeedback>

From ee793414c9f63c7a175aa596bda03006e6d41058 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Tue, 5 Feb 2019 13:47:54 +0100
Subject: [PATCH 05/13] Use proper style format

---
 .../media-placeholder/index.native.js         |  4 ++--
 .../media-placeholder/styles.native.scss      | 20 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/components/media-placeholder/index.native.js b/packages/editor/src/components/media-placeholder/index.native.js
index 580c8ff528d51c..ef387d5fefdbd9 100644
--- a/packages/editor/src/components/media-placeholder/index.native.js
+++ b/packages/editor/src/components/media-placeholder/index.native.js
@@ -12,12 +12,12 @@ function MediaPlaceholder( props ) {
 	return (
 		<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
 			<View style={ styles.emptyStateContainer }>
-				<Dashicon icon={ 'cover-image' } />
+				<Dashicon icon={ 'format-image' } />
 				<Text style={ styles.emptyStateTitle }>
 					{ __( 'Image' ) }
 				</Text>
 				<Text style={ styles.emptyStateDescription }>
-					{ __( 'SELECT IMAGE' ) }
+					{ __( 'CHOOSE IMAGE' ) }
 				</Text>
 			</View>
 		</TouchableWithoutFeedback>
diff --git a/packages/editor/src/components/media-placeholder/styles.native.scss b/packages/editor/src/components/media-placeholder/styles.native.scss
index a8b70ae3e89b79..964bb4371310d0 100644
--- a/packages/editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/editor/src/components/media-placeholder/styles.native.scss
@@ -1,5 +1,9 @@
 .emptyStateContainer {
+	flex: 1;
+	height: 142;
+	flex-direction: column;
 	align-items: center;
+	justify-content: center;
 	background-color: #f2f2f2;
 	padding-left: 12;
 	padding-right: 12;
@@ -9,19 +13,15 @@
 
 .emptyStateTitle {
 	text-align: center;
-	font-weight: 600;
-	padding-bottom: 12;
+	margin-top: 8;
+	margin-bottom: 10;
+	font-size: 14;
+	color: #2e4453;
 }
 
 .emptyStateDescription {
 	text-align: center;
 	color: #0087be;
-}
-
-.emptyStateButtonsContainer {
-	margin-top: 15;
-	margin-bottom: 15;
-	flex-direction: row;
-	justify-content: space-evenly;
-	width: 100%;
+	font-size: 14;
+	font-weight: 500;
 }

From c215079f1ba917b7b03f53f9d5f4c55afc9a313e Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Tue, 5 Feb 2019 19:56:54 +0100
Subject: [PATCH 06/13] Dismiss modal on back pressed

---
 .../editor/src/components/mobile/bottom-sheet/index.native.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js
index d4754a3909dfa8..b63c0ee1f313bb 100644
--- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js
+++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js
@@ -55,6 +55,7 @@ class BottomSheet extends Component {
 				backdropTransitionInTiming={ 500 }
 				backdropTransitionOutTiming={ 500 }
 				onBackdropPress={ this.props.onClose }
+				onBackButtonPress={ this.props.onClose }
 				onSwipe={ this.props.onClose }
 				swipeDirection="down"
 			>

From 97188790e738d476cad635829d03d850ebeb0bdd Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Tue, 5 Feb 2019 20:45:18 +0100
Subject: [PATCH 07/13] Restyle action sheet for Android and iOS

---
 packages/block-library/src/image/edit.native.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 55b56ba749d486..f0f1663f185492 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { View, ImageBackground, TextInput, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, ImageBackground, TextInput, Text, TouchableWithoutFeedback, Platform } from 'react-native';
 import {
 	subscribeMediaUpload,
 	requestMediaPickFromMediaLibrary,
@@ -148,6 +148,8 @@ export default class ImageEdit extends React.Component {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { url, caption, height, width, alt, href } = attributes;
 
+		const isiOS = Platform.OS === 'ios';
+
 		const onMediaLibraryButtonPressed = () => {
 			this.setState( { showMediaOptions: false } );
 			requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
@@ -241,26 +243,32 @@ export default class ImageEdit extends React.Component {
 				hideHeader
 			>
 				<BottomSheet.Cell
+					icon={ isiOS ? undefined : 'wordpress-alt' }
 					label={ __( 'Choose from device' ) }
+					value={ isiOS ? undefined : '' }
 					labelStyle={ { color: '#00aadc' } }
 					onPress={ onMediaUploadButtonPressed }
 				/>
 				<BottomSheet.Cell
+					icon={ isiOS ? undefined : 'camera' }
 					label={ __( 'Take a Photo' ) }
+					value={ isiOS ? undefined : '' }
 					labelStyle={ { color: '#00aadc' } }
 					onPress={ onMediaCaptureButtonPressed }
 				/>
 				<BottomSheet.Cell
+					icon={ isiOS ? undefined : 'format-image' }
 					label={ __( 'WordPress Media Library' ) }
+					value={ isiOS ? undefined : '' }
 					labelStyle={ { color: '#00aadc' } }
 					onPress={ onMediaLibraryButtonPressed }
 				/>
-				<BottomSheet.Cell
+				{ isiOS && <BottomSheet.Cell
 					label={ __( 'Dismiss' ) }
 					labelStyle={ { color: '#00aadc', fontWeight: 'bold' } }
 					drawSeparator={ false }
 					onPress={ onMediaOptionsClose }
-				/>
+				/> }
 			</BottomSheet>
 		);
 

From 7f6e1accff81f76a81d5997fbdb0fe9c46b7eda9 Mon Sep 17 00:00:00 2001
From: Sergio Estevao <sergioestevao@gmail.com>
Date: Wed, 6 Feb 2019 09:59:55 +0000
Subject: [PATCH 08/13] Execute the callbacks from the bottom sheet with a
 delay on iOS.

---
 .../block-library/src/image/edit.native.js    | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index f0f1663f185492..492789a28dd900 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -151,7 +151,6 @@ export default class ImageEdit extends React.Component {
 		const isiOS = Platform.OS === 'ios';
 
 		const onMediaLibraryButtonPressed = () => {
-			this.setState( { showMediaOptions: false } );
 			requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
 				if ( mediaUrl ) {
 					setAttributes( { id: mediaId, url: mediaUrl } );
@@ -160,7 +159,6 @@ export default class ImageEdit extends React.Component {
 		};
 
 		const onMediaUploadButtonPressed = () => {
-			this.setState( { showMediaOptions: false } );
 			requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
 				if ( mediaUri ) {
 					this.addMediaUploadListener( );
@@ -170,7 +168,6 @@ export default class ImageEdit extends React.Component {
 		};
 
 		const onMediaCaptureButtonPressed = () => {
-			this.setState( { showMediaOptions: false } );
 			requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
 				if ( mediaUri ) {
 					this.addMediaUploadListener( );
@@ -236,6 +233,18 @@ export default class ImageEdit extends React.Component {
 			</BottomSheet>
 		);
 
+		const closeBottomSheetAndExecuteWithDelay = ( method ) => {
+			this.setState( { showMediaOptions: false } );
+			// On iOS we need to delay the execution of the method or else the modal dismissal of the bottom sheet can overlap with other modal presentation
+			if ( isiOS ) {
+				setTimeout( function() {
+					method();
+				}, 750 );
+			} else {
+				method();
+			}
+		};
+
 		const getMediaOptions = () => (
 			<BottomSheet
 				isVisible={ this.state.showMediaOptions }
@@ -247,21 +256,27 @@ export default class ImageEdit extends React.Component {
 					label={ __( 'Choose from device' ) }
 					value={ isiOS ? undefined : '' }
 					labelStyle={ { color: '#00aadc' } }
-					onPress={ onMediaUploadButtonPressed }
+					onPress={ () => {
+						closeBottomSheetAndExecuteWithDelay( onMediaUploadButtonPressed );
+					} }
 				/>
 				<BottomSheet.Cell
 					icon={ isiOS ? undefined : 'camera' }
 					label={ __( 'Take a Photo' ) }
 					value={ isiOS ? undefined : '' }
 					labelStyle={ { color: '#00aadc' } }
-					onPress={ onMediaCaptureButtonPressed }
+					onPress={ () => {
+						closeBottomSheetAndExecuteWithDelay( onMediaCaptureButtonPressed );
+					} }
 				/>
 				<BottomSheet.Cell
 					icon={ isiOS ? undefined : 'format-image' }
 					label={ __( 'WordPress Media Library' ) }
 					value={ isiOS ? undefined : '' }
 					labelStyle={ { color: '#00aadc' } }
-					onPress={ onMediaLibraryButtonPressed }
+					onPress={ () => {
+						closeBottomSheetAndExecuteWithDelay( onMediaLibraryButtonPressed );
+					} }
 				/>
 				{ isiOS && <BottomSheet.Cell
 					label={ __( 'Dismiss' ) }

From 9067b0883b4fb98a90100d077e44981e031510d2 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 6 Feb 2019 13:48:58 +0100
Subject: [PATCH 09/13] Avoid delay for iOS

---
 packages/block-library/src/image/edit.native.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 13349db9350c14..18ae26f29045f2 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -234,15 +234,9 @@ export default class ImageEdit extends React.Component {
 		);
 
 		const closeBottomSheetAndExecuteWithDelay = ( method ) => {
-			this.setState( { showMediaOptions: false } );
-			// On iOS we need to delay the execution of the method or else the modal dismissal of the bottom sheet can overlap with other modal presentation
-			if ( isiOS ) {
-				setTimeout( function() {
-					method();
-				}, 750 );
-			} else {
+			this.setState( { showMediaOptions: false }, () => {
 				method();
-			}
+			} );
 		};
 
 		const getMediaOptions = () => (

From fcc482f89a5afa3e312a8c46e0ec36e9bda70641 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 6 Feb 2019 15:03:16 +0100
Subject: [PATCH 10/13] Revert "Avoid delay for iOS"

This reverts commit 9067b0883b4fb98a90100d077e44981e031510d2.
---
 packages/block-library/src/image/edit.native.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 18ae26f29045f2..13349db9350c14 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -234,9 +234,15 @@ export default class ImageEdit extends React.Component {
 		);
 
 		const closeBottomSheetAndExecuteWithDelay = ( method ) => {
-			this.setState( { showMediaOptions: false }, () => {
+			this.setState( { showMediaOptions: false } );
+			// On iOS we need to delay the execution of the method or else the modal dismissal of the bottom sheet can overlap with other modal presentation
+			if ( isiOS ) {
+				setTimeout( function() {
+					method();
+				}, 750 );
+			} else {
 				method();
-			} );
+			}
 		};
 
 		const getMediaOptions = () => (

From b5adc607a2e29825004472fa34b612ced126d384 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 6 Feb 2019 15:25:27 +0100
Subject: [PATCH 11/13] Avoid leaking of Modal view

---
 packages/block-library/src/image/edit.native.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 13349db9350c14..7079bacd1a4768 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -204,7 +204,7 @@ export default class ImageEdit extends React.Component {
 
 		const getInspectorControls = () => (
 			<BottomSheet
-				isVisible={ this.state.showSettings }
+				isVisible={ true }
 				onClose={ onImageSettingsClose }
 				hideHeader
 			>
@@ -247,7 +247,7 @@ export default class ImageEdit extends React.Component {
 
 		const getMediaOptions = () => (
 			<BottomSheet
-				isVisible={ this.state.showMediaOptions }
+				isVisible={ true }
 				onClose={ onMediaOptionsClose }
 				hideHeader
 			>
@@ -290,7 +290,7 @@ export default class ImageEdit extends React.Component {
 		if ( ! url ) {
 			return (
 				<View style={ { flex: 1 } } >
-					{ getMediaOptions() }
+					{ this.state.showMediaOptions && getMediaOptions() }
 					<MediaPlaceholder
 						onMediaOptionsPressed={ onMediaOptionsButtonPressed }
 					/>
@@ -335,8 +335,8 @@ export default class ImageEdit extends React.Component {
 
 							return (
 								<View style={ { flex: 1 } } >
-									{ getInspectorControls() }
-									{ getMediaOptions() }
+									{ this.state.showSettings && getInspectorControls() }
+									{ this.state.showMediaOptions && getMediaOptions() }
 									<ImageBackground
 										style={ { width: finalWidth, height: finalHeight, opacity } }
 										resizeMethod="scale"

From 391a82d789b29c1edb41722aa43ab6145aab619b Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 6 Feb 2019 16:28:01 +0100
Subject: [PATCH 12/13] Revert "Avoid leaking of Modal view"

This reverts commit b5adc607a2e29825004472fa34b612ced126d384.
---
 packages/block-library/src/image/edit.native.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 7079bacd1a4768..13349db9350c14 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -204,7 +204,7 @@ export default class ImageEdit extends React.Component {
 
 		const getInspectorControls = () => (
 			<BottomSheet
-				isVisible={ true }
+				isVisible={ this.state.showSettings }
 				onClose={ onImageSettingsClose }
 				hideHeader
 			>
@@ -247,7 +247,7 @@ export default class ImageEdit extends React.Component {
 
 		const getMediaOptions = () => (
 			<BottomSheet
-				isVisible={ true }
+				isVisible={ this.state.showMediaOptions }
 				onClose={ onMediaOptionsClose }
 				hideHeader
 			>
@@ -290,7 +290,7 @@ export default class ImageEdit extends React.Component {
 		if ( ! url ) {
 			return (
 				<View style={ { flex: 1 } } >
-					{ this.state.showMediaOptions && getMediaOptions() }
+					{ getMediaOptions() }
 					<MediaPlaceholder
 						onMediaOptionsPressed={ onMediaOptionsButtonPressed }
 					/>
@@ -335,8 +335,8 @@ export default class ImageEdit extends React.Component {
 
 							return (
 								<View style={ { flex: 1 } } >
-									{ this.state.showSettings && getInspectorControls() }
-									{ this.state.showMediaOptions && getMediaOptions() }
+									{ getInspectorControls() }
+									{ getMediaOptions() }
 									<ImageBackground
 										style={ { width: finalWidth, height: finalHeight, opacity } }
 										resizeMethod="scale"

From 4dd84e45d238ca1ab69aac94ffb879bb33969e86 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 8 Feb 2019 17:05:44 +0100
Subject: [PATCH 13/13] Use Picker instead of Bottom Sheet

---
 .../block-library/src/image/edit.native.js    | 94 +++++++------------
 .../editor/src/components/index.native.js     |  1 +
 .../components/mobile/picker/index.android.js |  5 +-
 3 files changed, 37 insertions(+), 63 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 01f365627775c7..25748765998d44 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { View, ImageBackground, TextInput, Text, TouchableWithoutFeedback, Platform } from 'react-native';
+import { View, ImageBackground, TextInput, Text, TouchableWithoutFeedback } from 'react-native';
 import {
 	subscribeMediaUpload,
 	requestMediaPickFromMediaLibrary,
@@ -20,7 +20,7 @@ import {
 /**
  * Internal dependencies
  */
-import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor';
+import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet, Picker } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner, Dashicon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
@@ -34,6 +34,10 @@ const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
 const MEDIA_UPLOAD_STATE_FAILED = 3;
 const MEDIA_UPLOAD_STATE_RESET = 4;
 
+const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE = 'choose_from_device';
+const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_PHOTO = 'take_photo';
+const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY = 'wordpress_media_library';
+
 const LINK_DESTINATION_CUSTOM = 'custom';
 
 class ImageEdit extends React.Component {
@@ -42,7 +46,6 @@ class ImageEdit extends React.Component {
 
 		this.state = {
 			showSettings: false,
-			showMediaOptions: false,
 			progress: 0,
 			isUploadInProgress: false,
 			isUploadFailed: false,
@@ -165,12 +168,18 @@ class ImageEdit extends React.Component {
 		} ) );
 	}
 
+	getMediaOptionsItems() {
+		return [
+			{ icon: 'wordpress-alt', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE, label: __( 'Choose from device' ) },
+			{ icon: 'camera', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_PHOTO, label: __( 'Take a Photo' ) },
+			{ icon: 'format-image', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY, label: __( 'WordPress Media Library' ) },
+		];
+	}
+
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { url, caption, height, width, alt, href } = attributes;
 
-		const isiOS = Platform.OS === 'ios';
-
 		const onMediaLibraryButtonPressed = () => {
 			requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
 				if ( mediaUrl ) {
@@ -205,12 +214,10 @@ class ImageEdit extends React.Component {
 			this.setState( { showSettings: false } );
 		};
 
-		const onMediaOptionsButtonPressed = () => {
-			this.setState( { showMediaOptions: true } );
-		};
+		let picker;
 
-		const onMediaOptionsClose = () => {
-			this.setState( { showMediaOptions: false } );
+		const onMediaOptionsButtonPressed = () => {
+			picker.presentPicker();
 		};
 
 		const toolbarEditButton = (
@@ -245,7 +252,7 @@ class ImageEdit extends React.Component {
 					label={ __( 'Image Size' ) }
 					value={ 'Large' } // Temporary for UI implementation.
 					options={ sizeOptions }
-					onChangeValue={ () => {} } // Temporary for UI implementation.
+					onChangeValue={ ( ) => { } } // Temporary for UI implementation.
 				/>
 				<BottomSheet.Cell
 					icon={ 'editor-textcolor' }
@@ -263,58 +270,23 @@ class ImageEdit extends React.Component {
 			</BottomSheet>
 		);
 
-		const closeBottomSheetAndExecuteWithDelay = ( method ) => {
-			this.setState( { showMediaOptions: false } );
-			// On iOS we need to delay the execution of the method or else the modal dismissal of the bottom sheet can overlap with other modal presentation
-			if ( isiOS ) {
-				setTimeout( function() {
-					method();
-				}, 750 );
-			} else {
-				method();
-			}
-		};
+		const mediaOptions = this.getMediaOptionsItems();
 
 		const getMediaOptions = () => (
-			<BottomSheet
-				isVisible={ this.state.showMediaOptions }
-				onClose={ onMediaOptionsClose }
-				hideHeader
-			>
-				<BottomSheet.Cell
-					icon={ isiOS ? undefined : 'wordpress-alt' }
-					label={ __( 'Choose from device' ) }
-					value={ isiOS ? undefined : '' }
-					labelStyle={ { color: '#00aadc' } }
-					onPress={ () => {
-						closeBottomSheetAndExecuteWithDelay( onMediaUploadButtonPressed );
-					} }
-				/>
-				<BottomSheet.Cell
-					icon={ isiOS ? undefined : 'camera' }
-					label={ __( 'Take a Photo' ) }
-					value={ isiOS ? undefined : '' }
-					labelStyle={ { color: '#00aadc' } }
-					onPress={ () => {
-						closeBottomSheetAndExecuteWithDelay( onMediaCaptureButtonPressed );
-					} }
-				/>
-				<BottomSheet.Cell
-					icon={ isiOS ? undefined : 'format-image' }
-					label={ __( 'WordPress Media Library' ) }
-					value={ isiOS ? undefined : '' }
-					labelStyle={ { color: '#00aadc' } }
-					onPress={ () => {
-						closeBottomSheetAndExecuteWithDelay( onMediaLibraryButtonPressed );
-					} }
-				/>
-				{ isiOS && <BottomSheet.Cell
-					label={ __( 'Dismiss' ) }
-					labelStyle={ { color: '#00aadc', fontWeight: 'bold' } }
-					drawSeparator={ false }
-					onPress={ onMediaOptionsClose }
-				/> }
-			</BottomSheet>
+			<Picker
+				hideCancelButton={ true }
+				ref={ ( instance ) => picker = instance }
+				options={ mediaOptions }
+				onChange={ ( value ) => {
+					if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE ) {
+						onMediaUploadButtonPressed();
+					} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_PHOTO ) {
+						onMediaCaptureButtonPressed();
+					} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) {
+						onMediaLibraryButtonPressed();
+					}
+				} }
+			/>
 		);
 
 		if ( ! url ) {
diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js
index ebb3fb5b3e94ec..fc41a93fa6af31 100644
--- a/packages/editor/src/components/index.native.js
+++ b/packages/editor/src/components/index.native.js
@@ -12,3 +12,4 @@ export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as InspectorControls } from './inspector-controls';
 export { default as BottomSheet } from './mobile/bottom-sheet';
+export { default as Picker } from './mobile/picker';
diff --git a/packages/editor/src/components/mobile/picker/index.android.js b/packages/editor/src/components/mobile/picker/index.android.js
index 8dd1d909b12812..47dd8abb0dc354 100644
--- a/packages/editor/src/components/mobile/picker/index.android.js
+++ b/packages/editor/src/components/mobile/picker/index.android.js
@@ -45,16 +45,17 @@ export default class Picker extends Component {
 				<View>
 					{ this.props.options.map( ( option, index ) =>
 						<BottomSheet.Cell
+							icon={ option.icon }
 							key={ index }
 							label={ option.label }
 							onPress={ () => this.onCellPress( option.value ) }
 						/>
 					) }
-					<BottomSheet.Cell
+					{ ! this.props.hideCancelButton && <BottomSheet.Cell
 						label={ __( 'Cancel' ) }
 						onPress={ this.onClose }
 						drawSeparator={ false }
-					/>
+					/> }
 				</View>
 			</BottomSheet>
 		);