At avatar crop modal the overlay isn't covering the whole image at right and bottom

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to settings > profile
2. Tap on avatar > upload photo
3. Choose a photo

Expected Result:

The overlay should cover it completely

Actual Result:

There is some gap at the right and bottom area

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native

Version Number: 1.2.44-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: @thesahindia
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1671279775056559

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01512bf018ef8f796a
• Upwork Job ID: 1608129545607860224
• Last Price Increase: 2022-12-28

[bondydaa]

I'm able to reproduce this on my phone with 1.2.44.0

and confirmed it's not happening on iOS

[bondydaa]

Spent most of the morning looking into this and it seems like a style/calculation thing with android.

I've narrowed it down to these lines

App/src/components/AvatarCropModal/ImageCropView.js

Lines 68 to 73 in 36b50c1

	<Animated.View style={[containerStyle, styles.imageCropContainer]}>
	<Animated.Image style={[imageStyle, styles.h100, styles.w100]} source={{uri: props.imageUri}} resizeMode="contain" />
	<View style={[containerStyle, styles.l0, styles.b0, styles.pAbsolute]}>
	<Icon src={Expensicons.ImageCropMask} width={props.containerSize} height={props.containerSize} />
	</View>
	</Animated.View>

but it's not just a simple "oh a pixel is off here" since just playing with some of those values like so:

diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
index a61cc7d20a..64650a7bdf 100644
--- a/src/components/AvatarCropModal/ImageCropView.js
+++ b/src/components/AvatarCropModal/ImageCropView.js
@@ -68,7 +68,7 @@ const ImageCropView = (props) => {
             <Animated.View style={[containerStyle, styles.imageCropContainer]}>
                 <Animated.Image style={[imageStyle, styles.h100, styles.w100]} source={{uri: props.imageUri}} resizeMode="contain" />
                 <View style={[containerStyle, styles.l0, styles.b0, styles.pAbsolute]}>
-                    <Icon src={Expensicons.ImageCropMask} width={props.containerSize} height={props.containerSize} />
+                    <Icon src={Expensicons.ImageCropMask} width={props.containerSize + 1} height={props.containerSize} />
                 </View>
             </Animated.View>
         </PanGestureHandler>
(END)

The problem is still there though just slightly differently

Was looking through this https://reactnative.dev/docs/image to see if there some something specific to android and it looks like resizeMethod is but doesn't seem to have any effect here.

So maybe it's just something with how the containers are laid out. I'll keep digging in tomorrow.

[bondydaa]

hm interesting I think this has to do with the width of the svg actually being bigger than the container's width.

Using this diff to make sure the svg is square and then reducing it by 1 pixel it fixes it

diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
index a61cc7d20a..3956fe0977 100644
--- a/src/components/AvatarCropModal/ImageCropView.js
+++ b/src/components/AvatarCropModal/ImageCropView.js
@@ -45,7 +45,7 @@ const defaultProps = {
 };

 const ImageCropView = (props) => {
-    const containerStyle = StyleUtils.getWidthAndHeightStyle(props.containerSize, props.containerSize);
+    const containerStyle = StyleUtils.getWidthAndHeightStyle(props.containerSize);

     // A reanimated memoized style, which updates when the image's size or scale changes.
     const imageStyle = useAnimatedStyle(() => {
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 1a14db2e72..1ef326ea4e 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -318,6 +318,7 @@ function getAnimatedFABStyle(rotate, backgroundColor) {
  * @returns {Object}
  */
 function getWidthAndHeightStyle(width, height = null) {
+    width = width - 1;
     return {
         width,
         height: height != null ? height : width,
(END)

Web looks good

Android as well

I don't think this is exactly the solution but I think it helps me get on the right path. I think I need to see what the exact values are getting set for the container and svg are b/c my guess is they're just ever so slightly off on android for whatever reason so we probably just need to ensure they're the same when we compute the width & height

[bondydaa]

Ahhhh I think because of the containerSize props we're passing are coming through as floats

 LOG  bondydaa width: 352.7272644042969
 LOG  bondydaa height: 352.7272644042969

If I round those down to whole numbers then we're ok.

web

Android

Now I just need to determine if this is something we want to fix in the method here

App/src/styles/StyleUtils.js

Lines 320 to 325 in 67ab1b4

	function getWidthAndHeightStyle(width, height = null) {
	return {
	width,
	height: height != null ? height : width,
	};
	}

(which is what I did in those screenshots)

Or if we just need to fix it in this one component by adjusting the initial size we set here:

App/src/components/AvatarCropModal/AvatarCropModal.js

Line 85 in 67ab1b4

setImageContainerSize(Math.min(height - styles.imageCropRotateButton.height, width));