When setting a borderTopLeftRadius/TopRight/etc. radius - nothing happens

[grundmanise]

Hi, first of all thank you for the component.

I can't set a topLeft & topRight radius on the BlurView. When I am setting borderTopLeftRadius/borderTopRightRadius/... on the BlurView - nothing happens. Setting it on the wrapper View - blur effect disappears.

[Kureev]

Hi @grundmanise, can you provide us some code so we can reproduce your issue?

[grundmanise]

Yes, sure.

<BlurView style={styles.blurView} blurType="light" blurAmount={15} />

const styles = StyleSheet.create({
    blurView: {
        width: 200,
        height: 200,
        backgroundColor: 'rgba(0,0,0,.1)',
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
        // borderRadius: 100, <- works
    },
});

<View style={styles.wrapper}>
   <BlurView style={styles.blurView} blurType="light" blurAmount={15} />
</View>

const styles = StyleSheet.create({
    blurView: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,.1)',
    },
   wrapper: {
        width: 200,
        height: 200,
        borderTopRightRadius: 100,
        borderTopLeftRadius: 100,
        overflow: 'hidden' //<- with overflow: 'visible' BlurView does not disappear, but borderRadius is not visible.
    },
});

[grundmanise]

I think this can relate to https://github.com/react-native-community/react-native-blur/issues/154

[Kureev]

So borderRadius works, but if you use one of the border<Corner>Radius it breaks? If so, that sounds to me like a RN layout issue.

Side note: it's quite strange that rgba as a background color works for you. IIRC, UIBlurView can't have any opacity.

[grundmanise]

So borderRadius works, but if you use one of the border<Corner>Radius it breaks

Exactly.

Can _visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; , dispatch_async and not subclassing RCTView cause this issue?

Should have mentioned: I only tried on iOS (device).

[robsquires]

Hiya folks, I'm having the same issue (iPhone 6|ios 10.2.1|RN 0.40.0) Would like to try + fix but I'm not particularly experienced with iOS. Any pointers that might help my investigation?

[radetsky]

Same issue.
@grundmanise Great thanks for the wrapper! Cool, man!

[ejkkan]

Anyone got this working?

[radetsky]

Yes, it's working. Read https://github.com/react-native-community/react-native-blur/issues/161#issuecomment-286898330 and you will see that with a wrapper with overflow property it just works.

[C-odes]

Hey guys. In my case, borderRadius has no effect. Im on android :

Code:

`<BlurView style={{ borderRadius:20}} overlayColor={'transparent'} blurType="light" blurAmount={10}

`

Also a small sidenote: see that space between the blur and the white view inside it at the bottom? No padding or margin. And it ONLY disappears when I give the blurview borderWidth: 2 ... aint that some weird stuff