Android -WS Invite - No scroll visible on WS members invite page on light theme

[kbecciv]

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: 1.4.49-0
Reproducible in staging?: y
Reproducible in production?: y
Issue found when executing PR: #37727
Issue reported by:
Slack conversation:

Action Performed:

Precondition: Make the app be in light mode

1. Go to Workspace members invite page
2. Scroll up and down and observe the right edge of the screen
3. Change the theme from light mode to dark mode
4. Do step 2 again and observe
5. Do and compare step 2 with mWeb

Expected Result:

There should be a visible scroll bar on the right edge of the screen

Actual Result:

The scroll bar is not visible on light theme

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

Add any screenshot/video evidence

Bug6406837_1709896037961.Screen_Recording_20240308_134956_New_Expensify.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[kbecciv]

@MitchExpensify I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[ShridharGoel]

Proposal

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

Scroll indicator is not visible in light theme.

What is the root cause of that problem?

indicatorStyle is fixed as "white" in SectionList.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 451 to 472 in f0cd513

	<SectionList
	ref={listRef}
	sections={sections}
	stickySectionHeadersEnabled={false}
	renderSectionHeader={renderSectionHeader}
	renderItem={renderItem}
	getItemLayout={getItemLayout}
	onScroll={onScroll}
	onScrollBeginDrag={onScrollBeginDrag}
	keyExtractor={(item) => item.keyForList}
	extraData={focusedIndex}
	indicatorStyle="white"
	keyboardShouldPersistTaps="always"
	showsVerticalScrollIndicator={showScrollIndicator}
	initialNumToRender={12}
	maxToRenderPerBatch={maxToRenderPerBatch}
	windowSize={5}
	viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
	testID="selection-list"
	onLayout={onSectionListLayout}
	style={(!maxToRenderPerBatch || isInitialSectionListRender) && styles.opacity0}
	/>

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

indicatorStyle should be set conditionally depending on the theme. For light theme, it should be default or black.

[ghost]

Proposal

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

Android -WS Invite - No scroll visible on WS members invite page on light theme

What is the root cause of that problem?

The root cause of this issue is that in all the components i.e. this -

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Line 122 in 63dee4e

indicatorStyle="white"

this -

App/src/components/OptionsList/BaseOptionsList.tsx

Line 242 in 63dee4e

indicatorStyle="white"

and this -

App/src/components/SelectionList/BaseSelectionList.tsx

Line 462 in 63dee4e

indicatorStyle="white"

in all these places indicatorStyle is always fixed to white.

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

We need to toggle it between white and black depending on the theme and white by default

What alternative solutions did you explore? (Optional)

N/A

[allgandalf]

Proposal

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

No scroll visible on WS members invite page on light theme

What is the root cause of that problem?

This bug is only associated with Native devices, I tested it on mWeb safari/ laptop browser and the scroll bar is visible in dark mode as well as light mode opposite to the system mode:

mWeb

Light Mode Browser:

Dark Mode Browser:

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

We actually need to modify only Native files, as this bug doesn't occur for other platforms:

App/src/components/SelectionList/index.android.tsx

Lines 10 to 16 in f0cd513

	<BaseSelectionList
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	ref={ref}
	shouldDelayFocus
	onScrollBeginDrag={() => Keyboard.dismiss()}
	/>

App/src/components/SelectionList/index.ios.tsx

Lines 10 to 15 in f0cd513

	<BaseSelectionList<TItem>
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	ref={ref}
	onScrollBeginDrag={() => Keyboard.dismiss()}
	/>

So, we need to conditionally change indicatorStyle, to either white or black contrast to the system mode.

As @godofoutcasts94 mentioned, if this bug also exists for optionsList (Haven't tested that personally), we would be needing to update those files as wel.

What alternative solutions did you explore? (Optional)

N/A

[ShridharGoel]

@GandalfGwaihir We should still fix it in the main place itself as mentioned in my proposal here, since that would lead to more consistency while keeping the functionality correct. It will show correctly for all platforms and we'll not need to have different props for different platforms.

[allgandalf]

Well might be @ShridharGoel , I felt that if we can only reproduce this bug on native applications maybe we should fix it there

[melvin-bot]

@MitchExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MitchExpensify]

I don't see a scroll bar on either dark or light, I don't think this is worth fixing right now - Closing

[MitchExpensify]

Bumping our fearless wave collect leader here https://expensify.slack.com/archives/C036QM0SLJK/p1710260567333629?thread_ts=1709924791.377559&cid=C036QM0SLJK

[ShridharGoel]

@MitchExpensify The scroll bar shows in the dark mode if you have a long enough member list.