React-native-blur: When setting a borderTopLeftRadius/TopRight/etc. radius - nothing happens

Created on 15 Mar 2017 · 9Comments · Source: Kureev/react-native-blur

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.

help wanted

Source

grundmanise

Most helpful comment

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 on 15 Mar 2017

👍2 🎉1

All 9 comments

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

Kureev on 15 Mar 2017

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 on 15 Mar 2017

👍2 🎉1

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

grundmanise on 15 Mar 2017

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.

Kureev on 16 Mar 2017

So borderRadiusworks, 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).

grundmanise on 16 Mar 2017

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?