[HOLD for payment 2024-06-06] [$250] [Banner] text overflow on native

[rushatgabhane]

Coming from #41199 (review)

Problem

On native platforms, the text inside Banner component overflows.

Use the linked PR to test it.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01da04c416bad8e2f6
• Upwork Job ID: 1792579160211070976
• Last Price Increase: 2024-05-20
• Automatic offers:
• Krishna2323 | Contributor | 0

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

Triggered auto assignment to @lschurr (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.

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

[Banner] text overflow on native

What is the root cause of that problem?

This is a know issue in react native and is caused by using flexRow on parent view.

What changes do you think we should make in order to solve the problem?

We need to add {flex: 1, flexWrap: 'wrap'} style to Text inside Banner. Or { flexShrink: 1 }.

App/src/components/Banner.tsx

Lines 99 to 103 in e8ae3c5

	<Text
	style={textStyles}
	onPress={onPress}
	suppressHighlighting
	>

We also need to apply styles.justifyContentCenter to main View container.

App/src/components/Banner.tsx

Line 74 in e8ae3c5

<View

Or we can move <Tooltip text={translate('common.close')}> into the same view container which renders the icon and text and then refactor some stylings.

What alternative solutions did you explore? (Optional)

Result

[melvin-bot]

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

[melvin-bot]

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

[rushatgabhane]

@sobitneupane jumping the gun here
@Krishna2323 could you please raise a PR? It's blocking PR #41199 (review)