Avatar ignoring resize mode on initial load

[KrisLau]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

Updated some packages and then when I was testing the app I noticed this problem

Expected behavior

react-native-image-picker

Describe the bug

It's completely not following the resizeMode

If i pick a new image using react-native-image-picker that new image follows the resizeMode

Steps To Reproduce

Set a default image that's bigger than the container size & then upgrade the package.

Screenshots

Your Environment

`npx @rneui/envinfo`

  ```
    React Native Elements Env Info

    ## Global Dependencies:
    
       No related dependency found
    
    ## Local Dependencies:
    
     - @rneui/base : ^4.0.0-rc.8
     - @rneui/themed : ^4.0.0-rc.8
     - expo : ^49.0.21
     - react : 18.2.0
     - react-native : 0.72.7
     - @types/react : ^18.2.0

  ```

[dishant-yadav]

As per my understanding of the issue, the Avatar component of the library is not working as it is intended to be. The resize mode property for images is working after the initial load but not on the initial load. Am I correct?
@KrisLau

[KrisLau]

@dishant-yadav yes but for some reason only on this avatar component the rest of my components seem to be working normally

[dishant-yadav]

@KrisLau So are you planning to work on this issue?

[KrisLau]

@dishant-yadav I could but I have no clue what the issue is at all especially since it's only that one specific avatar that is messed up and none of the rest

[dishant-yadav]

@dishant-yadav I could but I have no clue what the issue is at all especially since it's only that one specific avatar that is messed up and none of the rest

By one specific avatar, do you mean that one of of the avatar resizeMode is not working?

[KrisLau]

@dishant-yadav Yes just that one in that one screen. The ones I have in other screens seem to be working fine

[dishant-yadav]

@dishant-yadav Yes just that one in that one screen. The ones I have in other screens seem to be working fine

Isn't that strange. Do you mean that the same avatar component works differently on other screens?

[KrisLau]

@dishant-yadav Yes No sorry i just checked and there's two screens and where I use it and yeah it's extremely strange that's why I'm stumped. It happened after some package updates but rolling back doesn't fix it unless i completely revert using git reset --hard. Might have to do with a hidden dependency but I have no clue. Been having this specific issue with that screen's avatar for a long time so I just avoided updating any packages for a while.

Can't avoid upgrading now, so I just worked around the issue by manually resizing the image file to be slightly smaller than the avatar container

[KrisLau]

Ok not sure what happened but now it's happening to all of the avatars and changing the image component to ImageComponent={BackgroundImage} fixes it

[dishant-yadav]

Ok not sure what happened but now it's happening to all of the avatars and changing the image component to ImageComponent={BackgroundImage} fixes it

How come this is happening? Did you change the version since then?

[KrisLau]

@dishant-yadav Not sure i might've just not noticed the change on the other avatars since the rest use more similarly sized images but yeah not sure what caused it still. I tried looking at the source code and didn't see anything that stuck out

[KrisLau]

@dishant-yadav Ok super weird new thing I noticed. Deployed to TestFlight and noticed that on physical devices, that workaround does not work.

[dishant-yadav]

Are you able to find the cause of the error?

[KrisLau]

@dishant-yadav I recreated the component as a custom component on my app and noticed that it seems to be stemming from the StyleSheet.flatten here:

source && (React.createElement(Image, Object.assign({ testID: "RNE__Avatar__Image", containerStyle: imageContainerStyle, source: source, borderRadius: rounded ? width / 2 : undefined }, imageProps, { style: StyleSheet.flatten([
        styles.avatar,
        imageProps && imageProps.style,
        avatarStyle,
    ]), ImageComponent: ImageComponent }))),

not too sure what it does tho or if I'm breaking the component by removing it

Nevermind i tried patching it in the package and that didn't work. Honestly I have no clue. Have you been able to reproduce the issue?

[KrisLau]

ok so i spent the past day troubleshooting this and I believe adding the height and width to the Image component fixes it on my personal custom component that mimics the Avatar component:

<Image
    source={source}
    borderRadius={rounded ? width / 2 : undefined}
    style={[
      styles.avatar,
      {borderRadius: containerStyle?.borderRadius ?? undefined},
      imageProps && imageProps.style,
      avatarStyle,
      {height, width}, //here
    ]}
    containerStyle={imageContainerStyle}

However I'm not sure if this might mess with other people's implementation

[KrisLau]

@dishant-yadav Any updates from the RNE end?

[dishant-yadav]

No I don't think so. @KrisLau

[khushal87]

Hey @KrisLau I was testing it on this snack, and it seems to be working fine on imageProps.resizeMode updates. Can you share a repro guide?

[markrickert]

Hi, i encountered this issue today when using the avatar component with a very large image, trying to set imageProps={{resizeMode: "cover"}} on the Avatar component.

Indeed, adding the width and height to the image generated by the avatar component fixes the issue.

Using:

rneui 4.0.0-rc8
react-native 0.73.6
expo sdk 50

Here's my patch-package file till this gets fixed:

@rneui+base+4.0.0-rc.8.patch

diff --git a/node_modules/@rneui/base/dist/Avatar/Avatar.js b/node_modules/@rneui/base/dist/Avatar/Avatar.js
index 337a812..768856d 100644
--- a/node_modules/@rneui/base/dist/Avatar/Avatar.js
+++ b/node_modules/@rneui/base/dist/Avatar/Avatar.js
@@ -57,6 +57,8 @@ export const Avatar = (_a) => {
                 styles.avatar,
                 imageProps && imageProps.style,
                 avatarStyle,
+                // Fix image resize mode: https://github.com/react-native-elements/react-native-elements/issues/3867#issuecomment-1846622459
+                {height, width},
             ]), ImageComponent: ImageComponent }))),
         children));
 };