status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add ability to Share image from Status 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2021-08-30 19:51:19 -03:00
parent 85348306ce
commit 68ffddbb51
No known key found for this signature in database
GPG Key ID: 59EB921E0706B48F
11 changed files with 100 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
android/app/src/main/java/im/status/ethereum/MainApplication.java
View File

@ -9,6 +9,7 @@ import com.facebook.react.PackageList;
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;

2
android/settings.gradle
View File

@ -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()

2
ios/Podfile
View File

@ -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

20
ios/Podfile.lock
View File

@ -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

1
package.json
View File

@ -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",

BIN
resources/images/icons/share_default@2x.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 442 B

BIN
resources/images/icons/share_default@3x.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 647 B

111
src/status_im/ui/screens/chat/image/preview/views.cljs
View File

@ -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}])

8
src/status_im/utils/fs.cljs
View File

@ -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))

8
src/status_im/utils/share.cljs Normal file
View File

@ -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)))

5
yarn.lock
View File

@ -6725,6 +6725,11 @@ react-native-shake@^3.3.1:
dependencies:
invariant "^2.2.x"
react-native-share@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-7.0.1.tgz#1deef27afcd8275222ba0efeac337e7cea99bc4b"
integrity sha512-hq7nOirgih/zIF9UU9FuYKZ3NGvasu2c/eJesvyPKYiykTtgQZM+mvDwFk/ogEsGwRtTPJBtj8/6IyIFcGa7lw==
react-native-splash-screen@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.2.0.tgz#d47ec8557b1ba988ee3ea98d01463081b60fff45"