bug: Image Name Overlaps Save to Gallery Icon in Image Viewer

[jjinendra3]

Description

When opening an image sent in a chat, the filename displayed at the top contains unnecessary details, including the date and time. Since the date and time are already shown in the chat header (beside the sender’s name), this redundancy can be removed. Additionally, long filenames overlap with the "Save to Gallery" icon, making it difficult for users to notice the download option. (Screenshot)

Steps to Reproduce

1. Open a chat where an image has been sent.
2. Tap on the image to open it in the image viewer.
3. Observe that the filename at the top includes unnecessary details (date and time) and may overlap with the "Save to Gallery" icon if it's too long.

Expected Behavior

• The filename should be clamped to prevent overlapping with the save/download icon.

• The date and time should not be displayed in the image viewer as they are already shown in the chat header. (Screenshot)

• Some possible fixes:

  1. Add a button to reveal the full filename in an alert when tapped.
  2. Display the filename below the image preview in the chat instead of at the top in the image viewer.
     (Screenshot)

Actual Behavior

• The filename is long and overlaps with the "Save to Gallery" icon.
• Users may not realize there is an option to download the image due to this issue.

Possible Fixes

• Truncate long filenames with ellipsis (...).
  Image
• Remove redundant date and time from the filename in the image viewer.
• Provide an alternative way to view the full filename without affecting UI clarity.

Would love to hear thoughts on the best approach to resolve this! 🚀

[jjinendra3]

@diegolmello , would love to know your thoughts on this, if you approve i can take this up :)

[Rohit3523]

There is a bug in react-native-screens and react-navigation which fails to truncate long title only in Android. They have fixed this in recent version and we are getting to update the libraries and test the app.

[jjinendra3]

@Rohit3523 I see, On second thought, using ellipsis may not be the best solution, especially in cases where multiple files have similar names, with key differentiating details appearing toward the end.

A more effective approach could be to implement the file name display similar to how it's handled in the web client (reference), ensuring all essential details remain visible. Alternatively, as mentioned earlier, displaying the full filename name below the image preview could also be a viable option (example).

[Rohit3523]

multiple files have similar names

I don't think multiple files can have same name due to os limitations.

[jjinendra3]

Hey @Rohit3523,

I see , and I completely agree that OS limitations prevent identical file names. My concern was more about similar file names, like:

• LongImageFileThatServesAPurposeIteration1.png
• LongImageFileThatServesAPurposeIteration2.png
• LongImageFileThatServesAPurposeIteration3.png

With ellipsis, these might all appear as:
LongImageFileThatServes...

which could make it difficult to differentiate between them. A better approach might be to display file names the way it's done in the web client (reference), ensuring that important details remain visible.

I understand that the ellipsis behavior will likely be implemented as part of a library update, which is great and will happen naturally in future updates. However, i feel, it's crucial for the app to fully display all relevant details of any attachment for end users. Having the file name clearly visible—either on top or below the image preview—would enhance usability and align with the way major platforms like Slack and Discord handle file previews.

Would love to hear your thoughts on this! 😊🚀