[FIX] Can't open attachments on Tablet

app/containers/MessageBox/UploadModal.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-	View, Text, StyleSheet, Image, ScrollView, TouchableHighlight
+	View, Text, StyleSheet, Image, ScrollView, TouchableHighlight, FlatList
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
@@ -17,6 +17,7 @@ import { CustomIcon } from '../../lib/Icons';
 import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
 
+
 const styles = StyleSheet.create({
 	modal: {
 		width: '100%',
@@ -36,10 +37,6 @@ const styles = StyleSheet.create({
 		height: 430,
 		flexDirection: 'column'
 	},
-	scrollView: {
-		flex: 1,
-		padding: 16
-	},
 	image: {
 		height: 150,
 		flex: 1,
@@ -86,7 +83,6 @@ const styles = StyleSheet.create({
 class UploadModal extends Component {
 	static propTypes = {
 		isVisible: PropTypes.bool,
-		file: PropTypes.object,
 		close: PropTypes.func,
 		submit: PropTypes.func,
 		window: PropTypes.object,
@@ -95,17 +91,19 @@ class UploadModal extends Component {
 	}
 
 	state = {
-		name: '',
+		name: {},
 		description: '',
-		file: {}
+		file: {},
+		files: []
 	};
 
 	static getDerivedStateFromProps(props, state) {
 		if (!equal(props.file, state.file) && props.file && props.file.path) {
 			return {
 				file: props.file,
 				name: props.file.filename || 'Filename',
-				description: ''
+				description: '',
+				files: [...state.files, props.file]
 			};
 		}
 		return null;
@@ -142,9 +140,9 @@ class UploadModal extends Component {
 	}
 
 	submit = () => {
-		const { file, submit } = this.props;
-		const { name, description } = this.state;
-		submit({ ...file, name, description });
+		const { submit } = this.props;
+		const { files, description } = this.state;
+		submit({ files, description });
 	}
 
 	renderButtons = () => {
@@ -193,8 +191,9 @@ class UploadModal extends Component {
 		);
 	}
 
-	renderPreview() {
-		const { file, split, theme } = this.props;
+	renderPreview(file) {
+		const { split, theme } = this.props;
+
 		if (file.mime && file.mime.match(/image/)) {
 			return (<Image source={{ isStatic: true, uri: file.path }} style={[styles.image, split && styles.bigPreview]} />);
 		}
@@ -212,7 +211,7 @@ class UploadModal extends Component {
 		const {
 			window: { width }, isVisible, close, split, theme
 		} = this.props;
-		const { name, description } = this.state;
+		const { name, description, files } = this.state;
 		return (
 			<Modal
 				isVisible={isVisible}
@@ -230,21 +229,28 @@ class UploadModal extends Component {
 						<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Upload_file_question_mark')}</Text>
 					</View>
 
-					<ScrollView style={styles.scrollView}>
-						{this.renderPreview()}
-						<TextInput
-							placeholder={I18n.t('File_name')}
-							value={name}
-							onChangeText={value => this.setState({ name: value })}
-							theme={theme}
-						/>
-						<TextInput
-							placeholder={I18n.t('File_description')}
-							value={description}
-							onChangeText={value => this.setState({ description: value })}
-							theme={theme}
+					<ScrollView>
+						<FlatList
+							data={files}
+							renderItem={({ item }) => this.renderPreview(item)}
 						/>
+
 					</ScrollView>
+
+
+					<TextInput
+						placeholder={I18n.t('File_name')}
+						value={name}
+						onChangeText={value => this.setState({ name: value })}
+						theme={theme}
+					/>
+					<TextInput
+						placeholder={I18n.t('File_description')}
+						value={description}
+						onChangeText={value => this.setState({ description: value })}
+						theme={theme}
+					/>
+
 					{this.renderButtons()}
 				</View>
 			</Modal>

app/containers/MessageBox/index.js

@@ -118,7 +118,7 @@ class MessageBox extends Component {
 			I18n.t('Take_a_photo'),
 			I18n.t('Take_a_video'),
 			I18n.t('Choose_from_library'),
-			I18n.t('Choose_file')
+			I18n.t('Choose_files')
 		];
 		const libPickerLabels = {
 			cropperChooseText: I18n.t('Choose'),
@@ -512,26 +512,29 @@ class MessageBox extends Component {
 		return false;
 	}
 
-	sendMediaMessage = async(file) => {
+	sendMediaMessage = ({ files, description }) => {
 		const {
 			rid, tmid, baseUrl: server, user, message: { id: messageTmid }, replyCancel
 		} = this.props;
-		this.setState({ file: { isVisible: false } });
-		const fileInfo = {
-			name: file.name,
-			description: file.description,
-			size: file.size,
-			type: file.mime,
-			store: 'Uploads',
-			path: file.path
-		};
-		try {
-			replyCancel();
-			await RocketChat.sendFileMessage(rid, fileInfo, tmid || messageTmid, server, user);
-			Review.pushPositiveEvent();
-		} catch (e) {
-			log(e);
-		}
+		files.map(async(file) => {
+			this.setState({ file: { isVisible: false } });
+			const fileInfo = {
+				name: file.filename,
+				description,
+				size: file.size,
+				type: file.mime,
+				store: 'Uploads',
+				path: file.path
+			};
+
+			try {
+				replyCancel();
+				await RocketChat.sendFileMessage(rid, fileInfo, tmid || messageTmid, server, user);
+				Review.pushPositiveEvent();
+			} catch (e) {
+				log(e);
+			}
+		});
 	}
 
 	takePhoto = async() => {
@@ -569,18 +572,20 @@ class MessageBox extends Component {
 
 	chooseFile = async() => {
 		try {
-			const res = await DocumentPicker.pick({
+			const results = await DocumentPicker.pickMultiple({
 				type: [DocumentPicker.types.allFiles]
 			});
-			const file = {
-				filename: res.name,
-				size: res.size,
-				mime: res.type,
-				path: res.uri
-			};
-			if (this.canUploadFile(file)) {
-				this.showUploadModal(file);
-			}
+			results.forEach((file) => {
+				file = {
+					filename: file.name,
+					size: file.size,
+					mime: file.type,
+					path: file.uri
+				};
+				if (this.canUploadFile(file)) {
+					this.showUploadModal(file);
+				}
+			});
 		} catch (e) {
 			if (!DocumentPicker.isCancel(e)) {
 				log(e);

app/i18n/locales/en.js

@@ -133,7 +133,7 @@ export default {
 	Change_language_loading: 'Changing language.',
 	Choose: 'Choose',
 	Choose_from_library: 'Choose from library',
-	Choose_file: 'Choose file',
+	Choose_files: 'Choose files',
 	Choose_where_you_want_links_be_opened: 'Choose where you want links be opened',
 	Code: 'Code',
 	Collaborative: 'Collaborative',

app/index.js

@@ -421,9 +421,6 @@ const RoomActionsStack = createStackNavigator({
 	},
 	NotificationPrefView: {
 		getScreen: () => require('./views/NotificationPreferencesView').default
-	},
-	AttachmentView: {
-		getScreen: () => require('./views/AttachmentView').default
 	}
 }, {
 	defaultNavigationOptions: defaultHeader,
@@ -438,6 +435,7 @@ const ModalSwitch = createSwitchNavigator({
 	RoomActionsStack,
 	SettingsStack,
 	ModalBlockStack,
+	AttachmentStack,
 	AuthLoading: () => null
 },
 {
@@ -493,7 +491,7 @@ class CustomModalStack extends React.Component {
 			</View>
 		);
 
-		if (isAndroid) {
+		if (isAndroid && !pageSheet) {
 			content = (
 				<ScrollView overScrollMode='never'>
 					{content}