question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
grundmanisecommented, Mar 15, 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.
    },
});
0reactions
C-odescommented, Jul 24, 2021

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

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

When setting a borderTopLeftRadius/TopRight/etc. radius ...
When I am setting borderTopLeftRadius / borderTopRightRadius /... on the BlurView - nothing happens. Setting it on the wrapper View - blur ...
Read more >
css - border-radius not working - Stack Overflow
For example, I was trying to set border-radius to a div inside of <a> tag and it was not working. But when I...
Read more >
border-top-left-radius - CSS: Cascading Style Sheets | MDN
The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major ...
Read more >
CSS: border-radius and -moz-border-radius - The Art of Web
If a single value is supplied then that becomes the radius of a rounded corner. If two values are supplied then they become...
Read more >
border-radius - CSS-Tricks
You can give any element "rounded corners" by applying a border-radius through CSS. You'll only notice if there is a color change involved....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found