[$250] Top section of Settings doesn't remain fixed like we do on other pages

[m-natarajan]

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.30-11
Reproducible in staging?: Yes
Reproducible in production?: Yes
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
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1725640618731099

Action Performed:

1. Go to staging.new.expensify.com
2. Click Settings and scroll the LHN

Expected Result:

Top section of setting remain fixed (sticky) like other pages

Actual Result:

Top section of Settings is not sticky like we do on other pages

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

CleanShot.2024-09-06.at.18.35.54.mp4

Recording.520.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021832123307878163515
• Upwork Job ID: 1832123307878163515
• Last Price Increase: 2024-09-06
• Automatic offers:
• ikevin127 | Reviewer | 103886812

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

Triggered auto assignment to @alexpensify (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/~021832123307878163515

[melvin-bot]

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

[gijoe0295]

Proposal

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

Top section of Settings is not sticky like we do on other pages

What is the root cause of that problem?

The account switcher is a normal component in the ScrollView.

App/src/pages/settings/InitialSettingsPage.tsx

Lines 436 to 442 in 67333b9

	<ScrollView
	ref={scrollViewRef}
	onScroll={onScroll}
	scrollEventThrottle={16}
	contentContainerStyle={[styles.w100, styles.pt4]}
	>
	{headerContent}

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

Add stickyHeaderIndices={[0]} to the ScrollView to make the first child sticky (i.e. the headerContent child).

Move styles.pt4 from ScrollView and add backgroundColor: theme.appBG to the headerContent wrapper style.

App/src/pages/settings/InitialSettingsPage.tsx

Line 440 in 67333b9

contentContainerStyle={[styles.w100, styles.pt4]}

App/src/pages/settings/InitialSettingsPage.tsx

Line 373 in 67333b9

<View style={[styles.ph5, styles.pb3]}>

[gijoe0295]

Update proposal

• Add code permalinks

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2024-09-06 19:09:22 UTC.

Proposal

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

Top section of Settings doesn't remain fixed like we do on other pages

What is the root cause of that problem?

We are adding headercontent in ScrollView

App/src/pages/settings/InitialSettingsPage.tsx

Line 442 in 67333b9

{headerContent}

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

Move headerContent above scrollView

App/src/pages/settings/InitialSettingsPage.tsx

Line 442 in 67333b9

{headerContent}

          {headerContent}
            <ScrollView
                ref={scrollViewRef}
                onScroll={onScroll}
                scrollEventThrottle={16}
                contentContainerStyle={[styles.w100]}
            >

We also need to move styles.pt4 from scrollView to headerContent styles.

Note

Using stickyHeaderIndices={[0]} will cause the headerContent to be displayed with a scrollbar. You can see in attached video even in workspace list section the header is sticky but we don't show scrollbar.

Result with my solution

Screen.Recording.2024-09-07.at.12.09.28.AM.mov

Result with stickyindices

Screen.Recording.2024-09-07.at.12.12.35.AM.mov

What alternative solutions did you explore? (Optional)

[ikevin127]

♻️ Will start reviewing the proposals in ~12h.

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-09-07 12:55:13 UTC.

Proposal

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

• Settings page header is not fixed like on other pages.

What is the root cause of that problem?

• headerContent is included in the ScrollView here

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

• Move headerContent out of ScrollView and migrate top padding from from ScrollView to ScreenWrapper to retain top padding on same spot,
• So, change

style={[styles.w100, styles.pb0, styles.pt4]}

App/src/pages/settings/InitialSettingsPage.tsx

Line 431 in 4af620b

style={[styles.w100, styles.pb0]}

And

{headerContent}
<ScrollView
   ref={scrollViewRef}
   onScroll={onScroll}
   scrollEventThrottle={16}
   contentContainerStyle={[styles.w100]}
>
     

App/src/pages/settings/InitialSettingsPage.tsx

Lines 436 to 442 in 4af620b

	<ScrollView
	ref={scrollViewRef}
	onScroll={onScroll}
	scrollEventThrottle={16}
	contentContainerStyle={[styles.w100, styles.pt4]}
	>
	{headerContent}

• Additionally add bottom border to hearedContent to maintain consistent look on the page and to add an end point to the scrollbar.

Check this screenshot

<View style={[styles.ph5, styles.pb3 , styles.borderBottom]}>

App/src/pages/settings/InitialSettingsPage.tsx

Line 373 in 4af620b

<View style={[styles.ph5, styles.pb3]}>

Optional change

• Scrollbar could be hidden, by passing additional ScrollView parameter value.

showsVerticalScrollIndicator = {false}

App/src/pages/settings/InitialSettingsPage.tsx

Lines 436 to 441 in 4af620b

	<ScrollView
	ref={scrollViewRef}
	onScroll={onScroll}
	scrollEventThrottle={16}
	contentContainerStyle={[styles.w100, styles.pt4]}
	>

• Only hiding scrollbar without inserting bottom border to headerContent is also a considerable option (similar to Inbox LHN).

• Ps. Currently react-native hides scrollbar on ios and android so hiding scrollbar would additionally increase cross platform consistency. (In case scrollbar behaviour could be forced on ios and android if needed)

Result With Bottom Border

Result With Bottom Border and Hidden Scrollbar

Result With only Hidden Scrollbar

What alternative solutions did you explore? (Optional)

• stickyHeaderIndices={[0]} could be added to ScrollView along with showsVerticalScrollIndicator = {false} to hide scrollbar and add backgroundColor: theme.appBG to headerContent to avoid content overlapping.
  Optionally bottom border could be added to hederContent.