Fix: Attachment Picker briefly displayed after taking a picture

src/components/AttachmentPicker/index.native.js

@@ -135,7 +135,6 @@ class AttachmentPicker extends Component {
 
         this.state = {
             isVisible: false,
-            result: null,
             onPicked: () => {},
         };
 
@@ -157,29 +156,20 @@ class AttachmentPicker extends Component {
             },
         ];
 
-        this.setResult = this.setResult.bind(this);
         this.close = this.close.bind(this);
-        this.completeAttachmentSelection = this.completeAttachmentSelection.bind(this);
+        this.pickAttachment = this.pickAttachment.bind(this);
     }
 
     /**
-     * Store the selected attachment mapped to an appropriate file interface
+     * Handles the image/document picker result and
+     * sends the selected attachment to the caller (parent component)
      *
      * @param {ImagePickerResponse|DocumentPickerResponse} attachment
      */
-    setResult(attachment) {
+    pickAttachment(attachment) {
         if (attachment && !attachment.didCancel && !attachment.error) {
             const result = getDataForUpload(attachment);
-            this.setState({result});
-        }
-    }
-
-    /**
-     * Triggers the `onPicked` callback with the selected attachment
-     */
-    completeAttachmentSelection() {
-        if (this.state.result) {
-            this.state.onPicked(this.state.result);
+            this.state.onPicked(result);
         }
     }
 
@@ -191,7 +181,6 @@ class AttachmentPicker extends Component {
     open(onPicked) {
         this.setState({
             isVisible: true,
-            result: null,
             onPicked,
         });
     }
@@ -203,6 +192,25 @@ class AttachmentPicker extends Component {
         this.setState({isVisible: false});
     }
 
+    /**
+     * Setup native attachment selection to start after this popover closes
+     *
+     * @param {{pickAttachment: function}} item - an item from this.menuItemData
+     */
+    selectItem(item) {
+        /* setTimeout delays execution to the frame after the modal closes
+        * without this on iOS closing the modal closes the gallery/camera as well */
+        this.onModalHide = () => setTimeout(
+            () => item.pickAttachment()
+                .then(this.pickAttachment)
+                .catch(console.error)
+                .finally(() => delete this.onModalHide),
+            10,
+        );
+
+        this.close();
+    }
+
     /**
      * Call the `children` renderProp with the interface defined in propTypes
      *
@@ -221,19 +229,16 @@ class AttachmentPicker extends Component {
                     onClose={this.close}
                     isVisible={this.state.isVisible}
                     anchorPosition={styles.createMenuPosition}
-                    onModalHide={this.completeAttachmentSelection}
+                    onModalHide={this.onModalHide}
                 >
                     <View style={this.props.isSmallScreenWidth ? {} : styles.createMenuContainer}>
                         {
-                            this.menuItemData.map(({icon, text, pickAttachment}) => (
+                            this.menuItemData.map(item => (
                                 <MenuItem
-                                    key={text}
-                                    icon={icon}
-                                    title={text}
-                                    onPress={() => pickAttachment()
-                                        .then(this.setResult)
-                                        .then(this.close)
-                                        .catch(console.error)}
+                                    key={item.text}
+                                    icon={item.icon}
+                                    title={item.text}
+                                    onPress={() => this.selectItem(item)}
                                 />
                             ))
                         }