Merge pull request #1374 from esteemapp/feature/save-imag

Feature/save imag

ios/Podfile.lock

@@ -233,6 +233,8 @@ PODS:
     - React-cxxreact (= 0.61.2)
     - React-jsi (= 0.61.2)
   - React-jsinspector (0.61.2)
+  - react-native-cameraroll (1.3.0):
+    - React
   - react-native-config (0.11.7):
     - React
   - react-native-fast-image (4.0.14):
@@ -333,6 +335,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-fast-image (from `../node_modules/react-native-fast-image`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
@@ -416,6 +419,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-cameraroll:
+    :path: "../node_modules/@react-native-community/cameraroll"
   react-native-config:
     :path: "../node_modules/react-native-config"
   react-native-fast-image:
@@ -494,6 +499,7 @@ SPEC CHECKSUMS:
   React-jsi: 32285a21b1b24c36060493ed3057a34677d58d09
   React-jsiexecutor: 8909917ff7d8f21a57e443a866fd8d4560e50c65
   React-jsinspector: 111d7d342b07a904c400592e02a2b958f1098b60
+  react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
   react-native-config: 8f6b2b9e017f6a5e92a97353c768e19e67294bb1
   react-native-fast-image: 6d50167ad4d68b59640ceead8c2bc4e58d91d8bd
   react-native-netinfo: 6bb847e64f45a2d69c6173741111cfd95c669301

package.json

@@ -24,6 +24,8 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "@esteemapp/esteem-render-helpers": "^1.2.2",
+    "@ptomasroos/react-native-multi-slider": "^1.0.0",
+    "@react-native-community/cameraroll": "^1.3.0",
     "@esteemapp/react-native-autocomplete-input": "^4.2.1",
     "@esteemapp/react-native-multi-slider": "^1.1.0",
     "@react-native-community/netinfo": "^4.1.3",

src/components/postElements/body/view/postBodyView.js

@@ -1,5 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { Dimensions, Linking, Alert, Modal } from 'react-native';
+import CameraRoll from '@react-native-community/cameraroll';
 import { withNavigation } from 'react-navigation';
 import { useIntl, injectIntl } from 'react-intl';
 import AutoHeightWebView from 'react-native-autoheight-webview';
@@ -126,6 +127,23 @@ const PostBody = ({
     }
   };
 
+  const _saveImage = uri => {
+    CameraRoll.saveToCameraRoll(uri)
+      .then(() => {
+        Alert.alert(
+          intl.formatMessage({ id: 'alert.success' }),
+          intl.formatMessage({ id: 'post.image_saved' }),
+          [{ text: 'OK' }],
+          { cancelable: false },
+        );
+      })
+      .catch(error => {
+        Alert.alert(intl.formatMessage({ id: 'post.image_saved_error' }), error, [{ text: 'OK' }], {
+          cancelable: false,
+        });
+      });
+  };
+
   const html = body.replace(/<a/g, '<a target="_blank"');
   const customStyle = `
   * {
@@ -219,6 +237,11 @@ const PostBody = ({
           imageUrls={postImages}
           enableSwipeDown
           onCancel={() => setIsImageModalOpen(false)}
+          onSave={uri => _saveImage(uri)}
+          menuContext={{
+            saveToLocal: intl.formatMessage({ id: 'post.save_to_local' }),
+            cancel: intl.formatMessage({ id: 'alert.cancel' }),
+          }}
         />
       </Modal>
       <AutoHeightWebView

src/config/locales/en-US.json

@@ -289,7 +289,10 @@
     "copy_link": "Copy Link",
     "reblogged": "reblogged by",
     "sponsored": "SPONSORED",
-    "open_thread": "Open Thread"
+    "open_thread": "Open Thread",
+    "save_to_local": "Save to the album",
+    "image_saved": "Image Saved to Photo Gallery",
+    "image_saved_error": "Error Saving Image"
   },
   "drafts": {
     "title": "Drafts",

yarn.lock

@@ -1319,6 +1319,16 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@ptomasroos/react-native-multi-slider@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@ptomasroos/react-native-multi-slider/-/react-native-multi-slider-1.0.0.tgz#a4ea27b1320b93a1db9f696c24789695df6c9f30"
+  integrity sha512-NpX22rQLArg9widwMzGf7XsInTDf6mfY/D1XaDVjglNkVphj3NSN37+nF6MofArCxC++1P+jHv0SGWbmJQwy4g==
+
+"@react-native-community/cameraroll@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cameraroll/-/cameraroll-1.3.0.tgz#a340334440f4d08280da839130ef51c931b07483"
+  integrity sha512-QJl9N34euvGU7s/Gn6jhsqi70O4SmxFxuy+yBnW7ehE8qtPYO91gyLLrtiWdTfYvuVCUNvX/G0LKJQLm8SojAA==
+
 "@react-native-community/cli-debugger-ui@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-3.0.0.tgz#d01d08d1e5ddc1633d82c7d84d48fff07bd39416"
@@ -1327,11 +1337,11 @@
     serve-static "^1.13.1"
 
 "@react-native-community/cli-platform-android@^3.0.0-alpha.1":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-3.0.3.tgz#e652abce79a7c1e3a8280228123e99df2c4b97b6"
-  integrity sha512-rNO9DmRiVhB6aP2DVUjEJv7ecriTARDZND88ny3xNVUkrD1Y+zwF6aZu3eoT52VXOxLCSLiJzz19OiyGmfqxYg==
+  version "3.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-3.0.0-alpha.2.tgz#63cb00060c58a87d04b46229ef7140e056551dfa"
+  integrity sha512-9HxWvBiK29AJQjavug658rEWHXVsqdAdL7rzMK9+gOid5zFoHrb1GoIeJm3byEowNZvqoy09nVcQvrUea41kQQ==
   dependencies:
-    "@react-native-community/cli-tools" "^3.0.0"
+    "@react-native-community/cli-tools" "^2.8.3"
     chalk "^2.4.2"
     execa "^1.0.0"
     jetifier "^1.6.2"