[HOLD for payment 2024-11-14] [$500] Android - Avatar - Profile avatar can be seen only if tap on blank screen

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.39-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Go to any chat
2. Tap on user's avatar> Open the Avatar
3. Verify there is a blank screen and Avatar is not displayed
4. Tap on black screen

Expected Result:

Profile avatar should be displayed when open it

Actual Result:

Profile avatar can be seen only if tap on blank screen
Same issue occurs when Take photo

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6610027_1726846111222.Recording__4007.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837227522028493087
• Upwork Job ID: 1837227522028493087
• Last Price Increase: 2024-10-29
• Automatic offers:
• dukenv0307 | Reviewer | 104697422

Issue Owner

Current Issue Owner: @s77rt

[melvin-bot]

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

[IuliiaHerets]

@puneetlath 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

[melvin-bot]

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

[melvin-bot]

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

[huult]

Edited by proposal-police: This proposal was edited at 2024-09-21 10:37:45 UTC.```

Proposal

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

Android - Avatar - Profile avatar can be seen only if tap on blank screen

What is the root cause of that problem?

The layout is not changing, so onLayout is not being called, which prevents updateCanvasSize from being triggered.

App/src/components/Lightbox/index.tsx

Lines 204 to 207 in 9160fa5

	<View
	style={[StyleSheet.absoluteFill, style]}
	onLayout={updateCanvasSize}
	>

So, the canvasSize will be undefined, and isCanvasLoading will be set to true.

App/src/components/Lightbox/index.tsx

Lines 94 to 95 in 9160fa5

	const [canvasSize, setCanvasSize] = useState<CanvasSize>();
	const isCanvasLoading = canvasSize === undefined;

isCanvasLoading is true, the image component will not render, resulting in a blank screen, and this issue occurs

App/src/components/Lightbox/index.tsx

Line 208 in 9160fa5

{!isCanvasLoading && (

The reason onLayout is not being triggered is that shouldLoadAttachment is enabled after the parent component has rendered.

The reason onLayout is not being triggered is that the Send Button is rendered before the AttachmentView component. Its presence at the bottom might be affecting how the is rendered or when its onLayout event is triggered. Since React Native handles layouts asynchronously, the positioning of components in the view hierarchy can influence when their dimensions are calculated and when onLayout is fired.

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

To solve this problem, we just need to render the Send Button at the same time as the AttachmentView. The code will change to something like this:

// .src/components/AttachmentModal.tsx#L580
- {!!onConfirm && !isConfirmButtonDisabled && (
+ {!!onConfirm && !isConfirmButtonDisabled && shouldLoadAttachment && (
                 <Button
                            ref={viewRef(submitRef)}
                            success
                            large
                            style={[styles.buttonConfirm, shouldUseNarrowLayout ? {} : styles.attachmentButtonBigScreen]}
                            textStyles={[styles.buttonConfirmText]}
                            text={translate('common.send')}
                            onPress={submitAndClose}
                            isDisabled={isConfirmButtonDisabled}
                            pressOnEnter
                        />
                    )}

Note

Note: As I tested, this issue only occurs on Android. We can either update it for Android only or for all platforms, and it will still work under this condition

What alternative solutions did you explore? (Optional)

Alternative Solutions 1

We should set shouldLoadAttachment to true when isModalOpen is set. This way, the AttachmentView will render with the modal, allowing the onLayout for the attachment view to be triggered.
We should set shouldLoadAttachment to true when isModalOpen is set. This way, the AttachmentView will render same time with Send Button

// .src/components/AttachmentModal.tsx#L368
} else if (fileObject.uri) {
                    const inputModalType = getModalType(fileObject.uri, fileObject);
+                    setShouldLoadAttachment(true);
                    setIsModalOpen(true);
                    setSourceState(fileObject.uri);
                    setFile(fileObject);
                    setModalType(inputModalType);
                }

Alternative Solutions 2

We should use a ref so that the measurement occurs after the component has mounted, something like this:

// .src/components/Lightbox/index.tsx#L167
+    const viewRef = useRef<View>(null);

// .src/components/Lightbox/index.tsx#L172
+    useEffect(() => {
+        const measureView = () => {
+            viewRef.current?.measure((_, __, width, height) => {
+                setCanvasSize({
+                    width: PixelRatio.roundToNearestPixel(width),
+                    height: PixelRatio.roundToNearestPixel(height),
+                });
+            });
+        };

+        measureView();
+    }, []);

// .src/components/Lightbox/index.tsx#L204
        <View
            style={[StyleSheet.absoluteFill, style]}
            onLayout={updateCanvasSize}
+            ref={viewRef}
        >

POC

Screen_Recording_20240921_173421_Camera.mp4

[struc]

Proposal

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

Avatar image does not show up or load.

What is the root cause of that problem?

On mobile, we use Lightbox to render the avatar image, however onLayout is never called because the view does not have a defined size yet.

Which also means the image view is never mounted and ImageView.onload is also never called.

App/src/components/Lightbox/index.tsx

Lines 204 to 207 in 9160fa5

	<View
	style={[StyleSheet.absoluteFill, style]}
	onLayout={updateCanvasSize}
	>

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

Initialize canvasSize with any value (i.e 0x0) will force a layout and mount the image view and thus load the image.

so we replace

App/src/components/Lightbox/index.tsx

Line 94 in 9160fa5

const [canvasSize, setCanvasSize] = useState<CanvasSize>();

with

const [canvasSize, setCanvasSize] = useState<CanvasSize>({width: 0, height: 0});

What alternative solutions did you explore? (Optional)

N/A

avatar.mp4

[dukenv0307]

@huult @struc Thanks for your proposals. onLayout should be called on mount (works well in iOS). Can you dig deeper to find the RCA?

FYI, I just tested onLayout on snack.expo.dev, it worked well on Android

import React from 'react';
import {View, Text} from 'react-native';

const ViewBoxesWithColorAndText = () => {
  const [a,setA] = React.useState(0)

  return (
    <View>
      <Text>{a}</Text>
      <View
      onLayout={(e)=>{
        setA(111111)
      }}>
    </View>
    </View>
  );
};

export default ViewBoxesWithColorAndText;

[huult]

Updated Proposal

• Add a new RCA.
• Update the new solutions.
• Adjust the alternative solution.

[dukenv0307]

The reason onLayout is not being triggered is that shouldLoadAttachment is enabled after the parent component has rendered.

@huult Can you elaborate that?

[huult]

Updated Proposal

• Add a new main RCA.
• Update the main solution.
• Adjust the alternative solution.

Apologies, @dukenv0307 for the many changes in the proposal. Could you please review it again? I've updated the problem with more accuracy, and I appreciate your help. Thank you!

[dukenv0307]

@huult It doesn't really convince me, why does this happen on Android only?

[melvin-bot]

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

[huult]

@dukenv0307 ,
I believe this issue is related to the rendering process in Android React Native. According to my RCA, the AttachmentView is rendered last, after all other components. I'm unsure why the onLayout is being prevented in AttachmentView.

With the solution I provided, rendering the Send Button at the same time as the AttachmentView seems reasonable and fixes the issue. I also tested it on the web and iOS, and it is still working well.

// .src/components/AttachmentModal.tsx#L580
- {!!onConfirm && !isConfirmButtonDisabled && (
+ {!!onConfirm && !isConfirmButtonDisabled && shouldLoadAttachment && (

[melvin-bot]

@puneetlath, @dukenv0307 Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@puneetlath, @dukenv0307 Still overdue 6 days?! Let's take care of this!

[dukenv0307]

I believe this issue is related to the rendering process in Android React Native

I tested this issue on React Native expo, I didn't face this issue. Can you dig deeper to find the exact RCA?

We also open to receive more proposals

[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]

@puneetlath @dukenv0307 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!

[puneetlath]

@huult are you still interested in trying to find a solution for this?

[huult]

@puneetlath , Currently, I have found a workaround solution to fix this issue by rendering the Send Button at the same time as the AttachmentView. However, I have not yet found the exact root cause of why this issue only occurs on Android.

With the change below, I tested it and it's working as expected.

// .src/components/AttachmentModal.tsx#L580
- {!!onConfirm && !isConfirmButtonDisabled && (
+ {!!onConfirm && !isConfirmButtonDisabled && shouldLoadAttachment && (

[melvin-bot]

Triggered auto assignment to @danieldoglas, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[dukenv0307]

@danieldoglas Can you check this issue? Thanks

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[danieldoglas]

Assigned @s77rt !

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.58-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Android onHostResume resume frame callback #51903

If no regressions arise, payment will be issued on 2024-11-14. 🎊

For reference, here are some details about the assignees on this issue:

• @s77rt requires payment through NewDot Manual Requests
• @dukenv0307 requires payment automatic offer (Reviewer)

[melvin-bot]

@s77rt / @dukenv0307 @puneetlath The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[s77rt]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other: Upstream bug (react-native)

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: n/a (upstream bug)

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: I don't think this would resurface since it's not from our side (we can't break the logic)

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

Test:

Do we agree 👍 or 👎

[puneetlath]

Payment summary:

• C - $500 - @dukenv0307 - to be paid via Upwork
• C+ - $500 - @s77rt - to be paid via NewDot

@dukenv0307 can you please accept the Upwork offer and ping me here when you have?

[dukenv0307]

@puneetlath Accepted, thank you!

[JmillsExpensify]

$500 approved for @s77rt

[puneetlath]

All paid. Thanks y'all!