Avatar Image is square (not round)

[ShaunSpringer]

Image has no radius applied to it (despite the theme indicating that it does)

Sample code:

      <Image
              styleName="medium-avatar"
              source={{ uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
            />

@shoutem/theme: 0.11.1 @shoutem/ui: 0.22.4 react-native: 0.50.3

[Definitely-Not-Vlad]

Hey Shaun,

This is an issue with our current implementation of the Image component, which uses the React Native ImageBackground component, which can't utilize the borderRadius style. Here are some workarounds until we publish a new version which includes our own ImageBackground and Image component.

Case 1: You have images with nested content

If you have images which have nested content (e.g. components within the Image component) I suggest utilizing this workaround:

import {
  Image as RoundedImage
} from 'react-native';

...

<RoundedImage
  style={{
    width: dimensionRelativeToIphone(145),
    height: dimensionRelativeToIphone(145),
    borderRadius: 72.5,
    borderWidth: 0,
  }}
  source={{ uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
/>

I'm sure you're aware that's the medium-avatar style. This should allow you to utilize the rounded image while also letting you utilize our Image component for images with nested content.

Case 2: No nested content in images If you don't have images with nested content, you can simply go to AppName/node_modules/@shoutem/ui/components/Image.js and replace the following import:

import {
  ImageBackground as RNImage,
  Platform,
} from 'react-native';

With this:

import {
  Image as RNImage,
  Platform,
} from 'react-native';

[ikalafat]

Hey @Vladimir-Vdovic, @ShaunSpringer

It might help if you add overflow: hidden to shoutem.ui.Image in theme.js, ie. below this line: https://github.com/shoutem/ui/blob/develop/theme.js#L508

Works on my side, without fiddling with Image.js and manually setting style.

Not sure about Android though.