CODEWITHSUNDEEP
javascriptreact-native
four-eyes
four-eyes

Reputation: 12394

Pass borderRadius to react-native

How would I pass a borderRadius which is taken from plain CSS like

border-radius: 50% 50% 4px 50%

to react-native?

I tried

borderRadius: "50% 50% 4px 50%"

but that gave me

expected dynamic type double, but had type string

Upvotes: 1

Views: 4474

Answers (3)

Prince
Prince

Reputation: 851

react-native implements all styles or props in camelCase. so to provide borderRadius you have to use borderRadius style props. Other style props for border are borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius.

example of a circle of 50,50

render(){
    return(
    <View style={{height:50, width:50, borderRadius:25, backgroundColor:'#555555'}}/>
    )
}

Upvotes: 2

Dan
Dan

Reputation: 8794

You can't pass percentile values because

All dimensions in React Native are unitless, and represent density-independent pixels.

This means that you cannot use percentages and pixels.

Similarly, borderRadius requires a double and not a string and to apply different values for different corners, you need to use

borderBottomLeftRadius
borderBottomRightRadius
borderTopLeftRadius
borderTopRightRadius

Or, you could write a helper function

const getBorderRadius = (borderTopLeftRadius = 0, borderTopRightRadius = 0, borderBottomLeftRadius = 0, borderBottomRightRadius = 0) => {
  return {
    borderTopLeftRadius,
    borderTopRightRadius,
    borderBottomLeftRadius,
    borderBottomRightRadius
  }
}

You can then use it like so, in your styles

<View styles={Object.assign({ <insert your styles here> }, getBorderRadius(10, 10, 10, 10)} />

If your project is supporting of Object Spread (may need transform-object-rest-spread) then you can simply write

<View styles={{ <insert your styles here>, ...getBorderRadius(10, 10, 10, 10)}}/>

If you want to use 50%, you have to calculate it yourself. If you know the height and width of your Component then great that's easy.

Upvotes: 1

Maurice
Maurice

Reputation: 325

Try setting each corner individually with borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, and borderTopRightRadius.

Also, when using react the values accept numbers only.

Upvotes: 2

Related Questions