first pass at share sheet integration

app/mobile/ios/Podfile.lock

@@ -429,6 +429,8 @@ PODS:
     - React-perflogger (= 0.71.3)
   - ReactNativeIncallManager (4.0.1):
     - React-Core
+  - rn-fetch-blob (0.12.0):
+    - React-Core
   - RNCClipboard (1.11.1):
     - React-Core
   - RNDeviceInfo (10.4.0):
@@ -482,6 +484,8 @@ PODS:
   - RNScreens (3.20.0):
     - React-Core
     - React-RCTImage
+  - RNShare (8.2.2):
+    - React-Core
   - RNVectorIcons (9.2.0):
     - React-Core
   - TOCropViewController (2.6.1)
@@ -531,6 +535,7 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - ReactNativeIncallManager (from `../node_modules/react-native-incall-manager`)
+  - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
@@ -539,6 +544,7 @@ DEPENDENCIES:
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNShare (from `../node_modules/react-native-share`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -642,6 +648,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   ReactNativeIncallManager:
     :path: "../node_modules/react-native-incall-manager"
+  rn-fetch-blob:
+    :path: "../node_modules/rn-fetch-blob"
   RNCClipboard:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNDeviceInfo:
@@ -658,6 +666,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNShare:
+    :path: "../node_modules/react-native-share"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -718,6 +728,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 7bf0dafc7b727d93c8cb94eb00a9d3753c446c3e
   ReactCommon: 5f9a24e64c1c3e2b719014f07cb2acf628983000
   ReactNativeIncallManager: 0d2cf9f4d50359728a30c08549762fe67a2efb81
+  rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
   RNCClipboard: 2834e1c4af68697089cdd455ee4a4cdd198fa7dd
   RNDeviceInfo: 749f2e049dcd79e2e44f134f66b73a06951b5066
   RNFBApp: 4f8ea53443d52c7db793234d2398a357fc6cfbf1
@@ -726,6 +737,7 @@ SPEC CHECKSUMS:
   RNImageCropPicker: 14fe1c29298fb4018f3186f455c475ab107da332
   RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
   RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
+  RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
   Yoga: 5ed1699acbba8863755998a4245daa200ff3817b

app/mobile/package.json

@@ -37,13 +37,15 @@
     "react-native-rsa-native": "^2.0.5",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "^3.20.0",
+    "react-native-share": "^8.2.2",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-vector-icons": "^9.2.0",
     "react-native-video": "^5.2.1",
     "react-native-webrtc": "^106.0.7",
     "react-native-wheel-color-picker": "^1.2.0",
     "react-router-dom": "^6.8.1",
-    "react-router-native": "^6.8.1"
+    "react-router-native": "^6.8.1",
+    "rn-fetch-blob": "^0.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -13,6 +13,8 @@ import { ImageAsset } from './imageAsset/ImageAsset';
 import { AudioAsset } from './audioAsset/AudioAsset';
 import { VideoAsset } from './videoAsset/VideoAsset';
 import Carousel from 'react-native-reanimated-carousel';
+import Share from 'react-native-share';
+import RNFetchBlob from "rn-fetch-blob";
 
 export function TopicItem({ item, focused, focus, hosting, remove, update, block, report, contentKey }) {
 
@@ -44,6 +46,38 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
     );
   }
 
+  const shareMessage = async () => {
+    console.log("SHARING!", item);
+
+    try {
+      const files = []
+      const fs = RNFetchBlob.fs;
+
+      const data = JSON.parse(item.detail.data)
+      const assets = data.assets || []
+      for (let i = 0; i < assets.length; i++) {
+        if (assets[i].image) {
+          const url = actions.getTopicAssetUrl(item.topicId, assets[i].image.full);
+          const blob = await RNFetchBlob.config({ fileCache: true }).fetch("GET", url);
+          const type = blob.respInfo.headers["Content-Type"];
+          const file = await blob.readFile("base64");
+          fs.unlink(blob.path());
+
+          files.push(`data:${type};base64,${file}`)
+        }
+      }
+      
+      Share.open({ urls: files, message: data.text })
+    }
+    catch(err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Share Message',
+        'Please try again.'
+      )
+    }
+  }
+
   const reportMessage = () => {
     Alert.alert(
       "Report Message",
@@ -178,6 +212,9 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
       </View>
       { focused && (
         <View style={styles.focused}>
+           <TouchableOpacity style={styles.icon} onPress={shareMessage}>
+            <MatIcons name="share-variant-outline" size={18} color={Colors.white} />
+          </TouchableOpacity>
           { state.editable && (
             <TouchableOpacity style={styles.icon} onPress={() => update(item.topicId, state.editType, state.editData)}>
               <AntIcons name="edit" size={24} color={Colors.white} />

app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js

@@ -237,6 +237,9 @@ export function useTopicItem(item, hosting, remove, contentKey) {
     setActive: (activeId) => {
       updateState({ activeId });
     },
+    getTopicAssetUrl: (topicId, assetId) => {
+      return conversation.actions.getTopicAssetUrl(topicId, assetId);
+    }
   };
 
   return { state, actions };

app/mobile/yarn.lock

@@ -2477,6 +2477,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base-64@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
+  integrity sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==
+
 base64-js@1.5.1, base64-js@^1.1.2, base64-js@^1.2.3, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
@@ -3921,6 +3926,18 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
+glob@7.0.6:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  integrity sha512-f8c0rE8JiCxpa52kWPAOa3ZaYEnzofDzCQLCn3Vdk0Z5OVLq3BsRFJI4S4ykpeVW6QMGBUkMeUpoEgWnMTnw5Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
@@ -6367,6 +6384,11 @@ react-native-screens@^3.20.0:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
+react-native-share@^8.2.2:
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-8.2.2.tgz#987d6f164afe57b089950dca42e0555f19045d27"
+  integrity sha512-kVCI/cT0GnuYUTXe6mAimrjrnt4VWoRfrWqJZjFeoYFqAyOEfos84RC4eZlZnOT5eVtmTXRIkor5vgSkKOlZhw==
+
 react-native-sqlite-storage@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/react-native-sqlite-storage/-/react-native-sqlite-storage-6.0.1.tgz"
@@ -6709,6 +6731,14 @@ rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
+rn-fetch-blob@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/rn-fetch-blob/-/rn-fetch-blob-0.12.0.tgz#ec610d2f9b3f1065556b58ab9c106eeb256f3cba"
+  integrity sha512-+QnR7AsJ14zqpVVUbzbtAjq0iI8c9tCg49tIoKO2ezjzRunN7YL6zFSFSWZm6d+mE/l9r+OeDM3jmb2tBb2WbA==
+  dependencies:
+    base-64 "0.1.0"
+    glob "7.0.6"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"