[$250] Compose box - Public Image link doesn't display image preview

[lanitochka17]

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

---

Version Number: 9.0.58-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5187439
Issue reported by: Applause - Internal Team

Action Performed:

1. Open New expensify app in iOS
2. Send: to a chat along with some text.

Expected Result:

Image previews should be available in compose box and in chat history

Actual Result:

Image previews are not available

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6656727_1730909979445.RPReplay_Final1730909315.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854955488136976314
• Upwork Job ID: 1854955488136976314
• Last Price Increase: 2024-11-08

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021854955488136976314

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[ikevin127]

This is the actual image URL used in the testing video:

https://images.unsplash.com/photo-1709983723739-d72ea88434dd?g=80&w=2940&auto=format&fit=crop&ixliberb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

I looked into this and unless there's a regression test which failed, based on which this issue was created - I think this is expected behaviour because we don't have the preview functionality available on native platforms, only on web based platforms (Web, Desktop and Android / iOS mWeb).

In react-native-live-markdown -> MarkdownTextInput.web.tsx calls forceRefreshAllImages which makes the preview available on web only when using the proper syntax, which is not called on native (MarkdownTextInput.tsx) because forceRefreshAllImages is web based.

Example of the feature on web based platforms:

Test image markdown syntax

![test](https://images.unsplash.com/photo-1709983723739-d72ea88434dd?g=80&w=2940&auto=format&fit=crop&ixliberb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

Example on Android: mWeb

chrome.mov

On native platforms (iOS / Android) we only see the picture after posting it using image markdown syntax, for example:

Test test

![test](https://images.unsplash.com/photo-1709983723739-d72ea88434dd?g=80&w=2940&auto=format&fit=crop&ixliberb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

When posted, this will display Test test, under which we will see the actual picture:

ScreenRecording_11-09-2024.16-22-35_1.MP4

I was able to gether this information from the following PRs:

• Inline images preview follow ups react-native-live-markdown#500
• Add inline images preview to the Live Markdown Input on the web #49250

@bfitzexpensify Unless this issue is about implementing the previews feature on native platforms, I think it can be closed as not a bug.

[melvin-bot]

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

[rojiphil]

I looked into this and unless there's a regression test which failed, based on which this issue was created - I think this is expected behaviour

Thanks @ikevin127 for your inputs. And yeah, it seems like the preview support is only via markdown and that too only on web/mweb platforms. So, it looks like an expected behavior.

However, the OP for this issue seems to suggest that this was caught during regression testing.
@lanitochka17 Can you please share the regression test details? May be it is referring to the preview support via markdown.
Cc @bfitzexpensify

[bfitzexpensify]

Here are the test details that caught this:

Steps

1. Navigate to any chat.
2. Compose a new message with both a public image URL and accompanying text.
3. Example: An inline image and some text! off
4. Verify that the image thumbnail displays below the message in the composer.
5. Send the message.
6. Verify that the message correctly displays the image thumbnail alongside the text.
7. Click on the thumbnail.
8. Verify that the image preview modal correctly displays

[rojiphil]

Here are the test details that caught this:

Thanks @bfitzexpensify. The regression test comes from this PR. But, based on the comment here it does not look like a regression here. I think we can close this out unless there is something more to the story.

[bfitzexpensify]

Cool, agreed.