Make AttachmentPicker a component instead of a lib to fix Safari

src/components/AttachmentPicker/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    children: PropTypes.func.isRequired,
+};
+
+/**
+ * This component renders a function as a child and
+ * returns a "show attachment picker" method that takes
+ * a callback. This is the web/mWeb/desktop version since
+ * on iOS Safari we must append a hidden input to the DOM
+ * and listen to onChange event. When the show method is
+ * called an attachment
+ *
+ * @example
+ * <AttachmentPicker>
+ * {({openPicker}) => (
+ *     <Button
+ *         onPress={() => {
+ *             openPicker({
+ *                 onPicked: (file) => {
+ *                     // Display or upload File
+ *                 },
+ *             });
+ *         }}
+ *     />
+ * )}
+ * </AttachmentPicker>
+ */
+class AttachmentPicker extends React.Component {
+    render() {
+        return (
+            <>
+                <input
+                    hidden
+                    type="file"
+                    ref={el => this.fileInput = el}
+                    onChange={(e) => {
+                        const file = e.target.files[0];
+                        file.uri = URL.createObjectURL(file);
+                        this.onPicked(file);
+                    }}
+                />
+                {this.props.children({
+                    openPicker: ({onPicked}) => {
+                        this.onPicked = onPicked;
+                        this.fileInput.click();
+                    },
+                })}
+            </>
+        );
+    }
+}
+
+AttachmentPicker.propTypes = propTypes;
+export default AttachmentPicker;

src/components/AttachmentPicker/index.native.js

@@ -0,0 +1,117 @@
+/**
+ * The react native image/document pickers work for iOS/Android, but we want to wrap them both within AttachmentPicker
+ */
+import RNImagePicker from 'react-native-image-picker';
+import RNDocumentPicker from 'react-native-document-picker';
+import PropTypes from 'prop-types';
+
+/**
+ * See https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Reference.md#options
+ * for ImagePicker configuration options
+ */
+const imagePickerOptions = {
+    title: 'Select an Attachment',
+    takePhotoButtonTitle: 'Take Photo',
+    chooseFromLibraryButtonTitle: 'Choose from Gallery',
+    customButtons: [{name: 'Document', title: 'Choose Document'}],
+    storageOptions: {
+        skipBackup: true,
+    },
+};
+
+/**
+ * See https://github.com/rnmods/react-native-document-picker#options for DocumentPicker configuration options
+ */
+const documentPickerOptions = {
+    type: [RNDocumentPicker.types.allFiles],
+};
+
+/**
+ * Launch the DocumentPicker. Results are in same format as ImagePicker, so we can pass the repsonse to the
+ * callback as is.
+ *
+ * @param {Object} callback
+ */
+function showDocumentPicker(callback) {
+    RNDocumentPicker.pick(documentPickerOptions).then((results) => {
+        callback(results);
+    }).catch((error) => {
+        if (!RNDocumentPicker.isCancel(error)) {
+            throw error;
+        }
+    });
+}
+
+/**
+ * Launch the AttachmentPicker. We display the ImagePicker first, as the document option is displayed as a
+ * custom ImagePicker list item.
+ *
+ * @param {Object} callback
+ */
+function show(callback) {
+    RNImagePicker.showImagePicker(imagePickerOptions, (response) => {
+        if (response.error) {
+            console.error(`Error during attachment selection: ${response.error}`);
+        } else if (response.customButton) {
+            showDocumentPicker(callback);
+        } else if (!response.didCancel) {
+            callback(response);
+        }
+    });
+}
+
+/**
+ * The data returned from `show` is different on web and mobile, so use this function to ensure the data we
+ * send to the xhr will be handled properly.
+ *
+ * @param {Object} fileData
+ * @return {Object}
+ */
+function getDataForUpload(fileData) {
+    return {
+        name: fileData.fileName || 'chat_attachment',
+        type: fileData.type,
+        uri: fileData.uri,
+    };
+}
+
+const propTypes = {
+    children: PropTypes.func.isRequired,
+};
+
+/**
+ * This component renders a function as a child and
+ * returns a "show attachment picker" method that takes
+ * a callback. This is the web/mWeb/desktop version since
+ * on iOS Safari we must append a hidden input to the DOM
+ * and listen to onChange event. When the show method is
+ * called an attachment
+ *
+ * @example
+ * <AttachmentPicker>
+ * {({openPicker}) => (
+ *     <Button
+ *         onPress={() => {
+ *             openPicker({
+ *                 onPicked: (file) => {
+ *                     // Display or upload File
+ *                 },
+ *             });
+ *         }}
+ *     />
+ * )}
+ * </AttachmentPicker>
+ *
+ * @returns {Function}
+ */
+const AttachmentPicker = ({children}) => children({
+    openPicker: ({onPicked}) => {
+        show((response) => {
+            onPicked(getDataForUpload(response));
+        });
+    },
+});
+
+AttachmentPicker.propTypes = propTypes;
+AttachmentPicker.displayName = 'AttachmentPicker';
+export default AttachmentPicker;

src/pages/home/report/ReportActionCompose.js

@@ -7,7 +7,7 @@ import TextInputFocusable from '../../../components/TextInputFocusable';
 import sendIcon from '../../../../assets/images/icon-send.png';
 import IONKEYS from '../../../IONKEYS';
 import paperClipIcon from '../../../../assets/images/icon-paper-clip.png';
-import AttachmentPicker from '../../../libs/AttachmentPicker';
+import AttachmentPicker from '../../../components/AttachmentPicker';
 import withIon from '../../../components/withIon';
 import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs/actions/Report';
 import ReportTypingIndicator from './ReportTypingIndicator';
@@ -37,7 +37,6 @@ class ReportActionCompose extends React.Component {
         this.submitForm = this.submitForm.bind(this);
         this.triggerSubmitShortcut = this.triggerSubmitShortcut.bind(this);
         this.submitForm = this.submitForm.bind(this);
-        this.showAttachmentPicker = this.showAttachmentPicker.bind(this);
         this.setIsFocused = this.setIsFocused.bind(this);
         this.comment = '';
         this.state = {
@@ -128,22 +127,6 @@ class ReportActionCompose extends React.Component {
         this.setTextInputShouldClear(true);
     }
 
-    /**
-     * Handle the attachment icon being tapped
-     *
-     * @param {SyntheticEvent} e
-     */
-    showAttachmentPicker(e) {
-        e.preventDefault();
-
-        AttachmentPicker.show((response) => {
-            console.debug(`Attachment selected: ${response.uri}, ${response.type}, ${response.name}, ${response.size}`);
-
-            addAction(this.props.reportID, '', AttachmentPicker.getDataForUpload(response));
-            this.textInput.focus();
-        });
-    }
-
     render() {
         return (
             <View style={[styles.chatItemCompose]}>
@@ -153,17 +136,29 @@ class ReportActionCompose extends React.Component {
                     styles.flexRow
                 ]}
                 >
-                    <TouchableOpacity
-                        onPress={this.showAttachmentPicker}
-                        style={[styles.chatItemAttachButton]}
-                        underlayColor={colors.componentBG}
-                    >
-                        <Image
-                            style={[styles.chatItemSubmitButtonIcon]}
-                            resizeMode="contain"
-                            source={paperClipIcon}
-                        />
-                    </TouchableOpacity>
+                    <AttachmentPicker>
+                        {({openPicker}) => (
+                            <TouchableOpacity
+                                onPress={(e) => {
+                                    e.preventDefault();
+                                    openPicker({
+                                        onPicked: (file) => {
+                                            addAction(this.props.reportID, '', file);
+                                            this.setTextInputShouldClear(true);
+                                        },
+                                    });
+                                }}
+                                style={[styles.chatItemAttachButton]}
+                                underlayColor={colors.componentBG}
+                            >
+                                <Image
+                                    style={[styles.chatItemSubmitButtonIcon]}
+                                    resizeMode="contain"
+                                    source={paperClipIcon}
+                                />
+                            </TouchableOpacity>
+                        )}
+                    </AttachmentPicker>
                     <TextInputFocusable
                         multiline
                         textAlignVertical="top"