Style problems, borderRadius not working

[Baer05]

There seems to be a problem with the style: if I pass style={{ borderRadius: 20 }} nothing happens. I would expect the image to have rounded corners now. Am I right that this is currently not possible or am I doing something wrong?

[efstathiosntonas]

Hi @Baer05, if you add overflow: “hidden” on the style, does it round the image?

[Baer05]

Hi @efstathiosntonas, thanks for the super fast response... with overflow:hidden it works as requested. Thank you for your help

[efstathiosntonas]

You're welcome @Baer05, glad you sorted it out. The overflow thing is a quirk of react-native Image component when using radius on images, it's been around for ages 😄

[GoDeepBlue]

Ran in to the same issue ... This worked great - thanks!

[Thijmen]

Unfortunately, this doesn't seem to work for me. Has something changed around this subject?

[efstathiosntonas]

Hi @Thijmen, nothing has changed 🤷‍♂️

Can you share your code?

[Thijmen]

Hi @efstathiosntonas, sure;

 <CachedImage
        source={'https://placehold.co/600x400/000/FFFFFF.png'}
        style={{ height: 200, width: 200, marginLeft: 50, borderRadius: 20, overflow: 'hidden' }}
      />
      <Image
        source={{ uri: 'https://placehold.co/600x400/000/FFFFFF.png' }}
        style={{
          height: 200,
          width: 200,
          marginLeft: 50,
          borderRadius: 20,
          overflow: 'hidden'
        }}
      />

Above code results in:

[efstathiosntonas]

Can you wrap the CachedImage with a View and apply overflow:"hidden"?

[Thijmen]

Following code leads to this screen:

  <View>
      <View style={{ overflow: 'hidden' }}>
        <CachedImage
          source={'https://placehold.co/600x400/000/FFFFFF.png'}
          style={{ height: 200, width: 200, marginLeft: 50, borderRadius: 20, overflow: 'hidden' }}
        />
      </View>

      <Image
        source={{ uri: 'https://placehold.co/600x400/000/FFFFFF.png' }}
        style={{
          height: 200,
          width: 200,
          marginLeft: 50,
          borderRadius: 20,
          overflow: 'hidden'
        }}
      />
    </View>

[efstathiosntonas]

if you also give borderRadius:20 on View?

[Thijmen]

Leads to the same result:

import { Image, View } from 'react-native'
import { CachedImage } from '@georstat/react-native-image-cache'

export const TestScreen = () => {
  return (
    <View>
      <View style={{ overflow: 'hidden', borderRadius: 20 }}>
        <CachedImage
          source={'https://placehold.co/600x400/000/FFFFFF.png'}
          style={{ height: 200, width: 200, marginLeft: 50, borderRadius: 20, overflow: 'hidden' }}
        />
      </View>

      <Image
        source={{ uri: 'https://placehold.co/600x400/000/FFFFFF.png' }}
        style={{
          height: 200,
          width: 200,
          marginLeft: 50,
          borderRadius: 20,
          overflow: 'hidden'
        }}
      />
    </View>
  )
}

[Thijmen]

@efstathiosntonas Am I doing something wrong? Are you able to reproduce?

[Thijmen]

Can we re-open this issue? Currently using react-native 0.72.6 and version 3.1.0 of this package.

[pierre-softimpact]

I had this problem but it was fixed when I set the resizeMode of the CachedImage to "cover".

[Thijmen]

Yes, that seems to work for me too @pierre-softimpact! Thanks!