[$250] [Image] Implement the ability to copy images to the clipboard

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Coming from #3313

Action Performed:

Right-click or long-press on an image in a chat.

Expected Result:

1. A context menu appears, displaying a single option: Copy image to clipboard
2. Clicking on this option should copy the image to the clipboard, where it can be pasted somewhere else.

Note: the solution implemented must be an offline-first solution. Meaning the user should be able to copy the image to their clipboard, whether or not they have internet connection.

Actual Result:

1. The normal context menu appears.
2. Clicking on Copy to clipboard copies the HTML image tag to the clipboard, not the binary image itself.

Workaround:

Screenshot the image? Also you can click on it and download it.

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.0.85-3
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

Upwork job: https://www.upwork.com/jobs/~012fd9a807faaf42aa
View all open jobs on Upwork

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b3973ec74ce159e9
• Upwork Job ID: 1782953316490067968
• Last Price Increase: 2024-05-01

[roryabraham]

Okay, there was a fair deal of discussion over in #3313 and other issues, but the task at hand here is to:

1. (internal) Create an Expensify/ fork of https://github.com/react-native-clipboard/clipboard
2. Create a separate fork of https://github.com/react-native-clipboard/clipboard for local testing.
3. Provide a complete implementation of this issue in your separate fork.
4. Point this project and your fork for local testing.
5. Add a new context menu type for images, display it when images are right-clicked or long-pressed. This PR might serve as a useful guide.
6. Once that's working, submit a PR from your fork of react-native-clipboard to the Expensify/react-native-clipboard fork.
7. Also submit a PR from your fork of react-native-clipboard to the upstream project.
8. Create a PR in this repo with your implementation from step 5 above, but point the project at the Expensify/react-native-clipboard fork instead of your personal one. (should be on HOLD until the PR from step 6 is merged.
9. Lastly, if/when your PR from step 7 is merged by the project maintainers, create another PR to point this repo at the upstream repo: https://github.com/react-native-clipboard/clipboard

[roryabraham]

No Upwork job created for this yet.

[puneetlath]

Upwork job created here: https://www.upwork.com/jobs/~011432fcc2168828e1

@Drewfergusson would you be interested in this? Given you implemented the first part.

[Drewfergusson]

@puneetlath things have gotten quite a bit busier for me lately so I'm going to have to pass.

[MelvinBot]

@puneetlath, @roryabraham Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!