[Hold] $250 Workspace - Checkmark icon not displayed after copying email

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel! https://www.upwork.com/jobs/~01228c64f5fadb4c43

---

Action Performed:

1. Launch the app
2. Log in with expensifail account
3. Select any Workspace
4. Go to Capture Receipts and Click on Copy icon by the [email protected]
5. Go to Manage your bill and Click on Copy icon by the [email protected]

Expected Result:

Checkmark should be displayed after copying email.

Actual Result:

Empty space displayed after copying email

Workaround:

None needed. Visual issue.

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.7-22

Reproducible in staging?: Yes
Reproducible in production?: No (New feature)

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5281834_Screen_Recording_20211014-211047_New_Expensify.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause
Slack conversation:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @MonilBhavsar (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MonilBhavsar]

Related to N6, so handling internally

[MonilBhavsar]

Confirmed, it's occurring on Android only

[MonilBhavsar]

The checkmark icon here is not rendering after the timeout event. Replaced <Icon> with <Text> and verified the state is changing properly, only icon is not rendering.

App/src/components/CopyTextToClipboard.js

Lines 49 to 57 in e31c8f4

	<Text
	onPress={this.copyToClipboard}
	style={[styles.flexRow, styles.cursorPointer]}
	>
	<Text style={this.props.textStyles}>{this.props.text}</Text>
	{this.state.showCheckmark
	? <Icon src={Checkmark} height={14} width={14} />
	: <Icon src={ClipboardIcon} height={14} width={14} />}
	</Text>

Wrapping it inside <TouchableOpacity> shows check mark properly. For mobile device, we need to adjust styling to align the component

[mvtglobally]

Issue reproducible during KI retests.

[MonilBhavsar]

Working on it

[mvtglobally]

Issue reproducible during KI retests.

[MonilBhavsar]

Working on it

[MonilBhavsar]

Some of the investigations

What's the Issue

On Android, after pressing on clipboard icon, the checkmark icon is rendered outside of the screen.
Looking at the Component tree, SVG Component is at same level as that of Text component, whereas in iOS SVG is wrapped inside Text component.
Looking at the SVG properties in Android, the pivot property resets the x and y coordinates to 0 causing this issue

Screen.Recording.2021-11-11.at.6.57.21.PM.mov

In iOS, SVG is wrapped inside Text component not causing the issue

Screen.Recording.2021-11-11.at.7.09.58.PM.mov

thread https://expensify.slack.com/archives/C03TQ48KC/p1635317496207600

[roryabraham]

@MonilBhavsar I'm still a bit confused why we can't just replace the outer Text component here with a Pressable or TouchableOpacity. We should be able to figure out the necessary styles to get it to render in the correct position. Can you show what you've tried so far?

[roryabraham]

I see now why we can't just replace the outer Text component, and it's because the entire CopyTextToClipboard component is rendered inside a parent Text component.

[roryabraham]

I've done a bit more digging and I think what's most curious in this case is that the SVG image displays in the correct location when the page first loads, but when we change to a different SVG the calculated position changes.

Another thing I've found is that React Native has a separate native component for images nested within text: facebook/react-native@a0268a7

I'm not sure, but I'm starting to think this bug might need to be fixed in react-native-svg, but the primary maintainer is unlikely to be able to address it. So I'd suggest that our next step should be to keep digging and create a detailed issue in react-native-svg explaining the problem and see if anyone in the community has ideas.

We can also consider making this issue external to leverage our own contributor community.

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

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

[sidferreira]

@Luke9389 @laurenreidexpensify I believe I addressed it at #6271 ...

[parasharrajat]

I checked the PR and the root cause of this issue is gone via wrapping the icon in View thus #6271 indirectly solves this and thus we can close this as soon as that PR is merged or let QA run it through test cycles and it will be automatically closed.

[sidferreira]

@parasharrajat So I fixed this one? When I saw this happening I though it was my fault 😄

@laurenreidexpensify if it fixes, do I get paid?

[parasharrajat]

if it fixes, do I get paid?

In my case, it depends if you had to do some extra work. But seems you just came to know today that you fixed it eventually.. 😅

[laurenreidexpensify]

@sidferreira you'll get paid for the scope of #6271 - I don't see any additional code pushed directly connected to this issue knowingly, so we would likely close this without further reimbursement.

[sidferreira]

@laurenreidexpensify well, worth trying :D Weird that I didn't see this issue (even tho it was created with #5783 which I fixed)

[Luke9389]

Ok, so I think we can just go ahead and close this then. @laurenreidexpensify do you agree?

[laurenreidexpensify]

Let's go with @parasharrajat's suggestion

close this as soon as that PR is merged or let QA run it through test cycles and it will be automatically closed.

i've removed help wanted and placed it on hold and we can wait for 6271 to be merged and take it from there

[laurenreidexpensify]

6271 is still in review, so no update yet

[laurenreidexpensify]

6271 is still on staging and hasn't been deployed yet

[mvtglobally]

Issue not reproducible during KI retests. (First Week)

[MelvinBot]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[laurenreidexpensify]

@bfitzexpensify i'm OOO quite a bit over next week moving house, so handing this one off while I"m away thanks!

[bfitzexpensify]

7 days since #6271 (to fix #5873) was deployed, with no regressions. Given this also wasn't reproducible during KI tests, I think we're good to close this out now.