[Due for payment 2025-07-22] [$250] Android- Troubleshoot- Unable to scroll troubleshoot panel

@maddylewis

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.69-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Device used: Samsung s10/ Android 12
App Component: Other

Action Performed:

Open hybrid android app
Log in with any account and open any chat
Perform four finger tap to open troubleshoot panel

Expected Result:

Troubleshoot panel should be scrolling down until the last option available

Actual Result:

Unable to scroll troubleshoot panel

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6864399_1750323075828.Screen_Recording_20250619_114652_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021935654877567946682
Upwork Job ID: 1935654877567946682
Last Price Increase: 2025-06-19
Automatic offers:

QichenZhu | Reviewer | 107966403

Issue Owner

Current Issue Owner: @maddylewis

@maddylewis

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

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

@QichenZhu

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

@walidkhaddoum

📣 @walidkhaddoum! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

Problem statement

On Android the Settings ▶ Troubleshoot sheet opens, but vertical drag gestures are swallowed, so users cannot reach the lower settings/actions.

Root cause (analysis)

SettingsTroubleshootPage is rendered inside ScreenWrapper.
On Android, when no keyboard is expected, ScreenWrapper falls back to a plain View; the inner content therefore loses the scrolling behaviour normally provided by ScrollView.
Because the sheet is shown inside a modal / pop-over, Android also needs nestedScrollEnabled={true} to allow gestures to propagate through the parent container. Without this prop, touches never reach the inner scroll view, even if one is present. :contentReference[oaicite:0]{index=0}

Proposed fix

Always wrap SettingsTroubleshootPage in a ScrollView (remove the Android-only View fallback in ScreenWrapper, or pass an override prop just for this route).
Add nestedScrollEnabled to the ScrollView only on Android.
Add contentContainerStyle={{paddingBottom: variables.contentPaddingLarge}} so the final list item isn’t obscured by the bottom safe-area / gesture bar.
Unit tests
- Jest snapshot of the rendered tree to catch regressions in wrapper selection.
E2E tests
- Extend existing Detox suite Settings_Troubleshoot with
```
await element(by.id('troubleshootList')).scroll(200, 'down');
```
- Assert that the final toggle/action is visible after the scroll.

Validation matrix

Platform	OS	Result
Android 12	Emulator (Pixel 4)	✅ scrolls
Android 14	Physical (Pixel 6)	✅ scrolls
iOS 17	Simulator	No regression

Timeline

Day	Task
0	Reproduce, create branch `fix/64550-android-scroll`
1	Implement code + Jest tests
2	Detox test, manual QA, PR with screenshots

Risk & rollback

Change is isolated to one page and guarded by tests; rollback is a single-file revert if unforeseen issues arise.

I am ready to open a PR from my fork once this proposal is approved.

Contributor details
Your Expensify account email: walidkhaddoum@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~017c298d5a7b37817b

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

@walidkhaddoum

Hi @walidkhaddoum, thanks for your interest in this issue. The proposal doesn't follow the guideline, so please take a moment to read it.

Proposal

Problem

When performing a four finger tap on Android to open the troubleshoot panel, the panel appears but cannot be scrolled down to see all available options. This prevents users from accessing all troubleshooting features.

Root Cause

The root cause is an issue with the Android ScrollView implementation in React Native. Specifically, in the TestToolsModalPage component, the ScrollView is not properly handling scroll events on Android devices. This is related to the MaintainVisibleScrollPositionHelper class which has known issues with scroll position management, as evidenced by the patches already applied to fix other scrolling issues.

Solution

To fix the scrolling issue in the troubleshoot panel on Android, we need to modify the ScrollView component in the TestToolsModalPage to ensure it properly handles scroll events. We should:

Add a nestedScrollEnabled prop to the ScrollView in TestToolsModalPage.tsx
Apply a specific Android-only fix to ensure the ScrollView can be scrolled even when it's inside a modal

Here's the implementation:

import React from 'react';
import {View, Platform} from 'react-native';
import useIsAuthenticated from '@hooks/useIsAuthenticated';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import Navigation from '@navigation/Navigation';
import {shouldShowProfileTool} from '@userActions/TestTool';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import Button from './Button';
import ClientSideLoggingToolMenu from './ClientSideLoggingToolMenu';
import ProfilingToolMenu from './ProfilingToolMenu';
import SafeAreaConsumer from './SafeAreaConsumer';
import ScrollView from './ScrollView';
import TestToolMenu from './TestToolMenu';
import TestToolRow from './TestToolRow';
import Text from './Text';

function getRouteBasedOnAuthStatus(isAuthenticated: boolean, activeRoute: string) {
    return isAuthenticated ? ROUTES.SETTINGS_CONSOLE.getRoute(activeRoute) : ROUTES.PUBLIC_CONSOLE_DEBUG.getRoute(activeRoute);
}

function TestToolsModalPage() {
    const {windowHeight} = useWindowDimensions();
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    const activeRoute = Navigation.getActiveRoute();
    const [shouldStoreLogs = false] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS, {canBeMissing: true});
    const isAuthenticated = useIsAuthenticated();
    const route = getRouteBasedOnAuthStatus(isAuthenticated, activeRoute);

    const maxHeight = windowHeight;

    return (
        <SafeAreaConsumer>
            {({safeAreaPaddingBottomStyle}) => (
                <View style={[{maxHeight}, styles.h100, styles.defaultModalContainer, safeAreaPaddingBottomStyle]}>
                    <ScrollView 
                        style={[styles.flex1, styles.flexGrow1, styles.ph5]}
                        nestedScrollEnabled={true}
                        scrollEventThrottle={16}
                        scrollIndicatorInsets={{right: 1}} // Use 1 instead of Number.MIN_VALUE for Android
                    >
                        <Text
                            style={[styles.textLabelSupporting, styles.mt5, styles.mb3]}
                            numberOfLines={1}
                        >
                            {translate('initialSettingsPage.troubleshoot.releaseOptions')}
                        </Text>
                        {shouldShowProfileTool() && <ProfilingToolMenu />}
                        <ClientSideLoggingToolMenu />
                        {!!shouldStoreLogs && (
                            <TestToolRow title={translate('initialSettingsPage.troubleshoot.debugConsole')}>
                                <Button
                                    small
                                    text={translate('initialSettingsPage.debugConsole.viewConsole')}
                                    onPress={() => {
                                        Navigation.navigate(route);
                                    }}
                                />
                            </TestToolRow>
                        )}
                        <TestToolMenu />
                    </ScrollView>
                </View>
            )}
        </SafeAreaConsumer>
    );
}

TestToolsModalPage.displayName = 'TestToolsModalPage';

export default TestToolsModalPage;

Alternative Solutions Explored

Using a FlatList instead of ScrollView - This would work but would require significant refactoring of the components.
Creating a custom Android-specific ScrollView - This would add unnecessary complexity.
Patching the React Native ScrollView component further - This could work but would be less maintainable than fixing our implementation.

Test Scenarios

To verify this fix works properly, we should test the following scenarios:

Open the troubleshoot panel using a four finger tap on Android
Attempt to scroll down to see all options
Verify all options are accessible through scrolling
Test on different Android versions and devices, particularly Samsung S10 with Android 12 (as mentioned in the issue)
Verify the fix doesn't break scrolling on other platforms (iOS, web)

The proposed solution addresses the root cause by enabling nested scrolling and improving scroll event handling, which should allow users to properly scroll through the entire troubleshoot panel on Android devices.

@hungvu193

Payment Overview + Final To-Dos

@hungvu193 requires payment through NewDot Manual Requests - 250
@nyomanjyotisa requires payment (Needs manual offer from BZ) - 250 https://www.upwork.com/nx/wm/offer/108169063
regression test GH

@QichenZhu

@QichenZhu - will you please accept the offer for this job so that i can issue payment?

@nyomanjyotisa - please send me your Upwork profile so that i can send you an offer (posted on this issue or DM me) - thanks!

@maddylewis

@maddylewis I’ve sent it to you on Slack DM!

@maddylewis

@maddylewis, @hungvu193 and @nyomanjyotisa took over based on #64550 (comment), so I didn't work on this.

@hungvu193

@hungvu193 - do we need a regression test for this one?

Regression test:

Login with any account on Android
Perform 4 four-finger gesture to open TestTool.
Verify that you can scroll down to the bottom.

Do we 👍 or 👎 ?

@maddylewis

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

@hungvu193

$250 approved for @hungvu193

Navigation Menu

Repository navigation

[Due for payment 2025-07-22] [$250] Android- Troubleshoot- Unable to scroll troubleshoot panel #64550

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Problem statement

Root cause (analysis)

Proposed fix

Validation matrix

Timeline

Risk & rollback

Proposal

Problem

Root Cause

Solution

Alternative Solutions Explored

Test Scenarios

31 remaining items

Payment Overview + Final To-Dos

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Due for payment 2025-07-22] [$250] Android- Troubleshoot- Unable to scroll troubleshoot panel #64550

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jun 19, 2025

melvin-bot commented on Jun 19, 2025

melvin-bot commented on Jun 19, 2025

melvin-bot commented on Jun 19, 2025

walidkhaddoum commented on Jun 19, 2025

Problem statement

Root cause (analysis)

Proposed fix

Validation matrix

Timeline

Risk & rollback

melvin-bot commented on Jun 19, 2025

QichenZhu commented on Jun 19, 2025

DmitryChizhevsky-vs commented on Jun 19, 2025

Proposal

Problem

Root Cause

Solution

Alternative Solutions Explored

Test Scenarios

31 remaining items

maddylewis commented on Jul 21, 2025

Payment Overview + Final To-Dos

maddylewis commented on Jul 23, 2025

nyomanjyotisa commented on Jul 24, 2025

QichenZhu commented on Jul 24, 2025

maddylewis commented on Jul 24, 2025

hungvu193 commented on Jul 25, 2025

melvin-bot commented on Jul 28, 2025

flaviadefaria commented on Aug 4, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions