Native Border Radius support

[mrousavy]

Currently, no border radius property is supported. You can achieve the same behaviour in react by setting overflow: hidden and then applying your borderRadius.

To natively support borderRadius the property group has to be exposed and set on the native views (UIImageView, ReactImageView).

For Android the official image view provides this borderRadius prop, see the react native source code, not sure why that doesn't work in my case since BlurhashImageView is a derived class (from ReactImageView)

On iOS, this looks really easy, see this stackoverflow question. Couldn't find the react native's Image component source code, if anyone can help me out here I'd appreciate it.

[mrousavy]

When setting borderRadius right now, it does nothing on iOS but makes the Image disappear on Android..

[mrousavy]

Supported on iOS through 3f7d921, also enables shouldRasterize for the UIImageView's layer.

Since I moved from the ReactImageView to the native ImageView, Android still doesn't support it, no idea how to implement that on a layer level. If anyone has an idea, please comment or open a PR with a solution.

iOS	Some wacky Android implementation I came up with

[mrousavy]

On second thought, maybe it's not a good idea to try and support that natively. It's probably more efficient and less code to just let the containing view handle the clipping (border radius)

[gwenoleR]

Hi @mrousavy
It seems that in Android even if the containing View has the radius the Blurhash doesnt have it.. Or may be I made a mistake but work fine on iOS

Left: Android
Right: iOS

EDIT: My bad, on iOS I have a borderRadius params on the style props of the blurhash

EDIT2: I can reproduce the issue with this simple code :

<View style={{ width: 100, height: 100, borderRadius: 10, margin: 10 }}>
          <Blurhash
            blurhash="U56Td:M{00xvYjWCyEaKDgkX={M{Y8n$r;V?"
            style={{ width: 100, height: 100, borderRadius: 10 }}
          />
</View>

Output:

Left: Android, Right: iOS

EDIT 3: My bad, RTFM.
Adding overflow: hidden works 👌

<View
          style={{
            width: 100,
            height: 100,
            borderRadius: 10,
            margin: 10,
            overflow: 'hidden',
          }}
    >
          <Blurhash
            blurhash="U56Td:M{00xvYjWCyEaKDgkX={M{Y8n$r;V?"
            style={{ width: 100, height: 100, borderRadius: 10 }}
          />
</View>

Produce:

Sorry for that, and thanks for this good work ! 👏

[mrousavy]

@gwenoleR yes, overflow hidden is the key here. I'm still not sure if I want to natively support border radius or just leave it up to the user to wrap it in an overflow hidden view 🤔

[andreialecu]

One other interesting problem here is that if you set borderRadius to a large value on iOS it begins "inverting/collapsing" the border until it disappears.

This is with borderRadius: 100

Originally I had borderRadius set to Number.MAX_SAFE_INTEGER and nothing was rendering.

[mrousavy]

@andreialecu let me know if #119 fixes this for you.