Add ability to Share image from Status

Signed-off-by: Brian Sztamfater <brian@status.im>

Author: briansztamfater

android/app/src/main/java/im/status/ethereum/MainApplication.java

@@ -9,6 +9,7 @@
 
 import com.aakashns.reactnativedialogs.ReactNativeDialogsPackage;
 import com.facebook.react.ReactApplication;
+import cl.json.RNSharePackage;
 import com.facebook.react.ReactNativeHost;
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.react.NavigationReactNativeHost;

android/settings.gradle

@@ -1,4 +1,6 @@
 pluginManagement {
+include ':react-native-share'
+project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')
   repositories {
       mavenLocal() // Let's prioritize local Maven repos so that Nix can provide them offline
       gradlePluginPortal()

ios/Podfile

@@ -25,6 +25,8 @@ abstract_target 'Status' do
   pod 'secp256k1', git: "https://github.com/status-im/secp256k1.swift.git", submodules: true
 
   target 'StatusIm' do
+    pod 'RNShare', :path => '../node_modules/react-native-share'
+
     target 'StatusImTests' do
       inherit! :complete
       # Pods for testing

ios/Podfile.lock

@@ -2,7 +2,7 @@ PODS:
   - boost-for-react-native (1.63.0)
   - BVLinearGradient (2.5.6):
     - React
-  - CryptoSwift (1.3.8)
+  - CryptoSwift (1.4.1)
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.63.4)
   - FBReactNativeSpec (0.63.4):
@@ -224,7 +224,7 @@ PODS:
   - react-native-status-keycard (2.5.35):
     - Keycard
     - React
-  - react-native-webview (10.9.2):
+  - react-native-webview (11.3.0):
     - React-Core
   - React-RCTActionSheet (0.63.4):
     - React-Core/RCTActionSheetHeaders (= 0.63.4)
@@ -359,6 +359,8 @@ PODS:
     - React-RCTVibration
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNShare (7.0.1):
+    - React-Core
   - RNSVG (9.13.6):
     - React
   - secp256k1 (0.1.6)
@@ -367,7 +369,7 @@ PODS:
   - SQLCipher/common (3.4.2)
   - SQLCipher/standard (3.4.2):
     - SQLCipher/common
-  - SSZipArchive (2.2.3)
+  - SSZipArchive (2.4.2)
   - TOCropViewController (2.6.0)
   - TouchID (4.4.1):
     - React
@@ -435,6 +437,7 @@ DEPENDENCIES:
   - RNPermissions (from `../node_modules/react-native-permissions`)
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNShare (from `../node_modules/react-native-share`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - secp256k1 (from `https://github.com/status-im/secp256k1.swift.git`)
   - SQLCipher (~> 3.0)
@@ -569,6 +572,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-haptic-feedback"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
+  RNShare:
+    :path: "../node_modules/react-native-share"
   RNSVG:
     :path: "../node_modules/react-native-svg"
   secp256k1:
@@ -591,7 +596,7 @@ CHECKOUT OPTIONS:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
-  CryptoSwift: 01b0f0cba1d5c212e5a335ff6c054fb75a204f00
+  CryptoSwift: 0bc800a7e6a24c4fc9ebeab97d44b0d5f73a78bd
   DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
@@ -623,7 +628,7 @@ SPEC CHECKSUMS:
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   react-native-status: 45dbf1302ce3c258b459dfab137cd1c2c68c295d
   react-native-status-keycard: de55c01648d24ff7c17a77f3aa29a0421f44143c
-  react-native-webview: 4e96d493f9f90ba4f03b28933f30b2964df07e39
+  react-native-webview: af9990b21a9aeafa8e8347746eb4116c0de086af
   React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
   React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
   React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
@@ -650,14 +655,15 @@ SPEC CHECKSUMS:
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
   RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
+  RNShare: 2dc2fcac3f7321cfd6b60a23ed4bf4d549f86f5f
   RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
   secp256k1: f61d67e6fdcb85fd727acf1bf35ace6036db540c
   SQLCipher: f9fcf29b2e59ced7defc2a2bdd0ebe79b40d4990
-  SSZipArchive: 62d4947b08730e4cda640473b0066d209ff033c9
+  SSZipArchive: e7b4f3d9e780c2acc1764cd88fbf2de28f26e5b2
   TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
   TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
 
-PODFILE CHECKSUM: 27b3929c4d7f0b5afd76276d0bd4ae289ec11f18
+PODFILE CHECKSUM: 2769eb02c836ad1eaddf5f34a0c61153c4c5fbec
 
 COCOAPODS: 1.10.1

package.json

@@ -56,6 +56,7 @@
     "react-native-redash": "^16.0.11",
     "react-native-safe-area-context": "^2.0.0",
     "react-native-shake": "^3.3.1",
+    "react-native-share": "^7.0.1",
     "react-native-splash-screen": "^3.2.0",
     "react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#v2.5.35",
     "react-native-svg": "^9.8.4",

resources/images/icons/share_default@2x.png

@@ -3,66 +3,75 @@
             [status-im.ui.components.react :as react]
             [reagent.core :as reagent]
             [re-frame.core :as re-frame]
-            [quo.core :as quo]
             [quo.platform :as platform]
-            [status-im.i18n.i18n :as i18n]
             [status-im.ui.components.icons.icons :as icons]
-            [status-im.ui.screens.chat.sheets :as sheets]
             [quo.components.safe-area :as safe-area]
-            ["react-native-image-viewing" :default image-viewing]))
+            ["react-native-image-viewing" :default image-viewing]
+            [status-im.utils.share :as share]
+            [taoensso.timbre :as log]
+            [status-im.utils.fs :as fs]
+            [clojure.string :as string]))
 
-(defn footer-options []
-  (let [show-sheet (reagent/atom false)]
-    (fn [{:keys [message on-close]}]
+(def temp-image-url (str (fs/cache-dir) "/image.jpeg"))
+
+(defn share []
+  (share/open {:url (str (when platform/android? "file://") temp-image-url)
+               :type "image/jpeg"}
+              #(log/debug "image shared successfully")
+              #(log/error "could not share image")))
+
+(defn header-options []
+  (fn [{:keys [message on-close]}]
       ;; FIXME(Ferossgp): Bottom sheet doesn't work on Android because of https://github.com/software-mansion/react-native-gesture-handler/issues/139
-      (if platform/android?
-        [:<>
-         [react/touchable-opacity
-          {:on-press (fn []
-                       (on-close)
-                       (re-frame/dispatch [:chat.ui/save-image-to-gallery (get-in message [:content :image])]))
-           :style    {:background-color colors/black-transparent-86
-                      :border-radius    44
-                      :padding          8
-                      :position         :absolute
-                      :bottom           0
-                      :right            0}}
-          [icons/icon :main-icons/download {:container-style {:width  24
-                                                              :height 24}
-                                            :color           colors/white-persist}]]]
-        [:<>
-         [react/touchable-opacity
-          {:on-press #(reset! show-sheet true)
-           :style    {:background-color colors/black-transparent-86
-                      :border-radius    44
-                      :padding          8
-                      :position         :absolute
-                      :bottom           0
-                      :right            0}}
-          [icons/icon :main-icons/more {:container-style {:width  24
+    [react/view {:style {:flex-direction     :row
+                         :background-color   colors/black-transparent-86
+                         :border-radius      44
+                         :padding-vertical   8
+                         :padding-horizontal 12
+                         :position           :absolute
+                         :right              0}}
+     [react/touchable-opacity
+      {:on-press (fn []
+                   (on-close)
+                   (re-frame/dispatch [:chat.ui/save-image-to-gallery (get-in message [:content :image])]))
+       :style    {:margin-right 10}
+       :accessibility-label :save-button}
+      [icons/icon :main-icons/download {:container-style {:width  24
                                                           :height 24}
                                         :color           colors/white-persist}]]
-         ;; NOTE(Ferossgp): If we use global bottom sheet, then it is rendered under the preview
-         [quo/bottom-sheet {:visible?  @show-sheet
-                            :on-cancel #(reset! show-sheet false)}
-          [sheets/image-long-press message #(do (reset! show-sheet false)
-                                                (on-close))]]]))))
+     [react/touchable-opacity
+      {:on-press (fn []
+                   (fs/write-file
+                    temp-image-url
+                    (last (string/split (get-in message [:content :image]) ",")) "base64"
+                    #(share)
+                    #(log/error "error writing image to cache dir")))
+       :style    {:margin-left 10}
+       :accessibility-label :share-button}
+      [icons/icon :main-icons/share-default {:container-style {:width  24
+                                                               :height 24}
+                                             :color           colors/white-persist}]]]))
 
-(defn footer [{:keys [on-close] :as props}]
+(defn header [{:keys [on-close] :as props}]
   [safe-area/consumer
    (fn [insets]
-     [react/view {:style {:padding-horizontal 24
-                          :padding-bottom     (+ (:bottom insets) 8)}}
-      [react/view {:style {:justify-content :center
-                           :align-items     :center}}
+     [react/view {:style {:padding-horizontal 15
+                          :padding-top     (+ (:bottom insets) 50)}}
+      [react/view {:style {:justify-content :center}}
        [react/touchable-opacity {:on-press on-close
-                                 :style    {:background-color   colors/black-transparent-86
-                                            :padding-horizontal 24
-                                            :padding-vertical   11
-                                            :border-radius      44}}
-        [quo/text {:style {:color colors/white-persist}}
-         (i18n/label :t/close)]]
-       [footer-options props]]])])
+                                 :style    {:padding-vertical   11
+                                            :border-radius      44}
+                                 :accessibility-label :close-button}
+        [react/view {:style {:background-color colors/black-transparent-86
+                             :border-radius    20
+                             :width            40
+                             :height           40
+                             :justify-content  :center
+                             :align-items      :center}}
+         [icons/icon :main-icons/close {:container-style {:width            24
+                                                          :height           24}
+                                        :color           colors/white-persist}]]]
+       [header-options props]]])])
 
 (defn preview-image [{{:keys [content] :as message} :message
                       visible                       :visible
@@ -73,7 +82,7 @@
                      :hide-footer-on-zoom    false
                      :swipe-to-close-enabled platform/ios?
                      :presentation-style     "overFullScreen"
-                     :HeaderComponent        #(reagent/as-element [:<>]) ; NOTE: Keep it to remove default header
-                     :FooterComponent        #(reagent/as-element [footer {:on-close on-close
+                     :HeaderComponent        #(reagent/as-element [header {:on-close on-close
                                                                            :message  message}])
+                     :FooterComponent        #(reagent/as-element [:<>])
                      :visible                visible}])

resources/images/icons/share_default@3x.png

@@ -14,6 +14,11 @@
       (.then on-read)
       (.catch on-error)))
 
+(defn write-file [path content encoding on-write on-error]
+  (-> (.writeFile react-native-fs path content encoding)
+      (.then on-write)
+      (.catch on-error)))
+
 (defn read-dir [path]
   (.readDir react-native-fs path))
 
@@ -25,3 +30,6 @@
 
 (defn file-exists? [path]
   (.exists react-native-fs path))
+
+(defn cache-dir []
+  (.-CachesDirectoryPath ^js react-native-fs))

src/status_im/ui/screens/chat/image/preview/views.cljs

@@ -0,0 +1,8 @@
+(ns status-im.utils.share
+  (:require ["react-native-share" :default react-native-share]))
+
+(defn open [options on-success on-error]
+  (-> ^js react-native-share
+      (.open (clj->js options))
+      (.then on-success)
+      (.catch on-error)))