From 1421d1b65df8b70f57d4b59430e48fd372b255a0 Mon Sep 17 00:00:00 2001
From: myxmaster <sebi.mueller.83@gmail.com>
Date: Thu, 9 Jan 2025 22:54:38 +0100
Subject: [PATCH] added share feature (Receive screen only for now), enhanced
 CollapsedQR with icon-only mode

---
 components/CollapsedQR.tsx | 109 +++++++++++++++++++++++++++++++++++--
 components/ShareButton.tsx |  99 +++++++++++++++++++++++++++++++++
 locales/en.json            |   1 +
 package.json               |   2 +
 views/Receive.tsx          |  40 +++++++++-----
 yarn.lock                  |  46 ++++++++++++++++
 6 files changed, 278 insertions(+), 19 deletions(-)
 create mode 100644 components/ShareButton.tsx

diff --git a/components/CollapsedQR.tsx b/components/CollapsedQR.tsx
index 112460802..2f2d759d7 100644
--- a/components/CollapsedQR.tsx
+++ b/components/CollapsedQR.tsx
@@ -9,13 +9,14 @@ import {
     TouchableOpacity,
     TouchableWithoutFeedback
 } from 'react-native';
-import QRCode from 'react-native-qrcode-svg';
 
+import QRCode, { QRCodeProps } from 'react-native-qrcode-svg';
 import HCESession, { NFCContentType, NFCTagType4 } from 'react-native-hce';
 
 import Amount from './Amount';
 import Button from './Button';
 import CopyButton from './CopyButton';
+import ShareButton from './ShareButton';
 import { localeString } from './../utils/LocaleUtils';
 import { themeColor } from './../utils/ThemeUtils';
 import Touchable from './Touchable';
@@ -26,11 +27,36 @@ const defaultLogoWhite = require('../assets/images/icon-white.png');
 
 let simulation: any;
 
+type QRCodeElement = React.ElementRef<typeof QRCode>;
+
+interface ExtendedQRCodeProps
+    extends QRCodeProps,
+        React.RefAttributes<QRCodeElement> {
+    onLoad?: () => void;
+    parent?: CollapsedQR;
+}
+
 interface ValueTextProps {
     value: string;
     truncateLongValue?: boolean;
 }
 
+// Custom QR code component that forwards refs and handles component readiness
+// Sets qrReady state on first valid component mount to prevent remounting cycles
+const ForwardedQRCode = React.forwardRef<QRCodeElement, ExtendedQRCodeProps>(
+    (props, ref) => (
+        <QRCode
+            {...props}
+            getRef={(c) => {
+                if (c && c.toDataURL && !(ref as any).current) {
+                    (ref as any).current = c;
+                    props.parent?.setState({ qrReady: true });
+                }
+            }}
+        />
+    )
+) as React.FC<ExtendedQRCodeProps>;
+
 function ValueText({ value, truncateLongValue }: ValueTextProps) {
     const [state, setState] = React.useState<{
         numberOfValueLines: number | undefined;
@@ -64,6 +90,9 @@ interface CollapsedQRProps {
     collapseText?: string;
     copyText?: string;
     copyValue?: string;
+    copyIconContainerStyle?: any;
+    showShare?: boolean;
+    iconOnly?: boolean;
     hideText?: boolean;
     expanded?: boolean;
     textBottom?: boolean;
@@ -78,16 +107,22 @@ interface CollapsedQRState {
     collapsed: boolean;
     nfcBroadcast: boolean;
     enlargeQR: boolean;
+    tempQRRef: React.RefObject<QRCodeElement> | null;
+    qrReady: boolean;
 }
 
 export default class CollapsedQR extends React.Component<
     CollapsedQRProps,
     CollapsedQRState
 > {
+    qrRef = React.createRef<QRCodeElement>();
+
     state = {
         collapsed: this.props.expanded ? false : true,
         nfcBroadcast: false,
-        enlargeQR: false
+        enlargeQR: false,
+        tempQRRef: null,
+        qrReady: false
     };
 
     componentWillUnmount() {
@@ -134,13 +169,16 @@ export default class CollapsedQR extends React.Component<
     };
 
     render() {
-        const { collapsed, nfcBroadcast, enlargeQR } = this.state;
+        const { collapsed, nfcBroadcast, enlargeQR, tempQRRef } = this.state;
         const {
             value,
             showText,
             copyText,
             copyValue,
             collapseText,
+            copyIconContainerStyle,
+            showShare,
+            iconOnly,
             hideText,
             expanded,
             textBottom,
@@ -151,8 +189,42 @@ export default class CollapsedQR extends React.Component<
 
         const { width, height } = Dimensions.get('window');
 
+        // Creates a temporary QR code for sharing and waits for component to be ready
+        // Returns a promise that resolves when QR is fully rendered and ready to be captured
+        const handleShare = () =>
+            new Promise<void>((resolve) => {
+                const tempRef = React.createRef<QRCodeElement>();
+                this.setState({ tempQRRef: tempRef, qrReady: false }, () => {
+                    const checkReady = () => {
+                        if (this.state.qrReady) {
+                            resolve();
+                        } else {
+                            requestAnimationFrame(checkReady);
+                        }
+                    };
+                    checkReady();
+                });
+            });
+
         return (
             <React.Fragment>
+                {/* Temporary QR for sharing */}
+                {tempQRRef && (
+                    <View style={{ height: 0, width: 0, overflow: 'hidden' }}>
+                        <ForwardedQRCode
+                            ref={tempQRRef}
+                            value={value}
+                            size={800}
+                            logo={defaultLogo}
+                            backgroundColor={'white'}
+                            logoBackgroundColor={'white'}
+                            logoMargin={10}
+                            quietZone={40}
+                            parent={this}
+                        />
+                    </View>
+                )}
+
                 {satAmount != null && this.props.displayAmount && (
                     <View
                         style={{
@@ -277,7 +349,36 @@ export default class CollapsedQR extends React.Component<
                         onPress={() => this.toggleCollapse()}
                     />
                 )}
-                <CopyButton copyValue={copyValue || value} title={copyText} />
+                {showShare ? (
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            justifyContent: 'center'
+                        }}
+                    >
+                        <CopyButton
+                            copyIconContainerStyle={copyIconContainerStyle}
+                            copyValue={copyValue || value}
+                            title={copyText}
+                            iconOnly={iconOnly}
+                        />
+                        <ShareButton
+                            value={copyValue || value}
+                            qrRef={tempQRRef}
+                            iconOnly={iconOnly}
+                            onPress={handleShare}
+                            onShareComplete={() =>
+                                this.setState({ tempQRRef: null })
+                            }
+                        />
+                    </View>
+                ) : (
+                    <CopyButton
+                        copyValue={copyValue || value}
+                        title={copyText}
+                        iconOnly={iconOnly}
+                    />
+                )}
                 {Platform.OS === 'android' && this.props.nfcSupported && (
                     <Button
                         title={
diff --git a/components/ShareButton.tsx b/components/ShareButton.tsx
new file mode 100644
index 000000000..a169ae95e
--- /dev/null
+++ b/components/ShareButton.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+
+import QRCode from 'react-native-qrcode-svg';
+import { captureRef } from 'react-native-view-shot';
+import Share from 'react-native-share';
+import { Icon } from 'react-native-elements';
+
+import Button from './../components/Button';
+
+import { localeString } from './../utils/LocaleUtils';
+import { themeColor } from './../utils/ThemeUtils';
+
+type QRCodeElement = React.ElementRef<typeof QRCode>;
+
+interface ShareButtonProps {
+    value: string;
+    qrRef: React.RefObject<QRCodeElement> | null;
+    title?: string;
+    icon?: any;
+    noUppercase?: boolean;
+    iconOnly?: boolean;
+    onPress: () => Promise<void>;
+    onShareComplete?: () => void;
+}
+
+export default class ShareButton extends React.Component<ShareButtonProps> {
+    handlePress = async () => {
+        const { onPress } = this.props;
+        await onPress();
+        await this.shareContent();
+    };
+
+    shareContent = async () => {
+        const { value, qrRef, onShareComplete } = this.props;
+        try {
+            if (!qrRef?.current) {
+                return;
+            }
+
+            const svgElement = qrRef.current;
+            const base64Data = await captureRef(svgElement, {
+                format: 'png',
+                quality: 1
+            });
+
+            await Share.open({
+                message: value,
+                url: base64Data
+            });
+        } catch (error) {
+            // Share API throws error when share sheet closes, regardless of success
+            console.log('Error in shareContent:', error);
+        } finally {
+            onShareComplete?.();
+        }
+    };
+
+    render() {
+        const { title, icon, noUppercase, iconOnly } = this.props;
+
+        if (iconOnly) {
+            return (
+                <TouchableOpacity
+                    // "padding: 5" leads to a larger area where users can click on
+                    style={{ padding: 5 }}
+                    onPress={this.handlePress}
+                >
+                    <Icon
+                        name={'share'}
+                        size={27}
+                        color={themeColor('secondaryText')}
+                    />
+                </TouchableOpacity>
+            );
+        }
+
+        return (
+            <Button
+                title={title || localeString('general.share')}
+                icon={
+                    icon
+                        ? icon
+                        : {
+                              name: 'share',
+                              size: 25
+                          }
+                }
+                containerStyle={{
+                    marginTop: 10,
+                    marginBottom: Platform.OS === 'android' ? 0 : 20
+                }}
+                onPress={this.handlePress}
+                secondary
+                noUppercase={noUppercase}
+            />
+        );
+    }
+}
diff --git a/locales/en.json b/locales/en.json
index 088434822..a349e7333 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -21,6 +21,7 @@
     "general.close": "Close",
     "general.hide": "Hide",
     "general.copy": "Copy",
+    "general.share": "Share",
     "general.goBack": "Go Back",
     "general.lightning": "Lightning",
     "general.onchain": "On-chain",
diff --git a/package.json b/package.json
index b04d89fa9..2ac333f5b 100644
--- a/package.json
+++ b/package.json
@@ -120,6 +120,7 @@
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-securerandom": "1.0.1",
+    "react-native-share": "12.0.3",
     "react-native-svg": "15.3.0",
     "react-native-svg-transformer": "1.3.0",
     "react-native-system-navigation-bar": "2.6.4",
@@ -128,6 +129,7 @@
     "react-native-udp": "4.1.7",
     "react-native-v8": "0.61.5-patch.4",
     "react-native-vector-icons": "7.1.0",
+    "react-native-view-shot": "4.0.3",
     "react-native-vision-camera": "4.3.2",
     "readable-stream": "1.0.33",
     "sha.js": "2.4.11",
diff --git a/views/Receive.tsx b/views/Receive.tsx
index 442807a5b..1a2ca9bb9 100644
--- a/views/Receive.tsx
+++ b/views/Receive.tsx
@@ -1851,9 +1851,11 @@ export default class Receive extends React.Component<
                                             haveUnifiedInvoice && (
                                                 <CollapsedQR
                                                     value={unifiedInvoice || ''}
-                                                    copyText={localeString(
-                                                        'views.Receive.copyInvoice'
-                                                    )}
+                                                    iconOnly={true}
+                                                    copyIconContainerStyle={{
+                                                        marginRight: 40
+                                                    }}
+                                                    showShare={true}
                                                     expanded
                                                     textBottom
                                                     truncateLongValue
@@ -1881,9 +1883,11 @@ export default class Receive extends React.Component<
                                                     copyValue={
                                                         lnInvoiceCopyValue
                                                     }
-                                                    copyText={localeString(
-                                                        'views.Receive.copyInvoice'
-                                                    )}
+                                                    iconOnly={true}
+                                                    copyIconContainerStyle={{
+                                                        marginRight: 40
+                                                    }}
+                                                    showShare={true}
                                                     expanded
                                                     textBottom
                                                     truncateLongValue
@@ -1911,9 +1915,11 @@ export default class Receive extends React.Component<
                                                     copyValue={
                                                         btcAddressCopyValue
                                                     }
-                                                    copyText={localeString(
-                                                        'views.Receive.copyAddress'
-                                                    )}
+                                                    iconOnly={true}
+                                                    copyIconContainerStyle={{
+                                                        marginRight: 40
+                                                    }}
+                                                    showShare={true}
                                                     expanded
                                                     textBottom
                                                     truncateLongValue
@@ -1990,9 +1996,11 @@ export default class Receive extends React.Component<
                                             lightningAddress && (
                                                 <CollapsedQR
                                                     value={`lightning:${lightningAddress}`}
-                                                    copyText={localeString(
-                                                        'views.Receive.copyAddress'
-                                                    )}
+                                                    iconOnly={true}
+                                                    copyIconContainerStyle={{
+                                                        marginRight: 40
+                                                    }}
+                                                    showShare={true}
                                                     expanded
                                                     textBottom
                                                     hideText
@@ -2023,9 +2031,11 @@ export default class Receive extends React.Component<
                                                     copyValue={
                                                         lnInvoiceCopyValue
                                                     }
-                                                    copyText={localeString(
-                                                        'views.Receive.copyInvoice'
-                                                    )}
+                                                    iconOnly={true}
+                                                    copyIconContainerStyle={{
+                                                        marginRight: 40
+                                                    }}
+                                                    showShare={true}
                                                     expanded
                                                     textBottom
                                                     truncateLongValue
diff --git a/yarn.lock b/yarn.lock
index a00a7b618..0db1e63b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3963,6 +3963,11 @@ base-x@^4.0.0:
   resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
   integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@*, base64-js@^1.0.2, base64-js@^1.2.3, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -4773,6 +4778,13 @@ crypto-js@4.2.0:
   resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
   integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-select@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
@@ -6232,6 +6244,14 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 http-errors@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
@@ -9033,6 +9053,11 @@ react-native-securerandom@1.0.1:
   dependencies:
     base64-js "*"
 
+react-native-share@12.0.3:
+  version "12.0.3"
+  resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-12.0.3.tgz#1f2d6fc0c8f1e7ec9e75e0b4915bee78e06dce5b"
+  integrity sha512-Bg96AjouSbcpdlI/AzWXMBwpjyWcm4NvGr49mSF1cz8aw8E1sMXwpsHa6I841SJML8Im6sRN3aXnK+/QManrtQ==
+
 react-native-size-matters@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"
@@ -9109,6 +9134,13 @@ react-native-vector-icons@7.1.0:
     prop-types "^15.7.2"
     yargs "^15.0.2"
 
+react-native-view-shot@4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-4.0.3.tgz#9b98388fcc5228073cb66ac98ca339eda35767ac"
+  integrity sha512-USNjYmED7C0me02c1DxKA0074Hw+y/nxo+xJKlffMvfUWWzL5ELh/TJA/pTnVqFurIrzthZDPtDM7aBFJuhrHQ==
+  dependencies:
+    html2canvas "^1.4.1"
+
 react-native-vision-camera@4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-4.3.2.tgz#4acf80b62328275a69b22cd142f71a4e4aa2c12e"
@@ -10109,6 +10141,13 @@ text-encoding@0.7.0:
   resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.7.0.tgz#f895e836e45990624086601798ea98e8f36ee643"
   integrity sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -10445,6 +10484,13 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"