AttachmentView's header_title is overlapping with download icon

[sher999]

Description:

In attachmentView page viewing an image with long name, it will overlap with the right Icon (download button)

Environment Information:

• Rocket.Chat Server Version: 7.1.0
• Rocket.Chat App Version: 4.56.0 , 4.55.0
• Device Name: Android Poco f4, pixel 3a
• OS Version: android 14

Steps to reproduce:

1. Open a chat on chats page
2. then open an image on chat which has a large name
3. On the header of the attcahmentView page title and download button is overlapping

Expected behavior:

Screenshot

Actual behavior:

Screenshot

### Additional context:

tried solving it with trimming the tittle to 20 to 30 subString

const options = {
			title: title || '',
			headerLeft: () => (
				<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.fontDefault} />
			),
			
			headerRight: () => 
				Allow_Save_Media_to_Gallery && !isImageBase64(attachment.image_url) ? (
					<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.fontDefault} />
				) : null
		};

[Rohit3523]

This was a known issue in React Native Screens, and it was recently fixed in React Native Screens v4.

native header now uses flexbox model (in VDOM) - long story short - long titles are now truncated properly 

[sher999]

Should I continue working on it ?

[Rohit3523]

Sure, try upgrading the package first.

[sher999]

Upgraded react-native-screens @4.3.0 doesn't work on android ,

adding headerTitleAlign to center works neatly

here is the screenshot of Ios and android

On android

On Iphone

[Rohit3523]

We're currently using react-navigation/native-stack version 6, but the fix we need is still in a draft PR (#12135).

We have two options:

1. Upgrade to version 7 (release notes) and see if it solves the issue.
2. Wait for the PR to be merged and released for version 6.

Can you try upgrading the package to version 7 and test the navigation flows?

[sher999]

Yeah sure trying for version 7.

[sher999]

Yes it worked with updating the react-navigation/native-stack to "7.1.10" and @react-navigation/native to "7.0.9"

ScreenShot

thanks for your guidance.

[JASIM0021]

Is this issue close to being resolved, @sher999?

[sher999]

This has been solved but not seen by mentor

[Rohit3523]

I will have to check the changes in navigation library as it's a major release by them

[Rohit3523]

Could you please update all the @react-navigation/* packages to version 7 and test the navigation?
It's important to keep all the sub-packages at the same version, as they depend on the core package.

Thanks