[$250] IOS - Submit expense - Next button not fully visible after returning online

[lanitochka17]

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.71-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the app and log in
2. Disable internet connection
3. Tap FAB > Submit expense
4. Select any tab, e.g. Distance (the same for manual and scan request)
5. Return online

Expected Result:

The Next button is fully visible

Actual Result:

Only the top of the Next button is visible. It is reproducible with Manual and Scan tabs

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

Bug6474132_1715107077940.IMG_6781.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f1a3e2d4eb573fb6
• Upwork Job ID: 1788618114597507072
• Last Price Increase: 2024-06-06

Issue Owner

Current Issue Owner: @eVoloshchak

[melvin-bot]

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

[lanitochka17]

@sonialiap FYI 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

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[neonbhai]

Proposal

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

Next button not fully visible after returning online

What is the root cause of that problem?

StepScreenWrapper by default adds safeAreaPaddingBottom that overlaps the bottom button in request pages

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

We will pass includeSafeAreaPaddingBottom={false} to StepScreenWrapper in affected pages in IOU request steps.

[melvin-bot]

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

[melvin-bot]

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

[samilabud]

Proposal

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

Native small screens - Submit expense - Next button not fully visible after returning online

What is the root cause of that problem?

Currently when we are using "small screens" (or native screens) the MapView try to use the space available to render itself, this space is calculated by the ScreenWrapper component based in the initialHeight (in this case) and the children components.

The issue is for native screens when we render the map the first time (when online) we take the all available space, but then when we go offline we show/render an offline indicator, this makes the available height reduced (so we see the map pending indicator a bit short than the map), then when we go online the map try to recover its original height (but now we have less height space due the offline indicators) and move down the next button.

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

We should set the height of each container with percents to fix this issue in IOURequestStepDistance and also in MoneyRequestAmountForm, to keep next button aligned.

The changes should be in

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 437 in 66b4072

<View style={styles.flex1}>

<View style={Platform.OS === 'web' ? styles.flex1 : [styles.dBlock, styles.w100, {height: '85%'}]}>

And in

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 454 in 66b4072

<View style={[styles.w100, styles.pt2]}>

<View style={(styles.dBlock, styles.w100, styles.pt2, Platform.OS !== 'web' ? {height: '15%'} : {})}>

Also in

App/src/pages/iou/MoneyRequestAmountForm.tsx

Lines 302 to 306 in 66b4072

	<View
	onMouseDown={(event) => onMouseDown(event, [NUM_PAD_CONTAINER_VIEW_ID, NUM_PAD_VIEW_ID])}
	style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper, styles.pt0]}
	id={NUM_PAD_CONTAINER_VIEW_ID}
	>

<View
                onMouseDown={(event) => onMouseDown(event, [NUM_PAD_CONTAINER_VIEW_ID, NUM_PAD_VIEW_ID])}
                style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper, styles.pt0, Platform.OS !== 'web' ? [styles.dBlock, styles.w100, {height: '40%'}] : {}]}
                id={NUM_PAD_CONTAINER_VIEW_ID}
            >

And finally in

App/src/pages/iou/MoneyRequestAmountForm.tsx

Line 314 in 66b4072

<View style={styles.w100}>

:

<View style={[styles.w100, Platform.OS !== 'web' ? {height: '40%'} : {}]}>

This way we going to force to react native to recalculate the height of the component even when offline indicator are not displayed (when they doesn't exists in the rendered components).

Tests:

Before changes:

Map.view.overlap.next.button.-.test.before.changes.mp4

After changes

next.button.moved.test.mp4

[melvin-bot]

@eVoloshchak, @sonialiap Huh... This is 4 days overdue. Who can take care of this?

[sonialiap]

@eVoloshchak what do you think of the above proposal?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@eVoloshchak, @sonialiap 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[eVoloshchak]

@neonbhai, I've applied your proposal to IOURequestStepDistance, but it doesn't resolve the issue, could you re-test this please?

@samilabud, thank you for the thorough explanation!

We should determinate in IOURequestStepDistance if we are using small screens and if so calculate the height of the map based in percent of the screen height resting the height of the offline indicator to guarantee the space height when the map hide/show (re-renders)

Can we make the map view fill all the available space?
The problem with calculating its height manually is it's prone to breakage in the future. If we change the font size, number of lines, height of offline indicator, or add another button below the map view - the calculation will become wrong

[samilabud]

The problem with calculating its height manually

Good point, I will try to do a formula to calculate the height based to the current calculation that we do in ScreenWrapper, this way I think this going to persist good in the future.

[samilabud]

Can we make the map view fill all the available space?

At the end the only way I found was using flexbox, I have updated my proposal, please check it out 🙏🏼:

Updated

[melvin-bot]

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

[jscoder2151]

Proposal

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

IOS - Submit expense - The next button is cut off after the user goes from offline to online.

What is the root cause of that problem?

In IOURequestStartPage, the shouldShowOfflineIndicator is not passed, so the ScreenWrapper defaults the value of shouldShowOfflineIndicator to true.

App/src/components/ScreenWrapper.tsx

Line 115 in e8ae3c5

shouldShowOfflineIndicator = true,

Also the IOURequestStepDistance and IOURequestStepAmount do not have OfflineIndicator.

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

In IOURequestStepDistance and IOURequestStepAmount need to add OfflineIndicator after the StepScreenWrapper closing tag. Also in the IOURequestStartPage pass shouldShowOfflineIndicator={false} to the ScreenWrapper.

App/src/pages/iou/request/IOURequestStartPage.tsx

Line 131 in d91979f

<ScreenWrapper

In ScreenWrapper component, add

shouldShowOfflineIndicator={false}

In IOURequestStepAmount,
Add imports

import useWindowDimensions from '@hooks/useWindowDimensions';
import OfflineIndicator from '@components/OfflineIndicator';

const {isSmallScreenWidth} = useWindowDimensions();

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Line 303 in d91979f

<MoneyRequestAmountForm

After MoneyRequestAmountForm add

{isSmallScreenWidth && <OfflineIndicator />}

Following previous steps add OfflineIndicator to IOURequestStepDistance at
https://github.com/Expensify/App/blob/main/src/pages/iou/request/step/IOURequestStepDistance.tsx#L475

What alternative solutions did you explore? (Optional)

[eVoloshchak]

@jscoder2151, I've applied your solution, but it seems there is an issue with the Next button placement

Screenshot

[eVoloshchak]

@samilabud, same issue with your updated proposal, I do think this might be due to recent changes to Forms component on main
Could you double-check your proposals with the latest sources from main please?

Screenshots

[melvin-bot]

@eVoloshchak @sonialiap this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[samilabud]

Could you double-check your proposals with the latest sources from main please?

Thank you for checking out, definitely there was a change I have updated my proposal and there are new tests videos.

Also I created this draft if helps: #42442

[eVoloshchak]

@samilabud, you propose to apply different styles to iOS native only, is that correct?
If so, why do we need different styles for iOS? We need to figure out the root cause for this, is this the bug in iOS? Or possibly a react-native bug that is iOS-specific?

[samilabud]

ou propose to apply different styles to iOS native only, is that correct?

At the beginning I thought we should just fix the issue in the platform was reported:

But makes sense to apply the same style to all the native platforms because react native works similar in every one.

I have changed my proposal and it seems to be working as the previous tests, I have also updated the draft PR: #42442.

We need to figure out the root cause for this, is this the bug in iOS? Or possibly a react-native bug that is iOS-specific?

I have notice since a time ago that this kind of styles issues happens in natives platforms but not in the web, because the web some how update the DOM.

See this example where google chrome do the job when this happens, see the second 20 where I move the mouse a the left of the emulator and the the next button seems to be overlapped and later it fixed without do nothing:

Next.button.moved.in.web.test.mp4

[eVoloshchak]

@samilabud, this results in the "Next" button having bottom margin. Notice how the two buttons on the video below are on different levels

Screen.Recording.2024-05-23.at.10.18.46.mov

[samilabud]

are on different levels

This means that we should apply the same change to all buttons in each tab, as you see this happens also in manual request:

[samilabud]

Draft updated: #42442

Quick test:

Testing.money.request.manual.amount.and.with.distance.calc.mp4

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@eVoloshchak, @sonialiap Huh... This is 4 days overdue. Who can take care of this?

[eVoloshchak]

@samilabud, looking at the proposal, you've already hit the limitation of this approach: you have to use {flex: 0.3}, {flex: 0.5}, {flex: 0.51}, which are arbitrary numbers. If we were to change the offline indicator font size (or add a second line, add another indicator, etc), the height will change and this bug will come back.
We have to make DraggableList's container fill all the available height rather than setting it manually

[samilabud]

fill all the available height rather than setting it manually

Hi @eVoloshchak, I have create a method to calculate the flex distribution based in window height, please check it out and let me know if that makes sense, I have tested even increasing the font size using accessibility functions please see the next video:

next.button.moved.when.returning.from.offline.mode.-.test.mp4

Draft updated: #42442

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[jscoder2151]

@eVoloshchak I have revised proposal and branch for review.

[melvin-bot]

@eVoloshchak, @sonialiap Eep! 4 days overdue now. Issues have feelings too...

[sonialiap]

@eVoloshchak what do you think of the updated proposal?

[melvin-bot]

@eVoloshchak @sonialiap this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[eVoloshchak]

@samilabud, your proposal does add a lot of complexity, there should be a better approach with minimal code (we just need to make the map fill the full container height)

@jscoder2151, you're proposing to move the offline indicator from the universal ScreenWrapper to each page one by one. I also don't think that's the best approach, this should work as-is with offline indicator inside the ScreenWrapper. That's why offline indicator was added there in the first place, so we don't have to add it to each and every page manually.

Essentially we need to figure out why map doesn't respect it's parent's height. Why does the map height recalculated correctly if we render OfflineIndicator in the same component, but not when we render it ScreenWrapper?

[jscoder2151]

@eVoloshchak The WorkspaceNewRoomPage is also adding OfflineIndicator separately, so adding the offlineIndicator to the IOURequestStepDistance and IOURequestStepAmount does not break the pattern.

App/src/pages/workspace/WorkspaceNewRoomPage.tsx

Line 335 in 47d5f5f

{isSmallScreenWidth && <OfflineIndicator />}

[eVoloshchak]

@jscoder2151, 2 pages in the whole app use this approach (WorkspaceNewRoomPage and NewChatPage), we should strive to move the OfflineIndicator out of those pages to ScreenWrapper, not the other way around

[samilabud]

add a lot of complexity, there should be a better approach with minimal code (we just need to make the map fill the full container height)

Hi @eVoloshchak I have updated my proposal with new changes and new video with test, at the end it is the same but using percents for heights, which is simple and easy to handle for any future changes. Please let me know if this make more sense to you 🙏🏼.

Also added new draft #43129

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[eVoloshchak]

@samilabud, why do we have to specify the height manually?
We should make the map fill all the available space, not specify this space manually (as a number or a percentage)
Here you specify container height as 40%, but as I've explained in #41810 (comment)

If we were to change the offline indicator font size (or add a second line, add another indicator, etc), the height will change and this bug will come back

[samilabud]

Hi @eVoloshchak, thank you for checking out.

why do we have to specify the height manually?

It seems to be a react native bug, this should work with flexbox but if we don't specify a height and then we hide and later show any component we going to get this same bug (if we are using the whole screen).

I have tried even without using the StepScreenWrapper component, also just with the View container (without the draggable list component) the results are the same.

I can't find any documentation related to this kind of error, so I'm going to stay subscribed to this topic just to see if someone can solve this by applying another solution 🙏🏼.

Thank you.