App: [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [$500] IOS - Private notes are displaying extra spaces and text beyond the box boundaries

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

Action Performed:

Open a chat.
Click on the header and navigate to “Private notes”
Enter “Test1Test2” and save it.
Observe that “Test2” extends beyond the box boundaries

Expected Result:

Private notes should not display extra spaces, and text should be displayed correctly within the box

Actual Result:

Private notes are showing extra spaces, and text is extending beyond the box boundaries

Workaround:

Unknown

Platforms:

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

Android / native
Android / Chrome
iOS / native
iOS / Safari
MacOS / Chrome / Safari
MacOS / Desktop

Version Number: v1.3.75-8

Reproducible in staging?: Y

Reproducible in production?: Y

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

https://github.com/Expensify/App/assets/115492554/d83b0ab5-bafe-423f-995e-3710f1d372f9

https://github.com/Expensify/App/assets/115492554/8dfb3140-4e5c-44d9-a5ca-b6f0947c8d41

Expensify/Expensify Issue URL:

Issue reported by: @ayazhussain79

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696199737738539

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01125e9386d4320219
Upwork Job ID: 1708869806201487360
Last Price Increase: 2023-10-02

About this issue

Original URL
State: closed
Created 9 months ago
Comments: 17 (4 by maintainers)

Most upvoted comments

Proposal

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

Private notes are showing extra spaces, and text is extending beyond the box boundaries

What is the root cause of that problem?

Looks like a bug related to react-native-render-html Since we do not use lineHeight for RenderHTML element Line select maximum values

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

We can update this component

https://github.com/Expensify/App/blob/ad5c63285b50f9031039fe31b8a875fe72392d7d/src/components/MenuItemRenderHTMLTitle/index.native.js#L10

Which has no styles

As styles we can take styles from the web Which will fit perfectly And fix bug

Some updates: In order for the text to start displaying correctly It is enough to wrap RenderHTML in View without styles

But I think we need to follow the monotony So I’d rather take the styles from the web

function MenuItemRenderHTMLTitle(props) {
    return (
        <View style={styles.renderHTMLTitle}>
            <RenderHTML html={props.title} />
        </View>
    );
}

What alternative solutions did you explore? (Optional)

To be sure that the changes will not affect anything We can add a new parameter that will add or not a wrapper for RenderHTML

ZhenjaHorbach on Oct 2, 2023