[NEW] Save to camera roll

app/containers/FileModal.js

@@ -2,6 +2,10 @@ import React, { useState } from 'react';
 import {
 	View, Text, TouchableWithoutFeedback, StyleSheet, SafeAreaView
 } from 'react-native';
+import CameraRoll from '@react-native-community/cameraroll';
+import {
+	FileSystem
+} from 'react-native-unimodules';
 import FastImage from 'react-native-fast-image';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
@@ -13,6 +17,9 @@ import { formatAttachmentUrl } from '../lib/utils';
 import ActivityIndicator from './ActivityIndicator';
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
+import { LISTENER } from './Toast';
+import EventEmitter from '../utils/events';
+import I18n from '../i18n';
 
 const styles = StyleSheet.create({
 	safeArea: {
@@ -40,6 +47,28 @@ const styles = StyleSheet.create({
 		flex: 1
 	}
 });
+const handleSave = async(img) => {
+	try {
+		const file = `${ FileSystem.documentDirectory + img[0] + Math.floor(Math.random() * 1000) }.jpg`;
+		const { uri } = await FileSystem.downloadAsync(img, file);
+		await CameraRoll.saveToCameraRoll(uri);
+		EventEmitter.emit(LISTENER, { message: I18n.t('saved_to_gallery') });
+	} catch (e) {
+		EventEmitter.emit(LISTENER, { message: I18n.t('error-save-image') });
+	}
+
+	// FileSystem.downloadAsync(img, `${ FileSystem.documentDirectory + img[0] + Math.floor(Math.random() * 1000) }.jpg`)
+	// 	.then(({ uri }) => {
+	// 		CameraRoll.saveToCameraRoll(uri).then(() => {
+	// 			EventEmitter.emit(LISTENER, { message: I18n.t('saved_to_gallery') });
+	// 		}).catch(() => {
+	// 			EventEmitter.emit(LISTENER, { message: I18n.t('error-save-image') });
+	// 		});
+	// 	})
+	// 	.catch(() => {
+	// 		EventEmitter.emit(LISTENER, { message: I18n.t('error-save-image') });
+	// 	});
+};
 
 const ModalContent = React.memo(({
 	attachment, onClose, user, baseUrl, theme
@@ -60,6 +89,7 @@ const ModalContent = React.memo(({
 					backgroundColor='transparent'
 					enableSwipeDown
 					onSwipeDown={onClose}
+					onSave={handleSave}
 					renderIndicator={() => null}
 					renderImage={props => <FastImage {...props} />}
 					loadingRender={() => <ActivityIndicator size='large' theme={theme} />}

app/i18n/locales/en.js

@@ -16,6 +16,7 @@ export default {
 	'error-duplicate-channel-name': 'A channel with name {{channel_name}} exists',
 	'error-email-domain-blacklisted': 'The email domain is blacklisted',
 	'error-email-send-failed': 'Error trying to send email: {{message}}',
+	'error-save-image': 'Error in saving image',
 	'error-field-unavailable': '{{field}} is already in use :(',
 	'error-file-too-large': 'File is too large',
 	'error-importer-not-defined': 'The importer was not defined correctly, it is missing the Import class.',
@@ -338,6 +339,7 @@ export default {
 	saving_preferences: 'saving preferences',
 	saving_profile: 'saving profile',
 	saving_settings: 'saving settings',
+	saved_to_gallery: 'Saved to gallery',
 	Search_Messages: 'Search Messages',
 	Search: 'Search',
 	Search_by: 'Search by',

ios/Podfile

@@ -37,6 +37,7 @@ target 'RocketChatRN' do
   use_native_modules!
   use_unimodules!
 
+
 end
 
 target 'ShareRocketChatRN' do

ios/Podfile.lock

@@ -286,6 +286,8 @@ PODS:
     - React
   - react-native-background-timer (2.1.1):
     - React
+  - react-native-cameraroll (1.3.0):
+    - React
   - react-native-document-picker (3.2.4):
     - React
   - react-native-jitsi-meet (2.0.3):
@@ -438,6 +440,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-appearance (from `../node_modules/react-native-appearance`)
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
+  - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-jitsi-meet (from `../node_modules/react-native-jitsi-meet`)
   - react-native-keyboard-input (from `../node_modules/react-native-keyboard-input`)
@@ -488,7 +491,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/CocoaPods/Specs.git:
+  trunk:
     - boost-for-react-native
     - Crashlytics
     - Fabric
@@ -569,6 +572,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-appearance"
   react-native-background-timer:
     :path: "../node_modules/react-native-background-timer"
+  react-native-cameraroll:
+    :path: "../node_modules/@react-native-community/cameraroll"
   react-native-document-picker:
     :path: "../node_modules/react-native-document-picker"
   react-native-jitsi-meet:
@@ -724,6 +729,7 @@ SPEC CHECKSUMS:
   React-jsinspector: a8939cc6909607eb5e8a5ecfff7c6226984e174d
   react-native-appearance: 368f9d1160e3f1d7ecb5945e704affe018deef46
   react-native-background-timer: 1b6e6b4e10f1b74c367a1fdc3c72b67c619b222b
+  react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
   react-native-document-picker: c36bf5f067a581657ecaf7124dcd921a8be19061
   react-native-jitsi-meet: 1ca89538b8ef3158bfd306d60325d7f11ca1451a
   react-native-keyboard-input: 2a01e0aceac330592bbe9b3101761bb9d8e6d1fb
@@ -775,6 +781,6 @@ SPEC CHECKSUMS:
   UMTaskManagerInterface: 8664abd37a00715727e60df9ecd65e42ba47b548
   Yoga: 02036f6383c0008edb7ef0773a0e6beb6ce82bd1
 
-PODFILE CHECKSUM: 18d0b080112c72e9cc76a381c1baba1172c6ca4d
+PODFILE CHECKSUM: c08b57d62003d02192f05926b3fce76ef3c71af4
 
 COCOAPODS: 1.8.4