React-Native-Elements: Showing image component in the center of the rounded Avatar

user_959734 0
Viewed 2166

I am using react-native-elements to render an Avatar , I have a image to be shown in a rounded circle Avatar & I would like the image to be in the center of the circle Avatar.

This is what I tried:

<Avatar
   size={60}
   containerStyle={{backgroundColor: 'black'}}
   rounded
   ImageComponent={MyImg}
   avatarStyle={{justifyContent: 'center', alignItems: 'center'}}
 />

MyImg is a tsx file that is converted from a SVG.

The above code results to MyImg showing on the top left position of the rounded Avatar.

Then I tried:

<Avatar
       size={60}
       containerStyle={{backgroundColor: 'black', justifyContent: 'center', alignItems: 'center'}}
       rounded
       ImageComponent={MyImg}
       avatarStyle={{justifyContent: 'center', alignItems: 'center'}}
     />

This code makes MyImg disappear. So, I get stuck now.

How to make the image component showing in the center ?

==== more info ====

Here is MyImg.tsx file:

function SvgMyImg(props) {
  return (
    <Svg width={24} height={24} fill="none" {...props}>
      <Path
        d="M7 7l10 10M17 7L7 17"
        stroke="#fff"
        strokeWidth={2}
        strokeLinecap="round"
      />
    </Svg>
  );
}

export default SvgMyImg;

I just import this file e.g. import MyImg from '../assets/images/MyImg'; and use it as the imageComponent of Avatar like my code shows.

react-native-elements react-native
4 Answers
<Avatar
   size={60}
   containerStyle={{backgroundColor: 'black', width: 70, height: 70, padding: 5}}
   rounded
   ImageComponent={MyImg}
 />
user_102584450 
<Avatar
   size={60}
   containerStyle={{flex:1, backgroundColor: 'black', alignItems: 'center', justifyContent: 'center'}}
   rounded
   ImageComponent={MyImg}
/>

Try this

It would be great if you provide Img Component in short

user_97815620

I've tried something like what you want to do in snack.expo. The key is using position:absolute

 <View style={styles.container}>
      <Avatar
        size={60}
        containerStyle={{ backgroundColor: 'black' }}
        rounded
        ImageComponent={() => (
          <Image
            resizeMode="contain"
            style={{
              height: 30,
              width: 30,
              borderRadius: 25,
              position: 'absolute',
            }}
            source={{
              uri: 'https://homepages.cae.wisc.edu/~ece533/images/boat.png',
            }}
          />
        )}
        overlayContainerStyle={{
          justifyContent: 'center',
          alignItems: 'center',
        }}
      />
    </View>
user_90794110

Try this. I have added margins to the avatar. It worked for me.

        <Avatar
          size={120}
          containerStyle={{
            backgroundColor: '#F6F6F6',
          }}
          rounded
          ImageComponent={MyImg}
          avatarStyle={{
            marginLeft: 38,
            marginTop: 20,
          }}>
user_60223970
Related