From a3a967755ae73ec64e683b5bbc3d233500d30514 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 9 May 2023 10:44:13 +0200
Subject: [PATCH 01/40] add qr code library

---
 ios/Podfile.lock  |  10 +-
 package-lock.json | 359 +++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |   3 +-
 3 files changed, 362 insertions(+), 10 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index e81f2d2c640c..b9c6d9359734 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -698,7 +698,7 @@ PODS:
   - RNScreens (3.17.0):
     - React-Core
     - React-RCTImage
-  - RNSVG (13.5.0):
+  - RNSVG (13.9.0):
     - React-Core
   - SDWebImage (5.11.1):
     - SDWebImage/Core (= 5.11.1)
@@ -1014,7 +1014,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Airship: c70eed50e429f97f5adb285423c7291fb7a032ae
   AirshipFrameworkProxy: 2eefb77bb77b5120b0f48814b0d44439aa3ad415
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  boost: 57d2868c099736d80fcd648bf211b4431e51a558
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: ff54429f0110d3c722630a98096ba689c39f6d5f
@@ -1057,7 +1057,7 @@ SPEC CHECKSUMS:
   Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4
   Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2
   PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
-  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
+  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: e9e7b8b45aa9bedb2fdad71740adf07a7265b9be
   RCTTypeSafety: 9ae0e9206625e995f0df4d5b9ddc94411929fb30
   React: a71c8e1380f07e01de721ccd52bcf9c03e81867d
@@ -1120,7 +1120,7 @@ SPEC CHECKSUMS:
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
   RNReanimated: fbc356493970e3acddc15586b1bccb5eab3ff1ec
   RNScreens: 0df01424e9e0ed7827200d6ed1087ddd06c493f9
-  RNSVG: 38ca962c970dbce1ca38991a5aebf26d163f9efb
+  RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
@@ -1129,4 +1129,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: cd132e281e9e3d7e6ec2c99c08e6ec32b37886f8
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.0
diff --git a/package-lock.json b/package-lock.json
index d64762c9172d..753689cb81e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,12 +83,13 @@
         "react-native-permissions": "^3.0.1",
         "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#107b3786ae6bc155dec05c7fc5ee525d3421dc21",
         "react-native-plaid-link-sdk": "^10.0.0",
+        "react-native-qrcode-svg": "^6.2.0",
         "react-native-quick-sqlite": "^8.0.0-beta.2",
         "react-native-reanimated": "3.0.0-rc.10",
         "react-native-render-html": "6.3.1",
         "react-native-safe-area-context": "4.4.1",
         "react-native-screens": "3.17.0",
-        "react-native-svg": "^13.5.0",
+        "react-native-svg": "^13.9.0",
         "react-native-web-lottie": "^1.4.4",
         "react-native-webview": "^11.17.2",
         "react-pdf": "5.7.2",
@@ -20873,6 +20874,11 @@
       "version": "4.12.0",
       "license": "MIT"
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
     "node_modules/dir-compare": {
       "version": "2.4.0",
       "dev": true,
@@ -21558,6 +21564,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "license": "MIT",
@@ -33762,6 +33773,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/pnp-webpack-plugin": {
       "version": "1.6.4",
       "dev": true,
@@ -34220,6 +34239,173 @@
       "version": "14.18.24",
       "license": "MIT"
     },
+    "node_modules/qrcode": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
+      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/qrcode/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.11.0",
       "dev": true,
@@ -34891,6 +35077,20 @@
         "react-native": ">=0.66.0"
       }
     },
+    "node_modules/react-native-qrcode-svg": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-qrcode-svg/-/react-native-qrcode-svg-6.2.0.tgz",
+      "integrity": "sha512-rb2PgUwT8QpQyReVYNvzRY84AHsMh81354Tnkfp6MfqRbcdJURhnBWLBOO11pLMS6eXiwlq4SkcQxy88hRq+Dw==",
+      "dependencies": {
+        "prop-types": "^15.8.0",
+        "qrcode": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": ">=0.63.4",
+        "react-native-svg": "^13.2.0"
+      }
+    },
     "node_modules/react-native-quick-sqlite": {
       "version": "8.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/react-native-quick-sqlite/-/react-native-quick-sqlite-8.0.0-beta.2.tgz",
@@ -34980,8 +35180,9 @@
       }
     },
     "node_modules/react-native-svg": {
-      "version": "13.5.0",
-      "license": "MIT",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.9.0.tgz",
+      "integrity": "sha512-Ey18POH0dA0ob/QiwCBVrxIiwflhYuw0P0hBlOHeY4J5cdbs8ngdKHeWC/Kt9+ryP6fNoEQ1PUgPYw2Bs/rp5Q==",
       "dependencies": {
         "css-select": "^5.1.0",
         "css-tree": "^1.1.3"
@@ -55334,6 +55535,11 @@
         }
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
     "dir-compare": {
       "version": "2.4.0",
       "dev": true,
@@ -55807,6 +56013,11 @@
     "emojis-list": {
       "version": "3.0.0"
     },
+    "encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
     "encodeurl": {
       "version": "1.0.2"
     },
@@ -63791,6 +64002,11 @@
         }
       }
     },
+    "pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+    },
     "pnp-webpack-plugin": {
       "version": "1.6.4",
       "dev": true,
@@ -64102,6 +64318,130 @@
       "version": "0.3.8",
       "dev": true
     },
+    "qrcode": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
+      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "requires": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.11.0",
       "dev": true,
@@ -64619,6 +64959,15 @@
       "integrity": "sha512-WqU44tYzQoR/cuufD6GI7vOWTLcL9RXuEqfGaCynHdh2rmj3SC+mSEmXpg/LG0Q4E1XivkjfgF9tAOdlbnLMHQ==",
       "requires": {}
     },
+    "react-native-qrcode-svg": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-qrcode-svg/-/react-native-qrcode-svg-6.2.0.tgz",
+      "integrity": "sha512-rb2PgUwT8QpQyReVYNvzRY84AHsMh81354Tnkfp6MfqRbcdJURhnBWLBOO11pLMS6eXiwlq4SkcQxy88hRq+Dw==",
+      "requires": {
+        "prop-types": "^15.8.0",
+        "qrcode": "^1.5.1"
+      }
+    },
     "react-native-quick-sqlite": {
       "version": "8.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/react-native-quick-sqlite/-/react-native-quick-sqlite-8.0.0-beta.2.tgz",
@@ -64681,7 +65030,9 @@
       }
     },
     "react-native-svg": {
-      "version": "13.5.0",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.9.0.tgz",
+      "integrity": "sha512-Ey18POH0dA0ob/QiwCBVrxIiwflhYuw0P0hBlOHeY4J5cdbs8ngdKHeWC/Kt9+ryP6fNoEQ1PUgPYw2Bs/rp5Q==",
       "requires": {
         "css-select": "^5.1.0",
         "css-tree": "^1.1.3"
diff --git a/package.json b/package.json
index 9598abd9edf7..227aacba04b1 100644
--- a/package.json
+++ b/package.json
@@ -116,12 +116,13 @@
     "react-native-permissions": "^3.0.1",
     "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#107b3786ae6bc155dec05c7fc5ee525d3421dc21",
     "react-native-plaid-link-sdk": "^10.0.0",
+    "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
     "react-native-reanimated": "3.0.0-rc.10",
     "react-native-render-html": "6.3.1",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "3.17.0",
-    "react-native-svg": "^13.5.0",
+    "react-native-svg": "^13.9.0",
     "react-native-web-lottie": "^1.4.4",
     "react-native-webview": "^11.17.2",
     "react-pdf": "5.7.2",

From fdca05ff67fb1cc9d007952203d9b2862df4e72b Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 9 May 2023 15:00:35 +0200
Subject: [PATCH 02/40] add ShareCodePage and add references to relevant files

---
 src/ROUTES.js                                 |  3 ++
 src/languages/en.js                           |  1 +
 src/languages/es.js                           |  1 +
 .../AppNavigator/ModalStackNavigators.js      | 14 ++++++
 src/libs/Navigation/linkingConfig.js          |  5 ++
 src/pages/ReportDetailsPage.js                |  7 +++
 src/pages/ShareCodePage.js                    | 50 +++++++++++++++++++
 src/pages/settings/Profile/ProfilePage.js     |  7 +++
 8 files changed, 88 insertions(+)
 create mode 100644 src/pages/ShareCodePage.js

diff --git a/src/ROUTES.js b/src/ROUTES.js
index b4ae96eb5967..77fa9946a596 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -25,6 +25,7 @@ export default {
     HOME: '',
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
+    SETTINGS_PROFILE_SHARE_CODE: 'settings/profile/shareCode',
     SETTINGS_DISPLAY_NAME: 'settings/profile/display-name',
     SETTINGS_TIMEZONE: 'settings/profile/timezone',
     SETTINGS_TIMEZONE_SELECT: 'settings/profile/timezone/select',
@@ -60,6 +61,8 @@ export default {
     REPORT,
     REPORT_WITH_ID: 'r/:reportID',
     getReportRoute: reportID => `r/${reportID}`,
+    REPORT_WITH_ID_DETAILS_SHARE_CODE: 'r/:reportID/details/shareCode',
+    getReportShareCodeRoute: reportID => `r/${reportID}/details/shareCode`,
     SELECT_YEAR: 'select-year',
     getYearSelectionRoute: (minYear, maxYear, currYear, backTo) => `select-year?min=${minYear}&max=${maxYear}&year=${currYear}&backTo=${backTo}`,
 
diff --git a/src/languages/en.js b/src/languages/en.js
index 3b48f890b05d..2c11821e32b8 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -134,6 +134,7 @@ export default {
         zipCodeExampleFormat: ({zipSampleFormat}) => (zipSampleFormat ? `e.g. ${zipSampleFormat}` : ''),
         description: 'Description',
         with: 'with',
+        shareCode: 'Share Code',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera access',
diff --git a/src/languages/es.js b/src/languages/es.js
index 1898baf8aced..cecdadc0a951 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -133,6 +133,7 @@ export default {
         zipCodeExampleFormat: ({zipSampleFormat}) => (zipSampleFormat ? `p. ej. ${zipSampleFormat}` : ''),
         description: 'Descripción',
         with: 'con',
+        shareCode: 'Compartir código',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Permiso para acceder a la cámara',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 87fb89dfdee6..d0fb2006cf05 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -150,6 +150,13 @@ const ReportDetailsModalStackNavigator = createModalStackNavigator([{
         return ReportDetailsPage;
     },
     name: 'Report_Details_Root',
+},
+{
+    getComponent: () => {
+        const ShareCodePage = require('../../../pages/ShareCodePage').default;
+        return ShareCodePage;
+    },
+    name: 'Report_Details_Share_Code',
 }]);
 
 const TaskModalStackNavigator = createModalStackNavigator([
@@ -285,6 +292,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Profile',
     },
+    {
+        getComponent: () => {
+            const ShareCodePage = require('../../../pages/ShareCodePage').default;
+            return ShareCodePage;
+        },
+        name: 'Settings_Profile_Share_Code',
+    },
     {
         getComponent: () => {
             const SettingsPronounsPage = require('../../../pages/settings/Profile/PronounsPage').default;
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 9ce9c763a4d1..4e4753aaf695 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -97,6 +97,10 @@ export default {
                         path: ROUTES.SETTINGS_PROFILE,
                         exact: true,
                     },
+                    Settings_Profile_Share_Code: {
+                        path: ROUTES.SETTINGS_PROFILE_SHARE_CODE,
+                        exact: true,
+                    },
                     Settings_Pronouns: {
                         path: ROUTES.SETTINGS_PRONOUNS,
                         exact: true,
@@ -193,6 +197,7 @@ export default {
             Report_Details: {
                 screens: {
                     Report_Details_Root: ROUTES.REPORT_WITH_ID_DETAILS,
+                    Report_Details_Share_Code: ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE,
                 },
             },
             Report_Settings: {
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 8dc81875fa6d..ed70d7c4c864 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -25,6 +25,7 @@ import CONST from '../CONST';
 import reportPropTypes from './reportPropTypes';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
 import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
+import Button from '../components/Button';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -147,6 +148,12 @@ class ReportDetailsPage extends Component {
                                     >
                                         {chatRoomSubtitle}
                                     </Text>
+
+                                    <Button
+                                        text={this.props.translate('common.shareCode')}
+                                        iconRight={Expensicons.Shield}
+                                        onPress={() => Navigation.navigate(ROUTES.getReportShareCodeRoute(this.props.report.reportID))}
+                                    />
                                 </View>
                             </View>
                         </View>
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
new file mode 100644
index 000000000000..1378df98a3eb
--- /dev/null
+++ b/src/pages/ShareCodePage.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import ScreenWrapper from '../components/ScreenWrapper';
+import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import Navigation from '../libs/Navigation/Navigation';
+import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
+import QRCode from '../components/QRCode';
+
+const propTypes = {
+    /** Navigation route context info provided by react navigation */
+    route: PropTypes.shape({
+        /** Route specific parameters used on this screen */
+        params: PropTypes.shape({
+            reportID: PropTypes.string,
+        }).isRequired,
+    }).isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+};
+
+// eslint-disable-next-line react/prefer-stateless-function
+class ShareCodePage extends React.Component {
+    render() {
+        return (
+            <ScreenWrapper>
+                <HeaderWithCloseButton
+                    title={this.props.translate('common.shareCode')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.goBack()}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+
+                <View>
+                    <QRCode />
+                </View>
+
+                <View />
+            </ScreenWrapper>
+        );
+    }
+}
+
+ShareCodePage.propTypes = propTypes;
+ShareCodePage.defaultProps = defaultProps;
+
+export default withLocalize(ShareCodePage);
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 88890bcd0f99..19151b16ea2b 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -23,6 +23,7 @@ import styles from '../../../styles/styles';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import ONYXKEYS from '../../../ONYXKEYS';
 import * as UserUtils from '../../../libs/UserUtils';
+import Button from '../../../components/Button';
 
 const propTypes = {
     /* Onyx Props */
@@ -103,6 +104,12 @@ const ProfilePage = (props) => {
                         anchorPosition={styles.createMenuPositionProfile}
                         size={CONST.AVATAR_SIZE.LARGE}
                     />
+
+                    <Button
+                        text={props.translate('common.shareCode')}
+                        iconRight={Expensicons.QRCode}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE_SHARE_CODE)}
+                    />
                 </OfflineWithFeedback>
                 <View style={[styles.mt4]}>
                     {_.map(profileSettingsOptions, (detail, index) => (

From 75fccc406c9dd910ae66ed6f52bb1bfb5f7ad0cc Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 9 May 2023 15:04:32 +0200
Subject: [PATCH 03/40] add QRShare component

---
 src/components/QRShare.js  | 49 ++++++++++++++++++++++++++++++++++++++
 src/pages/ShareCodePage.js |  4 ++--
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/components/QRShare.js

diff --git a/src/components/QRShare.js b/src/components/QRShare.js
new file mode 100644
index 000000000000..5918ced9e0d1
--- /dev/null
+++ b/src/components/QRShare.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import QRCodeLibrary from 'react-native-qrcode-svg';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+
+const propTypes = {
+    type: PropTypes.string,
+    value: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
+    logo: PropTypes.func,
+    download: PropTypes.func,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    type: undefined,
+    value: undefined,
+    logo: undefined,
+    download: undefined,
+};
+
+class QRShare extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.url = this.props.type === 'profile' ? `https://new.expensify.com/details?login=${this.props.value}` : `https://new.expensify.com/r/${this.props.value}`;
+
+        this.base64Logo = this.props.logo.toString('base64');
+    }
+
+    render() {
+        return (
+            <QRCodeLibrary
+                value={this.url}
+                logo={{uri: this.base64Logo}}
+                getRef={c => (this.svg = c)}
+                logoBackgroundColor="transparent"
+                logoSize={30}
+            />
+        );
+    }
+}
+QRShare.propTypes = propTypes;
+QRShare.defaultProps = defaultProps;
+
+export default withLocalize(React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <QRShare {...props} forwardedRef={ref} />
+)));
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 1378df98a3eb..cee07c99e482 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -5,7 +5,7 @@ import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
-import QRCode from '../components/QRCode';
+import QRShare from '../components/QRShare';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -35,7 +35,7 @@ class ShareCodePage extends React.Component {
                 />
 
                 <View>
-                    <QRCode />
+                    <QRShare />
                 </View>
 
                 <View />

From c036f17a9735032cf8c60f7cf0cb146dfbec3275 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 9 May 2023 15:58:16 +0200
Subject: [PATCH 04/40] add basic QR UI

---
 src/components/QRShare.js  | 35 +++++++++++++++++++++++++++--------
 src/pages/ShareCodePage.js | 25 ++++++++++++++++++++-----
 src/styles/styles.js       | 15 +++++++++++++++
 3 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/src/components/QRShare.js b/src/components/QRShare.js
index 5918ced9e0d1..700332b4d448 100644
--- a/src/components/QRShare.js
+++ b/src/components/QRShare.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import QRCodeLibrary from 'react-native-qrcode-svg';
+import {Dimensions, View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import defaultTheme from '../styles/themes/default';
+import styles from '../styles/styles';
+import Text from './Text';
 
 const propTypes = {
     type: PropTypes.string,
@@ -25,18 +29,33 @@ class QRShare extends React.Component {
 
         this.url = this.props.type === 'profile' ? `https://new.expensify.com/details?login=${this.props.value}` : `https://new.expensify.com/r/${this.props.value}`;
 
-        this.base64Logo = this.props.logo.toString('base64');
+        this.base64Logo = this.props.logo;
     }
 
     render() {
+        const screenWidth = Dimensions.get('window').width;
+
         return (
-            <QRCodeLibrary
-                value={this.url}
-                logo={{uri: this.base64Logo}}
-                getRef={c => (this.svg = c)}
-                logoBackgroundColor="transparent"
-                logoSize={30}
-            />
+            <View style={styles.shareCodeContainer}>
+                <Text family="EXP_NEUE_BOLD" fontSize={30} style={{marginBottom: 20}} color={defaultTheme.borderFocus}>Expensify</Text>
+
+                <QRCodeLibrary
+                    value={this.url}
+                    logo={this.base64Logo}
+                    getRef={c => (this.svg = c)}
+                    logoBackgroundColor="transparent"
+                    logoSize={screenWidth * 0.2}
+                    logoBorderRadius={screenWidth}
+                    logoMargin={200}
+                    size={screenWidth - 100}
+                    backgroundColor={defaultTheme.highlightBG}
+                    color={defaultTheme.text}
+                />
+
+                <Text family="EXP_NEW_KANSAS_MEDIUM" fontSize={25} style={{marginTop: 20}}>Shawn Borton</Text>
+
+                <Text family="EXP_NEUE_BOLD" fontSize={15} style={{marginBottom: 20}}>shawn@expensify.com</Text>
+            </View>
         );
     }
 }
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index cee07c99e482..cfde085d3847 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -6,6 +6,9 @@ import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import QRShare from '../components/QRShare';
+import compose from '../libs/compose';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails';
+import styles from '../styles/styles';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -17,14 +20,20 @@ const propTypes = {
     }).isRequired,
 
     ...withLocalizePropTypes,
+    ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
+    ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
 // eslint-disable-next-line react/prefer-stateless-function
 class ShareCodePage extends React.Component {
     render() {
+        // eslint-disable-next-line es/no-optional-chaining
+        const reportId = this.props.route?.params?.reportID;
+        const isReport = reportId != null;
+
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
@@ -34,11 +43,14 @@ class ShareCodePage extends React.Component {
                     onCloseButtonPress={() => Navigation.dismissModal(true)}
                 />
 
-                <View>
-                    <QRShare />
+                <View style={styles.shareCodePage}>
+                    <QRShare
+                        type={isReport ? 'report' : 'profile'}
+                        value={isReport ? reportId : this.props.currentUserPersonalDetails.email}
+                        logo={isReport ? undefined : this.props.currentUserPersonalDetails.avatar}
+                        download={() => null}
+                    />
                 </View>
-
-                <View />
             </ScreenWrapper>
         );
     }
@@ -47,4 +59,7 @@ class ShareCodePage extends React.Component {
 ShareCodePage.propTypes = propTypes;
 ShareCodePage.defaultProps = defaultProps;
 
-export default withLocalize(ShareCodePage);
+export default compose(
+    withLocalize,
+    withCurrentUserPersonalDetails,
+)(ShareCodePage);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 52f6c5447cab..14095b75e309 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3192,6 +3192,21 @@ const styles = {
     contextMenuItemPopoverMaxWidth: {
         maxWidth: 375,
     },
+
+    shareCodePage: {
+        alignItems: 'center',
+    },
+
+    shareCodeContainer: {
+        alignItems: 'center',
+        paddingHorizontal: 30,
+        paddingVertical: 20,
+        marginHorizontal: 30,
+        borderRadius: 20,
+        borderColor: themeColors.borderFocus,
+        borderWidth: 3,
+        backgroundColor: themeColors.highlightBG,
+    },
 };
 
 export default styles;

From 7d1fc59f2f591d7216f9f82aad736df1279e778f Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 9 May 2023 18:19:09 +0200
Subject: [PATCH 05/40] add react-native-qrcode-svg to "includeModules" in
 webpack config

---
 config/webpack/webpack.common.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 59b34693b267..ce628096e24a 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -23,6 +23,7 @@ const includeModules = [
     'react-native-flipper',
     'react-native-google-places-autocomplete',
     '@react-navigation/drawer',
+    'react-native-qrcode-svg',
 ].join('|');
 
 const envToLogoSuffixMap = {

From 281a8bea4ffdaa1ddd995e952faf91802f38a712 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 9 May 2023 18:59:33 +0200
Subject: [PATCH 06/40] re-structure QRShare component

---
 src/components/QRShare.js | 38 +++++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/QRShare.js b/src/components/QRShare.js
index 700332b4d448..9a4463f53e40 100644
--- a/src/components/QRShare.js
+++ b/src/components/QRShare.js
@@ -6,19 +6,24 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import defaultTheme from '../styles/themes/default';
 import styles from '../styles/styles';
 import Text from './Text';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import compose from '../libs/compose';
+import variables from '../styles/variables';
 
 const propTypes = {
-    type: PropTypes.string,
-    value: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
+    type: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
     logo: PropTypes.func,
     download: PropTypes.func,
 
+    ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
-    type: undefined,
-    value: undefined,
+    subtitle: undefined,
     logo: undefined,
     download: undefined,
 };
@@ -27,34 +32,34 @@ class QRShare extends React.Component {
     constructor(props) {
         super(props);
 
-        this.url = this.props.type === 'profile' ? `https://new.expensify.com/details?login=${this.props.value}` : `https://new.expensify.com/r/${this.props.value}`;
+        this.size = (this.props.isSmallScreenWidth ? variables.sideBarWidth : Dimensions.get('window').width) - 100;
 
-        this.base64Logo = this.props.logo;
+        this.url = this.props.type === 'profile' ? `https://new.expensify.com/details?login=${this.props.value}` : `https://new.expensify.com/r/${this.props.value}`;
     }
 
     render() {
-        const screenWidth = Dimensions.get('window').width;
-
         return (
             <View style={styles.shareCodeContainer}>
                 <Text family="EXP_NEUE_BOLD" fontSize={30} style={{marginBottom: 20}} color={defaultTheme.borderFocus}>Expensify</Text>
 
                 <QRCodeLibrary
                     value={this.url}
-                    logo={this.base64Logo}
+                    logo={this.props.logo}
                     getRef={c => (this.svg = c)}
                     logoBackgroundColor="transparent"
-                    logoSize={screenWidth * 0.2}
-                    logoBorderRadius={screenWidth}
+                    logoSize={this.size * 0.3}
+                    logoBorderRadius={this.size}
                     logoMargin={200}
-                    size={screenWidth - 100}
+                    size={this.size}
                     backgroundColor={defaultTheme.highlightBG}
                     color={defaultTheme.text}
                 />
 
-                <Text family="EXP_NEW_KANSAS_MEDIUM" fontSize={25} style={{marginTop: 20}}>Shawn Borton</Text>
+                <Text family="EXP_NEW_KANSAS_MEDIUM" fontSize={25} style={{marginTop: 20}}>{this.props.title}</Text>
 
-                <Text family="EXP_NEUE_BOLD" fontSize={15} style={{marginBottom: 20}}>shawn@expensify.com</Text>
+                {this.props.subtitle && (
+                <Text family="EXP_NEUE_BOLD" fontSize={15} style={{marginBottom: 20}}>{this.props.subtitle}</Text>
+                )}
             </View>
         );
     }
@@ -62,7 +67,10 @@ class QRShare extends React.Component {
 QRShare.propTypes = propTypes;
 QRShare.defaultProps = defaultProps;
 
-export default withLocalize(React.forwardRef((props, ref) => (
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+)(React.forwardRef((props, ref) => (
     /* eslint-disable-next-line react/jsx-props-no-spreading */
     <QRShare {...props} forwardedRef={ref} />
 )));

From fe000c04cd3cd4b98ca38e804d47e2e06cc873a6 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 9 May 2023 19:00:16 +0200
Subject: [PATCH 07/40] update ShareCodePage

---
 src/pages/ShareCodePage.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index cfde085d3847..eaf00a5cbed1 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -1,14 +1,18 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import QRShare from '../components/QRShare';
 import compose from '../libs/compose';
+import reportPropTypes from './reportPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails';
 import styles from '../styles/styles';
+import roomAvatar from '../../assets/images/avatars/room.svg';
+import ONYXKEYS from '../ONYXKEYS';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -19,11 +23,15 @@ const propTypes = {
         }).isRequired,
     }).isRequired,
 
+    /** The report currently being looked at */
+    report: reportPropTypes,
+
     ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
+    report: undefined,
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
@@ -32,7 +40,7 @@ class ShareCodePage extends React.Component {
     render() {
         // eslint-disable-next-line es/no-optional-chaining
         const reportId = this.props.route?.params?.reportID;
-        const isReport = reportId != null;
+        const isReport = this.props.report != null && this.props.report.reportID != null;
 
         return (
             <ScreenWrapper>
@@ -46,8 +54,10 @@ class ShareCodePage extends React.Component {
                 <View style={styles.shareCodePage}>
                     <QRShare
                         type={isReport ? 'report' : 'profile'}
-                        value={isReport ? reportId : this.props.currentUserPersonalDetails.email}
-                        logo={isReport ? undefined : this.props.currentUserPersonalDetails.avatar}
+                        value={isReport ? reportId : this.props.session.email}
+                        title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
+                        subtitle={isReport ? undefined : this.props.session.email}
+                        logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}
                         download={() => null}
                     />
                 </View>
@@ -61,5 +71,11 @@ ShareCodePage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
+    withOnyx({
+        report: {
+            // eslint-disable-next-line es/no-optional-chaining
+            key: ({route}) => (route.params?.reportId != null ? `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}` : undefined),
+        },
+    }),
     withCurrentUserPersonalDetails,
 )(ShareCodePage);

From fdd347363fae45902fd5be1020a7144f30d9fb17 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 18:07:16 +0200
Subject: [PATCH 08/40] finish implementing qr share card

---
 assets/images/avatars/room.png             | Bin 0 -> 3032 bytes
 assets/images/expensify_wordmark_white.svg |  26 +++++++++++++
 src/components/QRShare.js                  |  43 ++++++++++++++++-----
 src/pages/ShareCodePage.js                 |  15 +++----
 src/styles/styles.js                       |   9 +++--
 5 files changed, 69 insertions(+), 24 deletions(-)
 create mode 100644 assets/images/avatars/room.png
 create mode 100644 assets/images/expensify_wordmark_white.svg

diff --git a/assets/images/avatars/room.png b/assets/images/avatars/room.png
new file mode 100644
index 0000000000000000000000000000000000000000..dca457fbfdf7f227d98e147777ef9ad3072322b9
GIT binary patch
literal 3032
zcmV;}3n%o6P)<h;3K|Lk000e1NJLTq003kF003kN1^@s6aN?Cz00009a7bBm0017r
z0017r0mErjQvd(}8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H13uQ?}
zK~#90?VW3I73CSnf6wk7Ab|kRD0c!83$(%vkjijZixoTdLpv%{>!n4F45M6<kYJr@
zC$&_Npa*FM5rI*x&M5f778N_ONI@JgpylpxzXXD!5R#C~Is5cO4oH#{axS}jPIB`5
zbawZBpXbT`v$yy1yh4(*VA-;3tWLFq#kPkkG6WccXfIT{D0C6H2Iw3rUa9cCKn0=|
zsGJ7&3%XwoW1l6uKX+R0xy1c7EhC8zpfSbEi+iZgcQc~5iRuK9pEzk>;gG;qQMLpz
z-<_8;>x7f`<0UBs@vrt@A5b1Zxf>Yfp=$+pBdoK8wYd-F9`ew4SP~}4!W9d<S!Tz3
z6dnX7Br=u|3TzR0H4v<M>xt=4oKHj$o}YxLS1-NJ7YsgzFdOLZwf_jIKy<Z@@0ocI
z&n)%Qv1fuTS-GTVooFsF6G->UZ=BSq@QNw+{QQUVk9*<JbwQqc^SQJ@IZp~w0CaTQ
zpG(vrEHX26LEhB7i*7n{Rgh<2etxoz{Q@w=O+Q|ta0s<$7Utx?>y{5!1Swu#+yl$^
zBBH-`!+sL*Hg$m+1v3iHIBnQ*K^Cok?q;#&b)b*awv!6sjM#Gj+?+Z8cGj#zsH!Yp
z^?V`dUjfr8yGc$EW&VI}eg86b>eQeU1|1Q^zsBD^5a2C@+nli13i%)yteNV>w@ciD
zELyXumjr$90VCqI)ymmr`t**x-{qZ*$4Fd)6tDbS783XXxFH@pZ3TfNV%t;lAI<+d
z4jZwt=q3LM4Bi*$8LN%9h(ehu_LTgG^S_FveoTTaTCsGHnD!RXUa{0q0lu+CCeC|!
z&i-gC8qroLUS8Zo%;0<NVqBH$47K0$ukiPdwqjI*EPZWhSA4$rfgeTdDD{x6I)jZ1
zmMyy`npzQmFBBCO8Ae)%e<F;JKDg9Ggr0^O965f}*w;60+N6=xiTDcX+`ro&Q}{b0
z9&Yc_ultjc7LMql9%>FLA$7jMoyImWZqI*Yc1cSGTNI>td2tVX)(+Zw+my>FlwsD5
zD4bS!`fBA`zGYdy7ikwGZUlNt(E57><(g;lOG~Dxq3=5vRy)9*1&`!zXzpOMg4Fl)
z$u5EG-H9t@Iaq0)A67K2s5;!iW^Y;b-LCCoxWJ&!fo@MUcQEV~^32Mm{R{~np!N2F
zCpl7W`s^FRwG4;7LJT9&ng=Ab0<=@0&d3jUq{$T$dd)pd>lv!kTB)Kgkkz<fzUdX>
zv+`&c!wb^!S#uiiY;c7vT(Pj5X?8pYboDH(FbvAfBKyWs^zP9MpXGDZc3oW^r@lGO
z=exFZ==fnrZO1@)Fj$j$W!JBD<x$h>G!@l^iZLO39Aid|cFn%e=OeREe=_^@=aVl#
zWy=>IyXGqbx|&v}yMa}gb~L<YsXpL!L{~B>Gs{&m8Z&0ZXs+*{<(a>**bUG5WkD9K
z@eiba6netQ9yZEzpFd52&jtvS{Hy(!zxOT+Vg>j;37!(r`&#ciA$why@F4*b2y)-0
zjUR4V!d(do=L&p2XCL5^(81TibDxb-xaZPu147>(aAU$EN^wLOwq)g!o)8j5ENe1}
zpTU&MNG;p~Awg{6X9*3b9Ypk2xO9cUt%(h%9bhtm;a}tL4h%|gFzvt%{x$yYh8?hn
zCOVRK>ZuLtU`s`kX1dv@|N9((v`%RZ=+mFBUEFEKDX%E!Xz6h-R=YY~FltO>h!sj#
zkrZtHY|G`}BEpXc4Q2A!Tj<!qnXZ|d+8Ro>ZDQ}ieW*q>Zp~8^hFB!&giKXs&w;(1
zIeUhC@0=R9C^fY;yz#F$`S$y>4n^n&I@AE79uVv$-+q6Vl5Lyfwo|fgQ<94TAiWGA
zBhg{B#NLDZD6c4wxqf*?IeQQ8b1)*;$goI|An9r8Wc3?J=d^SxFII8*#1X14R)sCA
zsvIpn&hWvpweB1(J$}_^Ml`XwizY^pn}%mIK6@;d`9uF$AQ)il7u)!3=NDn?oWBtJ
ze9EiUjU^WMkPHLp;-$-*hG%p0=!p$Z0Dxs$+&p?BHx17YTW`;Sy_`MwUDW>0p8JkH
z2lhG|i;HAfEtheQ^t5!wXOF#Vneo|U*?nMdlUqi4#Rb-^e>Ev$aT5cm@XA?MzkyBu
z8yjPp7Fm4<q*N?daKQjBc;zjlb7XhN?p@taqt!j5TSVnDx_J4BRc{3`jL0Tz_37dM
zr%|LnB8}M@#9KikWkBCd#*G?7dYbd&_0rSQ88>PS1Nvq<ZrcGaSiq@7M-h&3BgZgq
z<d{T<;W2vJ0HU7U-i}+yK0{E?1hH+~D_4%;Wy}Km4N>m|xlrlZ8@6LysPOI)8$|aT
zhGlrx>UQMhQG&K3dA>Zswr!4<dXkJ3fDWd7ZG>{6AN0auWmP3Rc7N%GD@WMAdj}O&
zo?X=ka;N2<3%z9PhhBNz{P|W&%aZcNt^uWGr`Y`YRxe$aKxjIGsQgET951}uw#_>q
zZs37m-Am`R&SA@(EGy+?nY#(4`}XWZ-=5*8-&bC&<ed*Uc>59}^%sQ&pn*UMK1=av
z^kPL-1@Dw>;5Wa#2a%>OkCq<e<L#fg8pF6zW5Noes=QOO!OL3}fck9XBM1$Y3(a%e
z?PUZf%Szd?H>RX(uCim#SFT^3Vc0n*XHFS39R0q|>nOH<v5lJA8n4|pOHFMJTeolX
z-m(60?k@`xFnERfB^x}WrnV*-=J{Rb(DB2G_y<wT<R6zd8r;B(U-oYXCVCl7R=<Jt
z@7=G#zN06PakTW9t9}Rc$!yZVc>L4}4xc#Us^2Ck9~I=}-g0TPVGoVST2wt1<nW0j
z-k${OUmV;PJt7QQ+hFs`jbNbqO(6F1Htj@9c`#7j;Mv_kkkEYT<(`I=+Pu&>J$aMv
zFbM`11C^eIl)6+=7g*AGXA?o@PM`ZNqN^J3Z^v<747dJB*bZacwu*t|`9NrMNVP52
zv*C_}6=Yt{tP==}+zl#)5nb5a>Tk^ssW3Bi0UkBWrx*t-jq}emcd%JO@}}lp6k8s1
zC#IBUc60d_p@lTDb03|v5qR72kWv<1f3=LH5J}$Ny1)#;^XAXChC-Q|fyY}a*P<W=
zGYZbAp}z%MPiJ`YVVfBDwUpHwB230#_)y+Qf;<&}Tq%n3r%3X?LlmncRGc_BANU~V
zpi&iKW97;73nDKb1xsIB+O?+I-UK=_>cCPERd)I;CWS`!L_}0WyJy`$tGv!IrT{Uo
zLY68h9Kx!*JsL5feNiyC_{Om939&4n7t`d2!s)XPs;$3JD2t_jTSlSG5c}t`u4U-N
z!jc<lUnDGq9yV;fBc6pN<C-2+kTdhJnst*vcEn?+jj+q~F)<!7AWlI53a1sG4hE}l
zC6!-^g^e9Mnd9SK2e;moL#V1eyUIUHkz&C6^rDF&h%&$O<oTzHii#W=ck1}i(Zw$>
znWX3&wDonXTw37X@hPTrADOe6y1+=#^-kMP9&|mmf#FVz0WJ@&E?(*X8HT)oYFkMo
zcu>`zRhX0iu3HXVorGPGllx(%ac(5apFx`Klu3T18lkAtJU`4$F~Gy*$)S~d@_?DN
zo&{qn5nW|kEOO!vDiS=;X1#dD;%n6~A4ixCxSvBKHYyNZZ3Sdu?(|$wr+XzVz4*cv
z3%i+Cr@K*okop1MiB5H{z<&{WH5jN~*LXysS0wr*0QF5UBEbg~y$cwQcX27O6J=e%
zV(lNM<sR|KZ?hzYAXoDA>ZR9Nwtb6;Jpq;RfTLN&6b=b&6=jRjK{t5yY>1Sk6QnWz
zHU93kK^-h&3>DR(po2kr0bLX_r2aW{DeqH-!a1o=s8a!YTGiN(!G2YHUk6jZj<$co
aYyJ;e`1G!C8oU?)0000<MNUMnLSTYLjmFFX

literal 0
HcmV?d00001

diff --git a/assets/images/expensify_wordmark_white.svg b/assets/images/expensify_wordmark_white.svg
new file mode 100644
index 000000000000..1ad7640b2602
--- /dev/null
+++ b/assets/images/expensify_wordmark_white.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 313 70" style="enable-background:new 0 0 313 70;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M0,56.4h34V46.2H12.5v-9.5h18.2V26.2H12.5v-9H34V7H0V56.4z"/>
+<path class="st0" d="M101.1,17.2c-5.2,0-8.7,1.5-11.7,5.7h-0.2l-1.5-4.7h-9v51.4h11.7V53.4h0.2c2.2,2.5,5.5,3.7,10,3.7
+	c10.5,0,18-8.7,18-19.5v-1.5C118.6,24.5,109.9,17.2,101.1,17.2z M98.1,47.7c-5.5,0-8-4.5-8-10.5c0-5.7,2.5-10.2,8-10.2s8,4.7,8,10.5
+	C106.1,43.2,103.4,47.7,98.1,47.7z"/>
+<path class="st0" d="M158.8,36.2c0-12.7-9-19-18.7-19c-11,0-19.5,7.7-19.5,19.7v1.2c0,12.2,9.2,19.5,20,19.5c8.7,0,16.5-4.2,18.2-13
+	h-11.2c-1.2,3-3.7,4-6.7,4c-5,0-7.7-3.5-8.2-8.2h26C158.5,39.4,158.8,37.7,158.8,36.2z M132.8,32.7c0.5-4,3-7,7.5-7
+	c4,0,6.7,2.7,6.7,7H132.8L132.8,32.7z"/>
+<path class="st0" d="M183.5,17.2c-4.7,0-8.5,1.7-11.2,6H172l-1.5-5h-9.2v38h12v-22c0-4.7,2.2-7.2,6.2-7.2c3.2,0,5.7,2,5.7,7.2v22h12
+	V30.7C197.2,23.5,193,17.2,183.5,17.2z"/>
+<path class="st0" d="M215.2,32c-2-0.5-3.5-1.2-3.5-3.5c0-1.7,1.2-3,4-3c3,0,4.5,1.5,4.5,4h10.7v-0.7c0-8-7.2-11.2-15.5-11.2
+	c-7.2,0-15.5,3-15.5,12V30c0,2.7,1,5.2,2.7,7c3.7,3.7,9.5,4.2,13.5,5.2c3.2,0.7,4,2.2,4,4c0,2.2-1.7,3.5-4.5,3.5
+	c-3.2,0-5.2-1.7-5.5-5.5h-10.7v0.7c0.5,9.2,7.5,12.7,16.2,12.7c7.7,0,16.2-3.5,16.2-12.5v-1c0-2.7-1-5.2-2.5-7
+	C226,33.2,220,32.7,215.2,32z"/>
+<path class="st0" d="M246.4,18.5h-12v38h12V18.5z"/>
+<path class="st0" d="M76.2,18.5H62.9L56.7,28l-6.5-9.5H36.7l12.7,17.7L35,56.4h13.2l8-11.5l8,11.5h13.7L63.2,36L76.2,18.5z"/>
+<path class="st0" d="M240.4,0c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C247.7,3.2,244.4,0,240.4,0z"/>
+<path class="st0" d="M267.9,18.5v-1.2c0-3.2,2.2-6.5,5.7-6.5c0.5,0,3.5,0,3.5,0V0.2h-4.2c-10.2,0.2-17,8-17,17.7v0.5h-7v9h7v28.7h12
+	V27.5h7.7l10,26.2l-7,16.2h12.5l21.2-51.4h-12.5l-8.2,22.7l-7.5-22.7H267.9z"/>
+</svg>
diff --git a/src/components/QRShare.js b/src/components/QRShare.js
index 9a4463f53e40..c7f0814ad95e 100644
--- a/src/components/QRShare.js
+++ b/src/components/QRShare.js
@@ -9,6 +9,7 @@ import Text from './Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
 import variables from '../styles/variables';
+import ExpensifyWordmark from '../../assets/images/expensify-wordmark.svg';
 
 const propTypes = {
     type: PropTypes.string.isRequired,
@@ -32,33 +33,55 @@ class QRShare extends React.Component {
     constructor(props) {
         super(props);
 
-        this.size = (this.props.isSmallScreenWidth ? variables.sideBarWidth : Dimensions.get('window').width) - 100;
+        const defaultQrCodeSize = this.props.isSmallScreenWidth ? (Dimensions.get('window').width) - 75 : variables.sideBarWidth;
+
+        this.state = {
+            qrCodeSize: defaultQrCodeSize,
+        };
 
         this.url = this.props.type === 'profile' ? `https://new.expensify.com/details?login=${this.props.value}` : `https://new.expensify.com/r/${this.props.value}`;
+
+        this.onLayout = this.onLayout.bind(this);
+    }
+
+    onLayout = (event) => {
+        this.setState({
+            qrCodeSize: event.nativeEvent.layout.width - 64,
+        });
     }
 
     render() {
         return (
-            <View style={styles.shareCodeContainer}>
-                <Text family="EXP_NEUE_BOLD" fontSize={30} style={{marginBottom: 20}} color={defaultTheme.borderFocus}>Expensify</Text>
-
+            <View style={styles.shareCodeContainer} onLayout={this.onLayout}>
+                <View style={{
+                    alignSelf: 'stretch',
+                    height: 27,
+                    marginBottom: 20,
+                }}
+                >
+                    <ExpensifyWordmark
+                        fill={defaultTheme.borderFocus}
+                        width="100%"
+                        height="100%"
+                        resizeMode="fill"
+                    />
+                </View>
                 <QRCodeLibrary
                     value={this.url}
                     logo={this.props.logo}
                     getRef={c => (this.svg = c)}
                     logoBackgroundColor="transparent"
-                    logoSize={this.size * 0.3}
-                    logoBorderRadius={this.size}
-                    logoMargin={200}
-                    size={this.size}
+                    logoSize={this.state.qrCodeSize * 0.3}
+                    logoBorderRadius={this.state.qrCodeSize}
+                    size={this.state.qrCodeSize}
                     backgroundColor={defaultTheme.highlightBG}
                     color={defaultTheme.text}
                 />
 
-                <Text family="EXP_NEW_KANSAS_MEDIUM" fontSize={25} style={{marginTop: 20}}>{this.props.title}</Text>
+                <Text family="EXP_NEW_KANSAS_MEDIUM" fontSize={22} style={{marginTop: 15}}>{this.props.title}</Text>
 
                 {this.props.subtitle && (
-                <Text family="EXP_NEUE_BOLD" fontSize={15} style={{marginBottom: 20}}>{this.props.subtitle}</Text>
+                <Text family="EXP_NEUE_BOLD" fontSize={13} style={{marginTop: 4}}>{this.props.subtitle}</Text>
                 )}
             </View>
         );
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index eaf00a5cbed1..a9c545666c6b 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
@@ -11,8 +10,8 @@ import compose from '../libs/compose';
 import reportPropTypes from './reportPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails';
 import styles from '../styles/styles';
-import roomAvatar from '../../assets/images/avatars/room.svg';
-import ONYXKEYS from '../ONYXKEYS';
+import roomAvatar from '../../assets/images/avatars/room.png';
+import * as ReportUtils from '../libs/ReportUtils';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -42,6 +41,8 @@ class ShareCodePage extends React.Component {
         const reportId = this.props.route?.params?.reportID;
         const isReport = this.props.report != null && this.props.report.reportID != null;
 
+        console.log(this.props.report);
+
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
@@ -56,7 +57,7 @@ class ShareCodePage extends React.Component {
                         type={isReport ? 'report' : 'profile'}
                         value={isReport ? reportId : this.props.session.email}
                         title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
-                        subtitle={isReport ? undefined : this.props.session.email}
+                        subtitle={isReport ? ReportUtils.getPolicyName(this.props.report) : this.props.session.email}
                         logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}
                         download={() => null}
                     />
@@ -71,11 +72,5 @@ ShareCodePage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
-    withOnyx({
-        report: {
-            // eslint-disable-next-line es/no-optional-chaining
-            key: ({route}) => (route.params?.reportId != null ? `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}` : undefined),
-        },
-    }),
     withCurrentUserPersonalDetails,
 )(ShareCodePage);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 14095b75e309..988f5a23c181 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3194,17 +3194,18 @@ const styles = {
     },
 
     shareCodePage: {
-        alignItems: 'center',
+        paddingHorizontal: 38.5,
     },
 
     shareCodeContainer: {
+        width: '100%',
         alignItems: 'center',
-        paddingHorizontal: 30,
+        paddingHorizontal: 32,
         paddingVertical: 20,
-        marginHorizontal: 30,
         borderRadius: 20,
+        overflow: 'hidden',
         borderColor: themeColors.borderFocus,
-        borderWidth: 3,
+        borderWidth: 2,
         backgroundColor: themeColors.highlightBG,
     },
 };

From 68f3aaa7040c1c79571cb5d593018fe1ad7dd826 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 18:07:32 +0200
Subject: [PATCH 09/40] add separate "ReportDetailsShareCodePage" so we can use
 "withOnyx" to get report

---
 .../AppNavigator/ModalStackNavigators.js      |  2 +-
 .../home/report/ReportDetailsShareCodePage.js | 43 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/home/report/ReportDetailsShareCodePage.js

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index d0fb2006cf05..2f43da3a2dca 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -153,7 +153,7 @@ const ReportDetailsModalStackNavigator = createModalStackNavigator([{
 },
 {
     getComponent: () => {
-        const ShareCodePage = require('../../../pages/ShareCodePage').default;
+        const ShareCodePage = require('../../../pages/home/report/ReportDetailsShareCodePage').default;
         return ShareCodePage;
     },
     name: 'Report_Details_Share_Code',
diff --git a/src/pages/home/report/ReportDetailsShareCodePage.js b/src/pages/home/report/ReportDetailsShareCodePage.js
new file mode 100644
index 000000000000..99880df3f2d7
--- /dev/null
+++ b/src/pages/home/report/ReportDetailsShareCodePage.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import reportPropTypes from '../../reportPropTypes';
+import ONYXKEYS from '../../../ONYXKEYS';
+import ShareCodePage from '../../ShareCodePage';
+
+const propTypes = {
+    /** Navigation route context info provided by react navigation */
+    route: PropTypes.shape({
+        /** Route specific parameters used on this screen */
+        params: PropTypes.shape({
+            reportID: PropTypes.string,
+        }).isRequired,
+    }).isRequired,
+
+    /** The report currently being looked at */
+    report: reportPropTypes,
+};
+
+const defaultProps = {
+    report: undefined,
+};
+
+// eslint-disable-next-line react/prefer-stateless-function
+class ReportDetailsShareCodePage extends React.Component {
+    render() {
+        // eslint-disable-next-line es/no-optional-chaining
+
+        return (
+            <ShareCodePage report={this.props.report} />
+        );
+    }
+}
+
+ReportDetailsShareCodePage.propTypes = propTypes;
+ReportDetailsShareCodePage.defaultProps = defaultProps;
+
+export default withOnyx({
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+    },
+})(ReportDetailsShareCodePage);

From 102272c0ff40e9cbf44dd35220f59c22d9dc24a4 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 18:12:30 +0200
Subject: [PATCH 10/40] fix linking for report qr code

---
 src/pages/ShareCodePage.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index a9c545666c6b..fc792942eafa 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -37,12 +37,8 @@ const defaultProps = {
 // eslint-disable-next-line react/prefer-stateless-function
 class ShareCodePage extends React.Component {
     render() {
-        // eslint-disable-next-line es/no-optional-chaining
-        const reportId = this.props.route?.params?.reportID;
         const isReport = this.props.report != null && this.props.report.reportID != null;
 
-        console.log(this.props.report);
-
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
@@ -55,7 +51,7 @@ class ShareCodePage extends React.Component {
                 <View style={styles.shareCodePage}>
                     <QRShare
                         type={isReport ? 'report' : 'profile'}
-                        value={isReport ? reportId : this.props.session.email}
+                        value={isReport ? this.props.report.reportID : this.props.session.email}
                         title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
                         subtitle={isReport ? ReportUtils.getPolicyName(this.props.report) : this.props.session.email}
                         logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}

From bd07e9744556a30f75e0d0c5b9a2802ec206a7a7 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 18:32:09 +0200
Subject: [PATCH 11/40] improve "Share Code" buttons

---
 src/pages/ReportDetailsPage.js            | 6 +++++-
 src/pages/settings/Profile/ProfilePage.js | 6 +++++-
 src/styles/styles.js                      | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index ed70d7c4c864..dce282a8ca7d 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -151,8 +151,12 @@ class ReportDetailsPage extends Component {
 
                                     <Button
                                         text={this.props.translate('common.shareCode')}
-                                        iconRight={Expensicons.Shield}
+                                        medium
+
+                                        // TODO: Replace with "QrCode" icon from Figma
+                                        icon={Expensicons.Link}
                                         onPress={() => Navigation.navigate(ROUTES.getReportShareCodeRoute(this.props.report.reportID))}
+                                        style={{marginVertical: 20, alignSelf: 'center'}}
                                     />
                                 </View>
                             </View>
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 19151b16ea2b..2ae028e041ea 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -107,8 +107,12 @@ const ProfilePage = (props) => {
 
                     <Button
                         text={props.translate('common.shareCode')}
-                        iconRight={Expensicons.QRCode}
+                        medium
+
+                        // TODO: Replace with "QrCode" icon from Figma
+                        icon={Expensicons.Link}
                         onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE_SHARE_CODE)}
+                        style={{marginVertical: 20, alignSelf: 'center'}}
                     />
                 </OfflineWithFeedback>
                 <View style={[styles.mt4]}>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 988f5a23c181..0625d22dcfe8 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2052,7 +2052,7 @@ const styles = {
         ...flex.flexColumn,
         ...flex.alignItemsCenter,
         ...spacing.mt4,
-        height: 170,
+        height: 210,
     },
 
     reportDetailsRoomInfo: {

From a1401351a9cd630cbbe7a16c3871c04e21174df8 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 18:32:25 +0200
Subject: [PATCH 12/40] add locale translations

---
 src/languages/en.js | 1 +
 src/languages/es.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/languages/en.js b/src/languages/en.js
index 2c11821e32b8..5761afe5045a 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -135,6 +135,7 @@ export default {
         description: 'Description',
         with: 'with',
         shareCode: 'Share Code',
+        share: 'Share',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera access',
diff --git a/src/languages/es.js b/src/languages/es.js
index cecdadc0a951..7bf3459d69e4 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -134,6 +134,7 @@ export default {
         description: 'Descripción',
         with: 'con',
         shareCode: 'Compartir código',
+        share: 'Compartir',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Permiso para acceder a la cámara',

From 7b4d503046ce2e166d99e7d20053653bcebf6dda Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 18:32:46 +0200
Subject: [PATCH 13/40] update props of "QRShare"

---
 src/components/QRShare.js  | 16 +++++++++-------
 src/pages/ShareCodePage.js | 27 +++++++++++++++++++++++++--
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/QRShare.js b/src/components/QRShare.js
index c7f0814ad95e..e55039b71650 100644
--- a/src/components/QRShare.js
+++ b/src/components/QRShare.js
@@ -12,12 +12,10 @@ import variables from '../styles/variables';
 import ExpensifyWordmark from '../../assets/images/expensify-wordmark.svg';
 
 const propTypes = {
-    type: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
+    url: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     subtitle: PropTypes.string,
     logo: PropTypes.func,
-    download: PropTypes.func,
 
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
@@ -26,7 +24,6 @@ const propTypes = {
 const defaultProps = {
     subtitle: undefined,
     logo: undefined,
-    download: undefined,
 };
 
 class QRShare extends React.Component {
@@ -39,9 +36,8 @@ class QRShare extends React.Component {
             qrCodeSize: defaultQrCodeSize,
         };
 
-        this.url = this.props.type === 'profile' ? `https://new.expensify.com/details?login=${this.props.value}` : `https://new.expensify.com/r/${this.props.value}`;
-
         this.onLayout = this.onLayout.bind(this);
+        this.download = this.download.bind(this);
     }
 
     onLayout = (event) => {
@@ -50,6 +46,12 @@ class QRShare extends React.Component {
         });
     }
 
+    download = () => {
+        console.log('download');
+
+        return 'TODO: Implement download';
+    }
+
     render() {
         return (
             <View style={styles.shareCodeContainer} onLayout={this.onLayout}>
@@ -67,7 +69,7 @@ class QRShare extends React.Component {
                     />
                 </View>
                 <QRCodeLibrary
-                    value={this.url}
+                    value={this.props.url}
                     logo={this.props.logo}
                     getRef={c => (this.svg = c)}
                     logoBackgroundColor="transparent"
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index fc792942eafa..01afea2b23ab 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -12,6 +12,9 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import styles from '../styles/styles';
 import roomAvatar from '../../assets/images/avatars/room.png';
 import * as ReportUtils from '../libs/ReportUtils';
+import MenuItem from '../components/MenuItem';
+import Clipboard from '../libs/Clipboard';
+import * as Expensicons from '../components/Icon/Expensicons';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -36,9 +39,13 @@ const defaultProps = {
 
 // eslint-disable-next-line react/prefer-stateless-function
 class ShareCodePage extends React.Component {
+    qrCodeRef = React.createRef();
+
     render() {
         const isReport = this.props.report != null && this.props.report.reportID != null;
 
+        const url = isReport ? `https://new.expensify.com/r/${this.props.report.reportID}` : `https://new.expensify.com/details?login=${this.props.session.email}`;
+
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
@@ -50,14 +57,30 @@ class ShareCodePage extends React.Component {
 
                 <View style={styles.shareCodePage}>
                     <QRShare
-                        type={isReport ? 'report' : 'profile'}
-                        value={isReport ? this.props.report.reportID : this.props.session.email}
+                        ref={this.qrCodeRef}
                         title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
                         subtitle={isReport ? ReportUtils.getPolicyName(this.props.report) : this.props.session.email}
                         logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}
                         download={() => null}
                     />
                 </View>
+
+                <View style={{marginTop: 36}}>
+                    <MenuItem
+                        title={this.props.translate('common.share')}
+                        shouldShowRightIcon
+                        icon={Expensicons.Link}
+                        onPress={() => Clipboard.setString(url)}
+                    />
+
+                    <MenuItem
+                        title={this.props.translate('common.download')}
+                        shouldShowRightIcon
+                        icon={Expensicons.Download}
+                        onPress={() => this.qrCodeRef.current?.download()}
+                    />
+
+                </View>
             </ScreenWrapper>
         );
     }

From f14dc939d1ae0e3a3386d9911852bb9d7060552c Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 18:45:28 +0200
Subject: [PATCH 14/40] improve margin in ProfilePage

---
 src/pages/settings/Profile/ProfilePage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 2ae028e041ea..28a1fb68b5d9 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -112,7 +112,7 @@ const ProfilePage = (props) => {
                         // TODO: Replace with "QrCode" icon from Figma
                         icon={Expensicons.Link}
                         onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE_SHARE_CODE)}
-                        style={{marginVertical: 20, alignSelf: 'center'}}
+                        style={{marginTop: 30, alignSelf: 'center'}}
                     />
                 </OfflineWithFeedback>
                 <View style={[styles.mt4]}>

From 61b53c8180e9b606ab52f7d7c9f353239042db90 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 19:09:01 +0200
Subject: [PATCH 15/40] implement qr code download and improve styling

---
 package-lock.json         | 16 ++++++++++++++++
 package.json              |  3 ++-
 src/components/QRShare.js | 21 +++++++++++++--------
 src/styles/styles.js      |  2 +-
 src/styles/variables.js   |  1 +
 5 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0e9adf41e46d..be9f2f2277ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -90,6 +90,7 @@
         "react-native-safe-area-context": "4.4.1",
         "react-native-screens": "3.17.0",
         "react-native-svg": "^13.9.0",
+        "react-native-view-shot": "^3.6.0",
         "react-native-web-lottie": "^1.4.4",
         "react-native-webview": "^11.17.2",
         "react-pdf": "5.7.2",
@@ -35260,6 +35261,15 @@
         "react-native-svg": ">=12.0.0"
       }
     },
+    "node_modules/react-native-view-shot": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.6.0.tgz",
+      "integrity": "sha512-QUYGaIaAxQwOTydUzqGMooBwrg455cuOQgTloZ+gPO1QCUuLRdncCqrEMwKW5eUnN5U8JGMKeFRll2m6egOxtA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.18.12",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",
@@ -65147,6 +65157,12 @@
         "path-dirname": "^1.0.2"
       }
     },
+    "react-native-view-shot": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.6.0.tgz",
+      "integrity": "sha512-QUYGaIaAxQwOTydUzqGMooBwrg455cuOQgTloZ+gPO1QCUuLRdncCqrEMwKW5eUnN5U8JGMKeFRll2m6egOxtA==",
+      "requires": {}
+    },
     "react-native-web": {
       "version": "0.18.12",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",
diff --git a/package.json b/package.json
index 070c199e8860..1271e46ddae9 100644
--- a/package.json
+++ b/package.json
@@ -125,6 +125,7 @@
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "3.17.0",
     "react-native-svg": "^13.9.0",
+    "react-native-view-shot": "^3.6.0",
     "react-native-web-lottie": "^1.4.4",
     "react-native-webview": "^11.17.2",
     "react-pdf": "5.7.2",
@@ -197,8 +198,8 @@
     "metro-react-native-babel-preset": "^0.73.3",
     "mock-fs": "^4.13.0",
     "onchange": "^7.1.0",
-    "prettier": "^2.8.8",
     "portfinder": "^1.0.28",
+    "prettier": "^2.8.8",
     "pusher-js-mock": "^0.3.3",
     "react-native-clean-project": "^4.0.0-alpha4.0",
     "react-native-flipper": "https://gitpkg.now.sh/facebook/flipper/react-native/react-native-flipper?9cacc9b59402550eae866e0e81e5f0c2f8203e6b",
diff --git a/src/components/QRShare.js b/src/components/QRShare.js
index e55039b71650..7fcf32820b3b 100644
--- a/src/components/QRShare.js
+++ b/src/components/QRShare.js
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import QRCodeLibrary from 'react-native-qrcode-svg';
 import {Dimensions, View} from 'react-native';
+import ViewShot from 'react-native-view-shot';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import defaultTheme from '../styles/themes/default';
 import styles from '../styles/styles';
@@ -10,6 +11,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen
 import compose from '../libs/compose';
 import variables from '../styles/variables';
 import ExpensifyWordmark from '../../assets/images/expensify-wordmark.svg';
+import fileDownload from '../libs/fileDownload';
 
 const propTypes = {
     url: PropTypes.string.isRequired,
@@ -26,7 +28,9 @@ const defaultProps = {
     logo: undefined,
 };
 
-class QRShare extends React.Component {
+class QRShare extends Component {
+    qrCodeScreenshotRef = React.createRef();
+
     constructor(props) {
         super(props);
 
@@ -40,20 +44,19 @@ class QRShare extends React.Component {
         this.download = this.download.bind(this);
     }
 
-    onLayout = (event) => {
+    onLayout(event) {
         this.setState({
-            qrCodeSize: event.nativeEvent.layout.width - 64,
+            qrCodeSize: event.nativeEvent.layout.width - (variables.qrShareHorizontalPadding * 2),
         });
     }
 
-    download = () => {
-        console.log('download');
-
-        return 'TODO: Implement download';
+    download(){
+        return this.qrCodeScreenshotRef.current.capture().then(uri => fileDownload(uri, `${this.props.title}-ShareCode.png`))
     }
 
     render() {
         return (
+            <ViewShot ref={this.qrCodeScreenshotRef} options={{ format: "png" }}>
             <View style={styles.shareCodeContainer} onLayout={this.onLayout}>
                 <View style={{
                     alignSelf: 'stretch',
@@ -86,6 +89,8 @@ class QRShare extends React.Component {
                 <Text family="EXP_NEUE_BOLD" fontSize={13} style={{marginTop: 4}}>{this.props.subtitle}</Text>
                 )}
             </View>
+
+            </ViewShot>
         );
     }
 }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1c542cbda705..e23f8cad5363 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3201,7 +3201,7 @@ const styles = {
     shareCodeContainer: {
         width: '100%',
         alignItems: 'center',
-        paddingHorizontal: 32,
+        paddingHorizontal: variables.qrShareHorizontalPadding,
         paddingVertical: 20,
         borderRadius: 20,
         overflow: 'hidden',
diff --git a/src/styles/variables.js b/src/styles/variables.js
index f6bc4b2fe16c..33ece15bb207 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -136,4 +136,5 @@ export default {
     googleEmptyListViewHeight: 14,
     hoverDimValue: 0.5,
     pressDimValue: 0.2,
+    qrShareHorizontalPadding: 32,
 };

From 028920f4cb5cbae7a8dc9260b7122db06f9d9f4d Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 19:12:30 +0200
Subject: [PATCH 16/40] remove unused prop

---
 src/components/QRShare.js | 98 ++++++++++++++++++++++++---------------
 1 file changed, 60 insertions(+), 38 deletions(-)

diff --git a/src/components/QRShare.js b/src/components/QRShare.js
index 7fcf32820b3b..ab95df082b49 100644
--- a/src/components/QRShare.js
+++ b/src/components/QRShare.js
@@ -34,7 +34,7 @@ class QRShare extends Component {
     constructor(props) {
         super(props);
 
-        const defaultQrCodeSize = this.props.isSmallScreenWidth ? (Dimensions.get('window').width) - 75 : variables.sideBarWidth;
+        const defaultQrCodeSize = this.props.isSmallScreenWidth ? Dimensions.get('window').width - 75 : variables.sideBarWidth;
 
         this.state = {
             qrCodeSize: defaultQrCodeSize,
@@ -46,50 +46,67 @@ class QRShare extends Component {
 
     onLayout(event) {
         this.setState({
-            qrCodeSize: event.nativeEvent.layout.width - (variables.qrShareHorizontalPadding * 2),
+            qrCodeSize: event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2,
         });
     }
 
-    download(){
-        return this.qrCodeScreenshotRef.current.capture().then(uri => fileDownload(uri, `${this.props.title}-ShareCode.png`))
+    download() {
+        return this.qrCodeScreenshotRef.current.capture().then((uri) => fileDownload(uri, `${this.props.title}-ShareCode.png`));
     }
 
     render() {
         return (
-            <ViewShot ref={this.qrCodeScreenshotRef} options={{ format: "png" }}>
-            <View style={styles.shareCodeContainer} onLayout={this.onLayout}>
-                <View style={{
-                    alignSelf: 'stretch',
-                    height: 27,
-                    marginBottom: 20,
-                }}
+            <ViewShot
+                ref={this.qrCodeScreenshotRef}
+                options={{format: 'png'}}
+            >
+                <View
+                    style={styles.shareCodeContainer}
+                    onLayout={this.onLayout}
                 >
-                    <ExpensifyWordmark
-                        fill={defaultTheme.borderFocus}
-                        width="100%"
-                        height="100%"
-                        resizeMode="fill"
+                    <View
+                        style={{
+                            alignSelf: 'stretch',
+                            height: 27,
+                            marginBottom: 20,
+                        }}
+                    >
+                        <ExpensifyWordmark
+                            fill={defaultTheme.borderFocus}
+                            width="100%"
+                            height="100%"
+                        />
+                    </View>
+                    <QRCodeLibrary
+                        value={this.props.url}
+                        logo={this.props.logo}
+                        getRef={(c) => (this.svg = c)}
+                        logoBackgroundColor="transparent"
+                        logoSize={this.state.qrCodeSize * 0.3}
+                        logoBorderRadius={this.state.qrCodeSize}
+                        size={this.state.qrCodeSize}
+                        backgroundColor={defaultTheme.highlightBG}
+                        color={defaultTheme.text}
                     />
-                </View>
-                <QRCodeLibrary
-                    value={this.props.url}
-                    logo={this.props.logo}
-                    getRef={c => (this.svg = c)}
-                    logoBackgroundColor="transparent"
-                    logoSize={this.state.qrCodeSize * 0.3}
-                    logoBorderRadius={this.state.qrCodeSize}
-                    size={this.state.qrCodeSize}
-                    backgroundColor={defaultTheme.highlightBG}
-                    color={defaultTheme.text}
-                />
-
-                <Text family="EXP_NEW_KANSAS_MEDIUM" fontSize={22} style={{marginTop: 15}}>{this.props.title}</Text>
 
-                {this.props.subtitle && (
-                <Text family="EXP_NEUE_BOLD" fontSize={13} style={{marginTop: 4}}>{this.props.subtitle}</Text>
-                )}
-            </View>
+                    <Text
+                        family="EXP_NEW_KANSAS_MEDIUM"
+                        fontSize={22}
+                        style={{marginTop: 15}}
+                    >
+                        {this.props.title}
+                    </Text>
 
+                    {this.props.subtitle && (
+                        <Text
+                            family="EXP_NEUE_BOLD"
+                            fontSize={13}
+                            style={{marginTop: 4}}
+                        >
+                            {this.props.subtitle}
+                        </Text>
+                    )}
+                </View>
             </ViewShot>
         );
     }
@@ -100,7 +117,12 @@ QRShare.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withWindowDimensions,
-)(React.forwardRef((props, ref) => (
-    /* eslint-disable-next-line react/jsx-props-no-spreading */
-    <QRShare {...props} forwardedRef={ref} />
-)));
+)(
+    React.forwardRef((props, ref) => (
+        /* eslint-disable-next-line react/jsx-props-no-spreading */
+        <QRShare
+            {...props}
+            forwardedRef={ref}
+        />
+    )),
+);

From 11720da282c9b60e8d0cb71cb5afac1469bf5e4a Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 19:12:37 +0200
Subject: [PATCH 17/40] disable eslint rule

---
 src/pages/ShareCodePage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 01afea2b23ab..2e7cbf682dc6 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -77,6 +77,7 @@ class ShareCodePage extends React.Component {
                         title={this.props.translate('common.download')}
                         shouldShowRightIcon
                         icon={Expensicons.Download}
+                        // eslint-disable-next-line es/no-optional-chaining
                         onPress={() => this.qrCodeRef.current?.download()}
                     />
 

From 559d07f91338766089132970d9fef9c972cbf42f Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 19:12:48 +0200
Subject: [PATCH 18/40] add react-native-view-shot to includeModules in webpack
 config

---
 config/webpack/webpack.common.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 9d77fd189dcd..7c6d1b9de3a9 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -22,6 +22,7 @@ const includeModules = [
     'react-native-google-places-autocomplete',
     '@react-navigation/drawer',
     'react-native-qrcode-svg',
+    'react-native-view-shot',
 ].join('|');
 
 const envToLogoSuffixMap = {

From a71af6249d0aad1ccaf0e0678aadc146d746d21b Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Wed, 10 May 2023 19:12:57 +0200
Subject: [PATCH 19/40] update pods

---
 ios/Podfile.lock | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index b9c6d9359734..d85e91f1fa42 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -541,6 +541,8 @@ PODS:
     - RCTTypeSafety
     - React-Core
     - ReactCommon/turbomodule/core
+  - react-native-view-shot (3.6.0):
+    - React-Core
   - react-native-webview (11.23.0):
     - React-Core
   - React-perflogger (0.71.2-alpha.3)
@@ -781,6 +783,7 @@ DEPENDENCIES:
   - react-native-quick-sqlite (from `../node_modules/react-native-quick-sqlite`)
   - react-native-render-html (from `../node_modules/react-native-render-html`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-view-shot (from `../node_modules/react-native-view-shot`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -944,6 +947,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-render-html"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-view-shot:
+    :path: "../node_modules/react-native-view-shot"
   react-native-webview:
     :path: "../node_modules/react-native-webview"
   React-perflogger:
@@ -1089,6 +1094,7 @@ SPEC CHECKSUMS:
   react-native-quick-sqlite: bcc7a7a250a40222f18913a97cd356bf82d0a6c4
   react-native-render-html: 96c979fe7452a0a41559685d2f83b12b93edac8c
   react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
+  react-native-view-shot: 705f999ac2a24e4e6c909c0ca65c732ed33ca2ff
   react-native-webview: e771bc375f789ebfa02a26939a57dbc6fa897336
   React-perflogger: 9f7c5a9d22d104ae0348f38235ee636d156b5938
   React-RCTActionSheet: 43e74f3a54967bb1d0e9ff261bc076843fb50ca1

From 789cc26300226222f100edea808bf6d6fc42913b Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 11:16:13 +0200
Subject: [PATCH 20/40] implement qr code download on native (web-support not
 available)

---
 src/components/QRShare.js | 32 ++++++++++----------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/components/QRShare.js b/src/components/QRShare.js
index ab95df082b49..16efa9683e27 100644
--- a/src/components/QRShare.js
+++ b/src/components/QRShare.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import QRCodeLibrary from 'react-native-qrcode-svg';
-import {Dimensions, View} from 'react-native';
+import {View} from 'react-native';
 import ViewShot from 'react-native-view-shot';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import defaultTheme from '../styles/themes/default';
@@ -17,7 +17,7 @@ const propTypes = {
     url: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     subtitle: PropTypes.string,
-    logo: PropTypes.func,
+    logo: PropTypes.string,
 
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
@@ -34,10 +34,8 @@ class QRShare extends Component {
     constructor(props) {
         super(props);
 
-        const defaultQrCodeSize = this.props.isSmallScreenWidth ? Dimensions.get('window').width - 75 : variables.sideBarWidth;
-
         this.state = {
-            qrCodeSize: defaultQrCodeSize,
+            qrCodeSize: 0,
         };
 
         this.onLayout = this.onLayout.bind(this);
@@ -51,15 +49,16 @@ class QRShare extends Component {
     }
 
     download() {
-        return this.qrCodeScreenshotRef.current.capture().then((uri) => fileDownload(uri, `${this.props.title}-ShareCode.png`));
+        return this.qrCodeScreenshotRef.current.capture().then((uri) => {
+            console.log('File download');
+            console.log(uri);
+            return fileDownload(uri, `${this.props.title}-ShareCode.png`);
+        });
     }
 
     render() {
         return (
-            <ViewShot
-                ref={this.qrCodeScreenshotRef}
-                options={{format: 'png'}}
-            >
+            <ViewShot ref={this.qrCodeScreenshotRef}>
                 <View
                     style={styles.shareCodeContainer}
                     onLayout={this.onLayout}
@@ -114,15 +113,4 @@ class QRShare extends Component {
 QRShare.propTypes = propTypes;
 QRShare.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withWindowDimensions,
-)(
-    React.forwardRef((props, ref) => (
-        /* eslint-disable-next-line react/jsx-props-no-spreading */
-        <QRShare
-            {...props}
-            forwardedRef={ref}
-        />
-    )),
-);
+export default compose(withLocalize, withWindowDimensions)(QRShare);

From 9790639f7bb28c884c76207602a28dd5e601554c Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 11:16:20 +0200
Subject: [PATCH 21/40] simplify propTypes

---
 src/pages/ShareCodePage.js | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 2e7cbf682dc6..ed042fd6881f 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
 import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
@@ -17,14 +16,6 @@ import Clipboard from '../libs/Clipboard';
 import * as Expensicons from '../components/Icon/Expensicons';
 
 const propTypes = {
-    /** Navigation route context info provided by react navigation */
-    route: PropTypes.shape({
-        /** Route specific parameters used on this screen */
-        params: PropTypes.shape({
-            reportID: PropTypes.string,
-        }).isRequired,
-    }).isRequired,
-
     /** The report currently being looked at */
     report: reportPropTypes,
 
@@ -80,7 +71,6 @@ class ShareCodePage extends React.Component {
                         // eslint-disable-next-line es/no-optional-chaining
                         onPress={() => this.qrCodeRef.current?.download()}
                     />
-
                 </View>
             </ScreenWrapper>
         );
@@ -90,7 +80,4 @@ class ShareCodePage extends React.Component {
 ShareCodePage.propTypes = propTypes;
 ShareCodePage.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withCurrentUserPersonalDetails,
-)(ShareCodePage);
+export default compose(withLocalize, withCurrentUserPersonalDetails)(ShareCodePage);

From 370875ed3dafc02242b691bce875ab0da578c12a Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 12:32:04 +0200
Subject: [PATCH 22/40] allow local files to be stored to camera roll on
 android

---
 src/libs/fileDownload/index.android.js | 33 ++++++++++++++++----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/libs/fileDownload/index.android.js b/src/libs/fileDownload/index.android.js
index 98bd5c975331..c14575881fea 100644
--- a/src/libs/fileDownload/index.android.js
+++ b/src/libs/fileDownload/index.android.js
@@ -43,26 +43,33 @@ function handleDownload(url, fileName) {
         const path = dirs.DownloadDir;
         const attachmentName = fileName || FileUtils.getAttachmentName(url);
 
-        // Fetching the attachment
-        const fetchedAttachment = RNFetchBlob.config({
-            fileCache: true,
-            path: `${path}/${attachmentName}`,
-            addAndroidDownloads: {
-                useDownloadManager: true,
-                notification: false,
-                path: `${path}/Expensify/${attachmentName}`,
-            },
-        }).fetch('GET', url);
+        const isLocalFile = url.startsWith('file://');
 
-        let attachmentPath;
+        let attachmentPath = isLocalFile ? url : undefined;
+        let fetchedAttachment = Promise.resolve();
+
+        if (!isLocalFile) {
+            // Fetching the attachment
+            fetchedAttachment = RNFetchBlob.config({
+                fileCache: true,
+                path: `${path}/${attachmentName}`,
+                addAndroidDownloads: {
+                    useDownloadManager: true,
+                    notification: false,
+                    path: `${path}/Expensify/${attachmentName}`,
+                },
+            }).fetch('GET', url);
+        }
 
         // Resolving the fetched attachment
         fetchedAttachment
             .then((attachment) => {
-                if (!attachment || !attachment.info()) {
+                if (!isLocalFile && (!attachment || !attachment.info())) {
                     return Promise.reject();
                 }
-                attachmentPath = attachment.path();
+
+                if (!isLocalFile) attachmentPath = attachment.path();
+
                 return RNFetchBlob.MediaCollection.copyToMediaStore(
                     {
                         name: attachmentName,

From cd333e9b58df2bec944fedbf04a21770940d9988 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 12:32:26 +0200
Subject: [PATCH 23/40] extract download logic from main qr code component

---
 src/components/QRShare.js                     | 116 ------------------
 src/components/QRShare/QRShare.js             | 107 ++++++++++++++++
 src/components/QRShare/QRShareWithDownload.js |  37 ++++++
 src/pages/ShareCodePage.js                    |   5 +-
 4 files changed, 146 insertions(+), 119 deletions(-)
 delete mode 100644 src/components/QRShare.js
 create mode 100644 src/components/QRShare/QRShare.js
 create mode 100644 src/components/QRShare/QRShareWithDownload.js

diff --git a/src/components/QRShare.js b/src/components/QRShare.js
deleted file mode 100644
index 16efa9683e27..000000000000
--- a/src/components/QRShare.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import QRCodeLibrary from 'react-native-qrcode-svg';
-import {View} from 'react-native';
-import ViewShot from 'react-native-view-shot';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import defaultTheme from '../styles/themes/default';
-import styles from '../styles/styles';
-import Text from './Text';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import compose from '../libs/compose';
-import variables from '../styles/variables';
-import ExpensifyWordmark from '../../assets/images/expensify-wordmark.svg';
-import fileDownload from '../libs/fileDownload';
-
-const propTypes = {
-    url: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    subtitle: PropTypes.string,
-    logo: PropTypes.string,
-
-    ...windowDimensionsPropTypes,
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    subtitle: undefined,
-    logo: undefined,
-};
-
-class QRShare extends Component {
-    qrCodeScreenshotRef = React.createRef();
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            qrCodeSize: 0,
-        };
-
-        this.onLayout = this.onLayout.bind(this);
-        this.download = this.download.bind(this);
-    }
-
-    onLayout(event) {
-        this.setState({
-            qrCodeSize: event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2,
-        });
-    }
-
-    download() {
-        return this.qrCodeScreenshotRef.current.capture().then((uri) => {
-            console.log('File download');
-            console.log(uri);
-            return fileDownload(uri, `${this.props.title}-ShareCode.png`);
-        });
-    }
-
-    render() {
-        return (
-            <ViewShot ref={this.qrCodeScreenshotRef}>
-                <View
-                    style={styles.shareCodeContainer}
-                    onLayout={this.onLayout}
-                >
-                    <View
-                        style={{
-                            alignSelf: 'stretch',
-                            height: 27,
-                            marginBottom: 20,
-                        }}
-                    >
-                        <ExpensifyWordmark
-                            fill={defaultTheme.borderFocus}
-                            width="100%"
-                            height="100%"
-                        />
-                    </View>
-                    <QRCodeLibrary
-                        value={this.props.url}
-                        logo={this.props.logo}
-                        getRef={(c) => (this.svg = c)}
-                        logoBackgroundColor="transparent"
-                        logoSize={this.state.qrCodeSize * 0.3}
-                        logoBorderRadius={this.state.qrCodeSize}
-                        size={this.state.qrCodeSize}
-                        backgroundColor={defaultTheme.highlightBG}
-                        color={defaultTheme.text}
-                    />
-
-                    <Text
-                        family="EXP_NEW_KANSAS_MEDIUM"
-                        fontSize={22}
-                        style={{marginTop: 15}}
-                    >
-                        {this.props.title}
-                    </Text>
-
-                    {this.props.subtitle && (
-                        <Text
-                            family="EXP_NEUE_BOLD"
-                            fontSize={13}
-                            style={{marginTop: 4}}
-                        >
-                            {this.props.subtitle}
-                        </Text>
-                    )}
-                </View>
-            </ViewShot>
-        );
-    }
-}
-QRShare.propTypes = propTypes;
-QRShare.defaultProps = defaultProps;
-
-export default compose(withLocalize, withWindowDimensions)(QRShare);
diff --git a/src/components/QRShare/QRShare.js b/src/components/QRShare/QRShare.js
new file mode 100644
index 000000000000..f5cb832dcb26
--- /dev/null
+++ b/src/components/QRShare/QRShare.js
@@ -0,0 +1,107 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import QRCodeLibrary from 'react-native-qrcode-svg';
+import {View} from 'react-native';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import defaultTheme from '../../styles/themes/default';
+import styles from '../../styles/styles';
+import Text from '../Text';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import compose from '../../libs/compose';
+import variables from '../../styles/variables';
+import ExpensifyWordmark from '../../../assets/images/expensify-wordmark.svg';
+import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
+
+const propTypes = {
+    url: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
+    logo: PropTypes.string,
+
+    ...windowDimensionsPropTypes,
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    subtitle: undefined,
+    logo: undefined,
+};
+
+class QRShare extends Component {
+    qrCodeScreenshotRef = React.createRef();
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            qrCodeSize: 0,
+        };
+
+        this.onLayout = this.onLayout.bind(this);
+    }
+
+    onLayout(event) {
+        this.setState({
+            qrCodeSize: event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2,
+        });
+    }
+
+    render() {
+        return (
+            <View
+                style={styles.shareCodeContainer}
+                onLayout={this.onLayout}
+            >
+                <View
+                    style={{
+                        alignSelf: 'stretch',
+                        height: 27,
+                        marginBottom: 20,
+                    }}
+                >
+                    <ExpensifyWordmark
+                        fill={defaultTheme.borderFocus}
+                        width="100%"
+                        height="100%"
+                    />
+                </View>
+
+                <QRCodeLibrary
+                    value={this.props.url}
+                    logo={this.props.logo}
+                    getRef={(c) => (this.svg = c)}
+                    logoBackgroundColor="transparent"
+                    logoSize={this.state.qrCodeSize * 0.3}
+                    logoBorderRadius={this.state.qrCodeSize}
+                    size={this.state.qrCodeSize}
+                    backgroundColor={defaultTheme.highlightBG}
+                    color={defaultTheme.text}
+                />
+
+                <Text
+                    family="EXP_NEW_KANSAS_MEDIUM"
+                    fontSize={22}
+                    style={{marginTop: 15}}
+                >
+                    {this.props.title}
+                </Text>
+
+                {this.props.subtitle && (
+                    <Text
+                        family="EXP_NEUE_BOLD"
+                        fontSize={13}
+                        style={{marginTop: 4}}
+                    >
+                        {this.props.subtitle}
+                    </Text>
+                )}
+            </View>
+        );
+    }
+}
+QRShare.propTypes = propTypes;
+QRShare.defaultProps = defaultProps;
+
+export default compose(withLocalize, withWindowDimensions)(QRShare);
+
+export {propTypes as qrSharePropTypes, defaultProps as qrShareDefaultProps};
diff --git a/src/components/QRShare/QRShareWithDownload.js b/src/components/QRShare/QRShareWithDownload.js
new file mode 100644
index 000000000000..a8b832ef550b
--- /dev/null
+++ b/src/components/QRShare/QRShareWithDownload.js
@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import ViewShot from 'react-native-view-shot';
+import fileDownload from '../../libs/fileDownload';
+import QRShare, {qrShareDefaultProps, qrSharePropTypes} from './QRShare';
+
+const propTypes = qrSharePropTypes;
+
+const defaultProps = qrShareDefaultProps;
+
+class QRShareWithDownload extends Component {
+    qrCodeScreenshotRef = React.createRef();
+
+    constructor(props) {
+        super(props);
+
+        this.download = this.download.bind(this);
+    }
+
+    download() {
+        return this.qrCodeScreenshotRef.current.capture().then((uri) => fileDownload(uri, `${this.props.title}-ShareCode.png`));
+    }
+
+    render() {
+        return (
+            <ViewShot ref={this.qrCodeScreenshotRef}>
+                <QRShare
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this.props}
+                />
+            </ViewShot>
+        );
+    }
+}
+QRShareWithDownload.propTypes = propTypes;
+QRShareWithDownload.defaultProps = defaultProps;
+
+export default QRShareWithDownload;
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index ed042fd6881f..b3740b3b336c 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -4,7 +4,7 @@ import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
-import QRShare from '../components/QRShare';
+import QRShareWithDownload from '../components/QRShare/QRShareWithDownload';
 import compose from '../libs/compose';
 import reportPropTypes from './reportPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails';
@@ -47,12 +47,11 @@ class ShareCodePage extends React.Component {
                 />
 
                 <View style={styles.shareCodePage}>
-                    <QRShare
+                    <QRShareWithDownload
                         ref={this.qrCodeRef}
                         title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
                         subtitle={isReport ? ReportUtils.getPolicyName(this.props.report) : this.props.session.email}
                         logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}
-                        download={() => null}
                     />
                 </View>
 

From 0bdf350ab0d0d00b4f37b62f543c146b67a16be2 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 12:40:59 +0200
Subject: [PATCH 24/40] add qrcode expensicon

---
 assets/images/qrcode.svg                  | 3 +++
 src/components/Icon/Expensicons.js        | 2 ++
 src/pages/ReportDetailsPage.js            | 4 +---
 src/pages/settings/Profile/ProfilePage.js | 4 +---
 4 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 assets/images/qrcode.svg

diff --git a/assets/images/qrcode.svg b/assets/images/qrcode.svg
new file mode 100644
index 000000000000..ead1d765b46a
--- /dev/null
+++ b/assets/images/qrcode.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666504 6H6.6665V0H0.666504V6ZM2.6665 2H4.6665V4H2.6665V2ZM8.6665 0V6H14.6665V0H8.6665ZM12.6665 4H10.6665V2H12.6665V4ZM0.666504 14H6.6665V8H0.666504V14ZM2.6665 10H4.6665V12H2.6665V10ZM13.6665 8H14.6665V12H11.6665V11H10.6665V14H8.6665V8H11.6665V9H13.6665V8ZM13.6665 13H14.6665V14H13.6665V13ZM11.6665 13H12.6665V14H11.6665V13Z" fill="#03D47C"/>
+</svg>
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index d3c7c2f4bc57..70503706f112 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -77,6 +77,7 @@ import Pin from '../../../assets/images/pin.svg';
 import Plus from '../../../assets/images/plus.svg';
 import Printer from '../../../assets/images/printer.svg';
 import Profile from '../../../assets/images/profile.svg';
+import QrCode from '../../../assets/images/qrcode.svg';
 import QuestionMark from '../../../assets/images/question-mark-circle.svg';
 import Receipt from '../../../assets/images/receipt.svg';
 import ReceiptSearch from '../../../assets/images/receipt-search.svg';
@@ -197,6 +198,7 @@ export {
     Plus,
     Printer,
     Profile,
+    QrCode,
     QuestionMark,
     Receipt,
     ReceiptSearch,
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index ec17eda1b826..1849c667f3f8 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -146,9 +146,7 @@ class ReportDetailsPage extends Component {
                                     <Button
                                         text={this.props.translate('common.shareCode')}
                                         medium
-
-                                        // TODO: Replace with "QrCode" icon from Figma
-                                        icon={Expensicons.Link}
+                                        icon={Expensicons.QrCode}
                                         onPress={() => Navigation.navigate(ROUTES.getReportShareCodeRoute(this.props.report.reportID))}
                                         style={{marginVertical: 20, alignSelf: 'center'}}
                                     />
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 28a1fb68b5d9..ddf9d8fac545 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -108,9 +108,7 @@ const ProfilePage = (props) => {
                     <Button
                         text={props.translate('common.shareCode')}
                         medium
-
-                        // TODO: Replace with "QrCode" icon from Figma
-                        icon={Expensicons.Link}
+                        icon={Expensicons.QrCode}
                         onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE_SHARE_CODE)}
                         style={{marginTop: 30, alignSelf: 'center'}}
                     />

From 7bcd3b58b183facb51b054261ba16f065050db7b Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 12:41:14 +0200
Subject: [PATCH 25/40] remove unused import

---
 src/components/QRShare/QRShare.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/QRShare/QRShare.js b/src/components/QRShare/QRShare.js
index f5cb832dcb26..606aec5af153 100644
--- a/src/components/QRShare/QRShare.js
+++ b/src/components/QRShare/QRShare.js
@@ -10,7 +10,6 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDime
 import compose from '../../libs/compose';
 import variables from '../../styles/variables';
 import ExpensifyWordmark from '../../../assets/images/expensify-wordmark.svg';
-import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 
 const propTypes = {
     url: PropTypes.string.isRequired,

From 1974f62f3ff8c0c3100841441e7bf3049ea7bcc1 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 13:45:41 +0200
Subject: [PATCH 26/40] extract download logic and differentiate between native
 and web

---
 .../QRShare/QRShareWithDownload/index.js      | 42 +++++++++++++++++++
 .../index.native.js}                          |  7 ++--
 .../QRShare/getQrCodeDownloadFileName.js      |  4 ++
 .../QRShare/{QRShare.js => index.js}          |  9 ++--
 4 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 src/components/QRShare/QRShareWithDownload/index.js
 rename src/components/QRShare/{QRShareWithDownload.js => QRShareWithDownload/index.native.js} (77%)
 create mode 100644 src/components/QRShare/getQrCodeDownloadFileName.js
 rename src/components/QRShare/{QRShare.js => index.js} (95%)

diff --git a/src/components/QRShare/QRShareWithDownload/index.js b/src/components/QRShare/QRShareWithDownload/index.js
new file mode 100644
index 000000000000..9e5cc17d0536
--- /dev/null
+++ b/src/components/QRShare/QRShareWithDownload/index.js
@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import fileDownload from '../../../libs/fileDownload';
+import QRShare, {qrShareDefaultProps, qrSharePropTypes} from '..';
+import getQrCodeFileName from '../getQrCodeDownloadFileName';
+
+const propTypes = qrSharePropTypes;
+
+const defaultProps = qrShareDefaultProps;
+
+class QRShareWithDownload extends Component {
+    qrShareRef = React.createRef();
+
+    constructor(props) {
+        super(props);
+
+        this.download = this.download.bind(this);
+    }
+
+    download() {
+        return new Promise((resolve, reject) => {
+            // eslint-disable-next-line es/no-optional-chaining
+            const svg = this.qrShareRef.current?.getSvg();
+            if (svg == null) return reject();
+
+            svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(this.props.title))));
+        });
+    }
+
+    render() {
+        return (
+            <QRShare
+                ref={this.qrShareRef}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+            />
+        );
+    }
+}
+QRShareWithDownload.propTypes = propTypes;
+QRShareWithDownload.defaultProps = defaultProps;
+
+export default QRShareWithDownload;
diff --git a/src/components/QRShare/QRShareWithDownload.js b/src/components/QRShare/QRShareWithDownload/index.native.js
similarity index 77%
rename from src/components/QRShare/QRShareWithDownload.js
rename to src/components/QRShare/QRShareWithDownload/index.native.js
index a8b832ef550b..c975917dd708 100644
--- a/src/components/QRShare/QRShareWithDownload.js
+++ b/src/components/QRShare/QRShareWithDownload/index.native.js
@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import ViewShot from 'react-native-view-shot';
-import fileDownload from '../../libs/fileDownload';
-import QRShare, {qrShareDefaultProps, qrSharePropTypes} from './QRShare';
+import fileDownload from '../../../libs/fileDownload';
+import QRShare, {qrShareDefaultProps, qrSharePropTypes} from '..';
+import getQrCodeFileName from '../getQrCodeDownloadFileName';
 
 const propTypes = qrSharePropTypes;
 
@@ -17,7 +18,7 @@ class QRShareWithDownload extends Component {
     }
 
     download() {
-        return this.qrCodeScreenshotRef.current.capture().then((uri) => fileDownload(uri, `${this.props.title}-ShareCode.png`));
+        return this.qrCodeScreenshotRef.current.capture().then((uri) => fileDownload(uri, getQrCodeFileName(this.props.title)));
     }
 
     render() {
diff --git a/src/components/QRShare/getQrCodeDownloadFileName.js b/src/components/QRShare/getQrCodeDownloadFileName.js
new file mode 100644
index 000000000000..cc3b38d42348
--- /dev/null
+++ b/src/components/QRShare/getQrCodeDownloadFileName.js
@@ -0,0 +1,4 @@
+// eslint-disable-next-line rulesdir/display-name-property
+const getQrCodeDownloadFileName = (title) => `${title}-ShareCode.png`;
+
+export default getQrCodeDownloadFileName;
diff --git a/src/components/QRShare/QRShare.js b/src/components/QRShare/index.js
similarity index 95%
rename from src/components/QRShare/QRShare.js
rename to src/components/QRShare/index.js
index 606aec5af153..4ab5a69274e7 100644
--- a/src/components/QRShare/QRShare.js
+++ b/src/components/QRShare/index.js
@@ -27,8 +27,6 @@ const defaultProps = {
 };
 
 class QRShare extends Component {
-    qrCodeScreenshotRef = React.createRef();
-
     constructor(props) {
         super(props);
 
@@ -37,6 +35,7 @@ class QRShare extends Component {
         };
 
         this.onLayout = this.onLayout.bind(this);
+        this.getSvg = this.getSvg.bind(this);
     }
 
     onLayout(event) {
@@ -45,6 +44,10 @@ class QRShare extends Component {
         });
     }
 
+    getSvg() {
+        return this.svg;
+    }
+
     render() {
         return (
             <View
@@ -68,7 +71,7 @@ class QRShare extends Component {
                 <QRCodeLibrary
                     value={this.props.url}
                     logo={this.props.logo}
-                    getRef={(c) => (this.svg = c)}
+                    getRef={(svg) => (this.svg = svg)}
                     logoBackgroundColor="transparent"
                     logoSize={this.state.qrCodeSize * 0.3}
                     logoBorderRadius={this.state.qrCodeSize}

From 6d29e436b0f2f8f26087ae43b37a8761bf167ffe Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 14:01:50 +0200
Subject: [PATCH 27/40] wrap ShareCodePage in ScrollView

---
 src/pages/ShareCodePage.js | 50 ++++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index b3740b3b336c..39d30ba57276 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {View, ScrollView} from 'react-native';
 import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
@@ -46,31 +46,33 @@ class ShareCodePage extends React.Component {
                     onCloseButtonPress={() => Navigation.dismissModal(true)}
                 />
 
-                <View style={styles.shareCodePage}>
-                    <QRShareWithDownload
-                        ref={this.qrCodeRef}
-                        title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
-                        subtitle={isReport ? ReportUtils.getPolicyName(this.props.report) : this.props.session.email}
-                        logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}
-                    />
-                </View>
+                <ScrollView style={[styles.flex1, styles.mt3]}>
+                    <View style={styles.shareCodePage}>
+                        <QRShareWithDownload
+                            ref={this.qrCodeRef}
+                            title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
+                            subtitle={isReport ? ReportUtils.getPolicyName(this.props.report) : this.props.session.email}
+                            logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}
+                        />
+                    </View>
 
-                <View style={{marginTop: 36}}>
-                    <MenuItem
-                        title={this.props.translate('common.share')}
-                        shouldShowRightIcon
-                        icon={Expensicons.Link}
-                        onPress={() => Clipboard.setString(url)}
-                    />
+                    <View style={{marginTop: 36}}>
+                        <MenuItem
+                            title={this.props.translate('common.share')}
+                            shouldShowRightIcon
+                            icon={Expensicons.Link}
+                            onPress={() => Clipboard.setString(url)}
+                        />
 
-                    <MenuItem
-                        title={this.props.translate('common.download')}
-                        shouldShowRightIcon
-                        icon={Expensicons.Download}
-                        // eslint-disable-next-line es/no-optional-chaining
-                        onPress={() => this.qrCodeRef.current?.download()}
-                    />
-                </View>
+                        <MenuItem
+                            title={this.props.translate('common.download')}
+                            shouldShowRightIcon
+                            icon={Expensicons.Download}
+                            // eslint-disable-next-line es/no-optional-chaining
+                            onPress={() => this.qrCodeRef.current?.download()}
+                        />
+                    </View>
+                </ScrollView>
             </ScreenWrapper>
         );
     }

From 6f7b6d3ff4799c538b53c7b945de83b15068e8de Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 14:25:25 +0200
Subject: [PATCH 28/40] make "Share code" button text sentence case

---
 src/languages/en.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index d8ace011fe48..2fbe81e48a73 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -134,7 +134,7 @@ export default {
         zipCodeExampleFormat: ({zipSampleFormat}) => (zipSampleFormat ? `e.g. ${zipSampleFormat}` : ''),
         description: 'Description',
         with: 'with',
-        shareCode: 'Share Code',
+        shareCode: 'Share code',
         share: 'Share',
     },
     attachmentPicker: {

From 1256766a5defce5f44b9c7a1d8af6f06bf0db984 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 14:31:23 +0200
Subject: [PATCH 29/40] update button style

---
 src/pages/ReportDetailsPage.js            | 4 ++--
 src/pages/settings/Profile/ProfilePage.js | 4 ++--
 src/styles/styles.js                      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 1849c667f3f8..993d2b95c86e 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -145,10 +145,10 @@ class ReportDetailsPage extends Component {
 
                                     <Button
                                         text={this.props.translate('common.shareCode')}
-                                        medium
+                                        small
                                         icon={Expensicons.QrCode}
                                         onPress={() => Navigation.navigate(ROUTES.getReportShareCodeRoute(this.props.report.reportID))}
-                                        style={{marginVertical: 20, alignSelf: 'center'}}
+                                        style={{marginVertical: 10, alignSelf: 'center'}}
                                     />
                                 </View>
                             </View>
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index ddf9d8fac545..cca1f85422f9 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -107,10 +107,10 @@ const ProfilePage = (props) => {
 
                     <Button
                         text={props.translate('common.shareCode')}
-                        medium
+                        small
                         icon={Expensicons.QrCode}
                         onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE_SHARE_CODE)}
-                        style={{marginTop: 30, alignSelf: 'center'}}
+                        style={{marginTop: 20, alignSelf: 'center'}}
                     />
                 </OfflineWithFeedback>
                 <View style={[styles.mt4]}>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 770e2e7145e0..cdf5a29c338a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2064,7 +2064,7 @@ const styles = {
         ...flex.flexColumn,
         ...flex.alignItemsCenter,
         ...spacing.mt4,
-        height: 210,
+        height: 190,
     },
 
     reportDetailsRoomInfo: {

From aada9063df3cc8a0b56960a874e7e0fb694afb57 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 14:36:04 +0200
Subject: [PATCH 30/40] only show Download button on native platforms

---
 src/pages/ShareCodePage.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 39d30ba57276..802e63593555 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -14,6 +14,8 @@ import * as ReportUtils from '../libs/ReportUtils';
 import MenuItem from '../components/MenuItem';
 import Clipboard from '../libs/Clipboard';
 import * as Expensicons from '../components/Icon/Expensicons';
+import getPlatform from '../libs/getPlatform';
+import CONST from '../CONST';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -37,6 +39,9 @@ class ShareCodePage extends React.Component {
 
         const url = isReport ? `https://new.expensify.com/r/${this.props.report.reportID}` : `https://new.expensify.com/details?login=${this.props.session.email}`;
 
+        const platform = getPlatform();
+        const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
+
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
@@ -64,13 +69,15 @@ class ShareCodePage extends React.Component {
                             onPress={() => Clipboard.setString(url)}
                         />
 
-                        <MenuItem
-                            title={this.props.translate('common.download')}
-                            shouldShowRightIcon
-                            icon={Expensicons.Download}
-                            // eslint-disable-next-line es/no-optional-chaining
-                            onPress={() => this.qrCodeRef.current?.download()}
-                        />
+                        {isNative && (
+                            <MenuItem
+                                title={this.props.translate('common.download')}
+                                shouldShowRightIcon
+                                icon={Expensicons.Download}
+                                // eslint-disable-next-line es/no-optional-chaining
+                                onPress={() => this.qrCodeRef.current?.download()}
+                            />
+                        )}
                     </View>
                 </ScrollView>
             </ScreenWrapper>

From 39cc9600b4916ffa7eecf609523b7b668b3b69b2 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Thu, 11 May 2023 14:37:25 +0200
Subject: [PATCH 31/40] pass url to QRShare component

---
 src/pages/ShareCodePage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 802e63593555..89229a41d03b 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -55,6 +55,7 @@ class ShareCodePage extends React.Component {
                     <View style={styles.shareCodePage}>
                         <QRShareWithDownload
                             ref={this.qrCodeRef}
+                            url={url}
                             title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
                             subtitle={isReport ? ReportUtils.getPolicyName(this.props.report) : this.props.session.email}
                             logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}

From 156d96358878ddbf65e9476fdbc7471dddfc484e Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Fri, 12 May 2023 11:25:36 +0200
Subject: [PATCH 32/40] move share code button to MenuItem

---
 src/CONST.js                   |  1 +
 src/pages/ReportDetailsPage.js | 18 ++++++++----------
 src/styles/styles.js           |  2 +-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index a501dc100f9d..40ed04749442 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -1092,6 +1092,7 @@ const CONST = {
         INFO: 'info',
     },
     REPORT_DETAILS_MENU_ITEM: {
+        SHARE_CODE: 'shareCode',
         MEMBERS: 'member',
         SETTINGS: 'settings',
         LEAVE_ROOM: 'leaveRoom',
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 993d2b95c86e..9ed7bfa86092 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -25,7 +25,6 @@ import CONST from '../CONST';
 import reportPropTypes from './reportPropTypes';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
 import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
-import Button from '../components/Button';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -58,7 +57,14 @@ const defaultProps = {
 
 class ReportDetailsPage extends Component {
     getMenuItems() {
-        const menuItems = [];
+        const menuItems = [
+            {
+                key: CONST.REPORT_DETAILS_MENU_ITEM.SHARE_CODE,
+                translationKey: 'common.shareCode',
+                icon: Expensicons.QrCode,
+                action: () => Navigation.navigate(ROUTES.getReportShareCodeRoute(this.props.report.reportID)),
+            },
+        ];
 
         if (ReportUtils.isArchivedRoom(this.props.report)) {
             return [];
@@ -142,14 +148,6 @@ class ReportDetailsPage extends Component {
                                     >
                                         {chatRoomSubtitle}
                                     </Text>
-
-                                    <Button
-                                        text={this.props.translate('common.shareCode')}
-                                        small
-                                        icon={Expensicons.QrCode}
-                                        onPress={() => Navigation.navigate(ROUTES.getReportShareCodeRoute(this.props.report.reportID))}
-                                        style={{marginVertical: 10, alignSelf: 'center'}}
-                                    />
                                 </View>
                             </View>
                         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index cdf5a29c338a..537240aaacba 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2064,7 +2064,7 @@ const styles = {
         ...flex.flexColumn,
         ...flex.alignItemsCenter,
         ...spacing.mt4,
-        height: 190,
+        height: 170,
     },
 
     reportDetailsRoomInfo: {

From d1f1080dc5bb201017d6da9b1992c244098c200b Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Fri, 12 May 2023 13:12:14 +0200
Subject: [PATCH 33/40] move ShareCode page

---
 src/ROUTES.js                                            | 4 ++--
 src/libs/Navigation/AppNavigator/ModalStackNavigators.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ROUTES.js b/src/ROUTES.js
index 149c46975cad..a98c8970e158 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -60,9 +60,9 @@ export default {
     NEW_TASK,
     REPORT,
     REPORT_WITH_ID: 'r/:reportID',
-    getReportRoute: reportID => `r/${reportID}`,
+    getReportRoute: (reportID) => `r/${reportID}`,
     REPORT_WITH_ID_DETAILS_SHARE_CODE: 'r/:reportID/details/shareCode',
-    getReportShareCodeRoute: reportID => `r/${reportID}/details/shareCode`,
+    getReportShareCodeRoute: (reportID) => `r/${reportID}/details/shareCode`,
     SELECT_YEAR: 'select-year',
     getYearSelectionRoute: (minYear, maxYear, currYear, backTo) => `select-year?min=${minYear}&max=${maxYear}&year=${currYear}&backTo=${backTo}`,
 
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index bc4ef78f866d..0f23aabca498 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -166,7 +166,7 @@ const ReportDetailsModalStackNavigator = createModalStackNavigator([
             return ShareCodePage;
         },
         name: 'Report_Details_Share_Code',
-    }
+    },
 ]);
 
 const TaskModalStackNavigator = createModalStackNavigator([

From 630849e1e858682af48f97938c245678eee230e4 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Fri, 12 May 2023 13:12:44 +0200
Subject: [PATCH 34/40] move profile page

---
 src/ROUTES.js                                      |  2 +-
 .../AppNavigator/ModalStackNavigators.js           | 14 +++++++-------
 src/libs/Navigation/linkingConfig.js               |  8 ++++----
 src/pages/settings/Profile/ProfilePage.js          |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/ROUTES.js b/src/ROUTES.js
index a98c8970e158..33c39ae2d7e0 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -25,7 +25,7 @@ export default {
     HOME: '',
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
-    SETTINGS_PROFILE_SHARE_CODE: 'settings/profile/shareCode',
+    SETTINGS_SHARE_CODE: 'settings/shareCode',
     SETTINGS_DISPLAY_NAME: 'settings/profile/display-name',
     SETTINGS_TIMEZONE: 'settings/profile/timezone',
     SETTINGS_TIMEZONE_SELECT: 'settings/profile/timezone/select',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 0f23aabca498..8759c79d65c2 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -296,6 +296,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Root',
     },
+    {
+        getComponent: () => {
+            const ShareCodePage = require('../../../pages/ShareCodePage').default;
+            return ShareCodePage;
+        },
+        name: 'Settings_Share_Code',
+    },
     {
         getComponent: () => {
             const SettingsWorkspacesPage = require('../../../pages/workspace/WorkspacesListPage').default;
@@ -310,13 +317,6 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Profile',
     },
-    {
-        getComponent: () => {
-            const ShareCodePage = require('../../../pages/ShareCodePage').default;
-            return ShareCodePage;
-        },
-        name: 'Settings_Profile_Share_Code',
-    },
     {
         getComponent: () => {
             const SettingsPronounsPage = require('../../../pages/settings/Profile/PronounsPage').default;
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 36bdb8c34255..06a1df1cebfc 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -30,6 +30,10 @@ export default {
                     Settings_Root: {
                         path: ROUTES.SETTINGS,
                     },
+                    Settings_Share_Code: {
+                        path: ROUTES.SETTINGS_SHARE_CODE,
+                        exact: true,
+                    },
                     Settings_Workspaces: {
                         path: ROUTES.SETTINGS_WORKSPACES,
                         exact: true,
@@ -90,10 +94,6 @@ export default {
                         path: ROUTES.SETTINGS_PROFILE,
                         exact: true,
                     },
-                    Settings_Profile_Share_Code: {
-                        path: ROUTES.SETTINGS_PROFILE_SHARE_CODE,
-                        exact: true,
-                    },
                     Settings_Pronouns: {
                         path: ROUTES.SETTINGS_PRONOUNS,
                         exact: true,
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index cca1f85422f9..182ca074867a 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -109,7 +109,7 @@ const ProfilePage = (props) => {
                         text={props.translate('common.shareCode')}
                         small
                         icon={Expensicons.QrCode}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE_SHARE_CODE)}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_SHARE_CODE)}
                         style={{marginTop: 20, alignSelf: 'center'}}
                     />
                 </OfflineWithFeedback>

From 8e20231599c22b56d39c0db615e932b441245935 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Fri, 12 May 2023 13:18:24 +0200
Subject: [PATCH 35/40] move share code button to SettingsPage

---
 src/pages/home/report/ReportDetailsShareCodePage.js | 4 +---
 src/pages/settings/InitialSettingsPage.js           | 7 +++++++
 src/pages/settings/Profile/ProfilePage.js           | 9 ---------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/pages/home/report/ReportDetailsShareCodePage.js b/src/pages/home/report/ReportDetailsShareCodePage.js
index 99880df3f2d7..7501be114e23 100644
--- a/src/pages/home/report/ReportDetailsShareCodePage.js
+++ b/src/pages/home/report/ReportDetailsShareCodePage.js
@@ -27,9 +27,7 @@ class ReportDetailsShareCodePage extends React.Component {
     render() {
         // eslint-disable-next-line es/no-optional-chaining
 
-        return (
-            <ShareCodePage report={this.props.report} />
-        );
+        return <ShareCodePage report={this.props.report} />;
     }
 }
 
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 84ae9e30cd3c..eba3ccefb9fd 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -177,6 +177,13 @@ class InitialSettingsPage extends React.Component {
         const profileBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(this.props.loginList);
 
         return [
+            {
+                translationKey: 'common.shareCode',
+                icon: Expensicons.QrCode,
+                action: () => {
+                    Navigation.navigate(ROUTES.SETTINGS_SHARE_CODE);
+                },
+            },
             {
                 translationKey: 'common.workspaces',
                 icon: Expensicons.Building,
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 182ca074867a..88890bcd0f99 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -23,7 +23,6 @@ import styles from '../../../styles/styles';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import ONYXKEYS from '../../../ONYXKEYS';
 import * as UserUtils from '../../../libs/UserUtils';
-import Button from '../../../components/Button';
 
 const propTypes = {
     /* Onyx Props */
@@ -104,14 +103,6 @@ const ProfilePage = (props) => {
                         anchorPosition={styles.createMenuPositionProfile}
                         size={CONST.AVATAR_SIZE.LARGE}
                     />
-
-                    <Button
-                        text={props.translate('common.shareCode')}
-                        small
-                        icon={Expensicons.QrCode}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_SHARE_CODE)}
-                        style={{marginTop: 20, alignSelf: 'center'}}
-                    />
                 </OfflineWithFeedback>
                 <View style={[styles.mt4]}>
                     {_.map(profileSettingsOptions, (detail, index) => (

From 4569da0a92f351acd59ea79fccd3e76ee49e439e Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Fri, 12 May 2023 13:40:48 +0200
Subject: [PATCH 36/40] improve propTypes structure

---
 .../QRShare/QRShareWithDownload/index.js      | 11 +++-----
 .../QRShareWithDownload/index.native.js       | 10 +++----
 src/components/QRShare/index.js               | 17 +++---------
 src/components/QRShare/propTypes.js           | 27 +++++++++++++++++++
 4 files changed, 38 insertions(+), 27 deletions(-)
 create mode 100644 src/components/QRShare/propTypes.js

diff --git a/src/components/QRShare/QRShareWithDownload/index.js b/src/components/QRShare/QRShareWithDownload/index.js
index 9e5cc17d0536..8cb7be79f7ad 100644
--- a/src/components/QRShare/QRShareWithDownload/index.js
+++ b/src/components/QRShare/QRShareWithDownload/index.js
@@ -1,12 +1,9 @@
 import React, {Component} from 'react';
 import fileDownload from '../../../libs/fileDownload';
-import QRShare, {qrShareDefaultProps, qrSharePropTypes} from '..';
+import QRShare from '..'
+import {qrShareDefaultProps, qrSharePropTypes} from '../propTypes';
 import getQrCodeFileName from '../getQrCodeDownloadFileName';
 
-const propTypes = qrSharePropTypes;
-
-const defaultProps = qrShareDefaultProps;
-
 class QRShareWithDownload extends Component {
     qrShareRef = React.createRef();
 
@@ -36,7 +33,7 @@ class QRShareWithDownload extends Component {
         );
     }
 }
-QRShareWithDownload.propTypes = propTypes;
-QRShareWithDownload.defaultProps = defaultProps;
+QRShareWithDownload.propTypes = qrSharePropTypes;
+QRShareWithDownload.defaultProps = qrShareDefaultProps;
 
 export default QRShareWithDownload;
diff --git a/src/components/QRShare/QRShareWithDownload/index.native.js b/src/components/QRShare/QRShareWithDownload/index.native.js
index c975917dd708..27f05038733a 100644
--- a/src/components/QRShare/QRShareWithDownload/index.native.js
+++ b/src/components/QRShare/QRShareWithDownload/index.native.js
@@ -1,12 +1,10 @@
 import React, {Component} from 'react';
 import ViewShot from 'react-native-view-shot';
 import fileDownload from '../../../libs/fileDownload';
-import QRShare, {qrShareDefaultProps, qrSharePropTypes} from '..';
+import QRShare from '..'
+import {qrShareDefaultProps, qrSharePropTypes} from '../propTypes';
 import getQrCodeFileName from '../getQrCodeDownloadFileName';
 
-const propTypes = qrSharePropTypes;
-
-const defaultProps = qrShareDefaultProps;
 
 class QRShareWithDownload extends Component {
     qrCodeScreenshotRef = React.createRef();
@@ -32,7 +30,7 @@ class QRShareWithDownload extends Component {
         );
     }
 }
-QRShareWithDownload.propTypes = propTypes;
-QRShareWithDownload.defaultProps = defaultProps;
+QRShareWithDownload.propTypes = qrSharePropTypes;
+QRShareWithDownload.defaultProps = qrShareDefaultProps;
 
 export default QRShareWithDownload;
diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js
index 4ab5a69274e7..014cddcf5090 100644
--- a/src/components/QRShare/index.js
+++ b/src/components/QRShare/index.js
@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import QRCodeLibrary from 'react-native-qrcode-svg';
 import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
@@ -10,22 +9,14 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDime
 import compose from '../../libs/compose';
 import variables from '../../styles/variables';
 import ExpensifyWordmark from '../../../assets/images/expensify-wordmark.svg';
+import {qrSharePropTypes, qrShareDefaultProps} from './propTypes'
 
 const propTypes = {
-    url: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    subtitle: PropTypes.string,
-    logo: PropTypes.string,
-
+    ...qrSharePropTypes,
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
-const defaultProps = {
-    subtitle: undefined,
-    logo: undefined,
-};
-
 class QRShare extends Component {
     constructor(props) {
         super(props);
@@ -102,8 +93,6 @@ class QRShare extends Component {
     }
 }
 QRShare.propTypes = propTypes;
-QRShare.defaultProps = defaultProps;
+QRShare.defaultProps = qrShareDefaultProps;
 
 export default compose(withLocalize, withWindowDimensions)(QRShare);
-
-export {propTypes as qrSharePropTypes, defaultProps as qrShareDefaultProps};
diff --git a/src/components/QRShare/propTypes.js b/src/components/QRShare/propTypes.js
new file mode 100644
index 000000000000..b6a4b188f9ad
--- /dev/null
+++ b/src/components/QRShare/propTypes.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+const qrSharePropTypes = {
+    /**
+     * The QR code URL
+     */
+    url: PropTypes.string.isRequired,
+    /**
+     * The title that is shown undedr the QR Code (usually the user or report name)
+     */
+    title: PropTypes.string.isRequired,
+    /**
+     * The subtitle which will be shown below the title (usually user email or workspace name)
+     * */
+    subtitle: PropTypes.string,
+    /**
+     * The logo which will be display in the middle of the QR code
+     */
+    logo: PropTypes.string,
+};
+
+const defaultProps = {
+    subtitle: undefined,
+    logo: undefined,
+};
+
+export {qrSharePropTypes, defaultProps as qrShareDefaultProps};

From 01e8334bf64fe2a57afaf4877494350c7a901eb9 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Fri, 12 May 2023 14:00:38 +0200
Subject: [PATCH 37/40] Update src/pages/ShareCodePage.js

Co-authored-by: Robert Chen <robert@expensify.com>
---
 src/pages/ShareCodePage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 89229a41d03b..8ce21ccabd65 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -37,7 +37,7 @@ class ShareCodePage extends React.Component {
     render() {
         const isReport = this.props.report != null && this.props.report.reportID != null;
 
-        const url = isReport ? `https://new.expensify.com/r/${this.props.report.reportID}` : `https://new.expensify.com/details?login=${this.props.session.email}`;
+        const url = isReport ? `${CONST.NEW_EXPENSIFY_URL}r/${this.props.report.reportID}` : `${CONST.NEW_EXPENSIFY_URL}details?login=${this.props.session.email}`;
 
         const platform = getPlatform();
         const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;

From acc8b1133f427ec17a6779803c3a9f163f3ca346 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Fri, 12 May 2023 14:03:53 +0200
Subject: [PATCH 38/40] remove unused comment

---
 src/pages/home/report/ReportDetailsShareCodePage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/home/report/ReportDetailsShareCodePage.js b/src/pages/home/report/ReportDetailsShareCodePage.js
index 7501be114e23..44eaed2b30a8 100644
--- a/src/pages/home/report/ReportDetailsShareCodePage.js
+++ b/src/pages/home/report/ReportDetailsShareCodePage.js
@@ -25,8 +25,6 @@ const defaultProps = {
 // eslint-disable-next-line react/prefer-stateless-function
 class ReportDetailsShareCodePage extends React.Component {
     render() {
-        // eslint-disable-next-line es/no-optional-chaining
-
         return <ShareCodePage report={this.props.report} />;
     }
 }

From ad0db0062c2c69176198e11e9c1cbd4a06a7a3b6 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Fri, 12 May 2023 14:04:36 +0200
Subject: [PATCH 39/40] fix comment

---
 src/components/QRShare/propTypes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/QRShare/propTypes.js b/src/components/QRShare/propTypes.js
index b6a4b188f9ad..bcb55f99ea69 100644
--- a/src/components/QRShare/propTypes.js
+++ b/src/components/QRShare/propTypes.js
@@ -6,7 +6,7 @@ const qrSharePropTypes = {
      */
     url: PropTypes.string.isRequired,
     /**
-     * The title that is shown undedr the QR Code (usually the user or report name)
+     * The title that is displayed below the QR Code (usually the user or report name)
      */
     title: PropTypes.string.isRequired,
     /**

From cb00561c8866dd82f05387c0d66acd793a55b30b Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Fri, 12 May 2023 14:15:17 +0200
Subject: [PATCH 40/40] convert ReportDetailsShareCodePage to functional
 component

---
 src/pages/home/report/ReportDetailsShareCodePage.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/report/ReportDetailsShareCodePage.js b/src/pages/home/report/ReportDetailsShareCodePage.js
index 44eaed2b30a8..1dbfe25d2068 100644
--- a/src/pages/home/report/ReportDetailsShareCodePage.js
+++ b/src/pages/home/report/ReportDetailsShareCodePage.js
@@ -22,11 +22,8 @@ const defaultProps = {
     report: undefined,
 };
 
-// eslint-disable-next-line react/prefer-stateless-function
-class ReportDetailsShareCodePage extends React.Component {
-    render() {
-        return <ShareCodePage report={this.props.report} />;
-    }
+function ReportDetailsShareCodePage(props) {
+    return <ShareCodePage report={props.report} />;
 }
 
 ReportDetailsShareCodePage.propTypes = propTypes;