CODEWITHSUNDEEP
androidcssreactjsreact-native
rasaq ganiu
rasaq ganiu

Reputation: 43

How can I rewrite this CSS for react native

I am getting an error when writing this CSS property for react native.

border-radius: 50% / 100%;

I try to do:

borderRadius: '50% / 100%'

I got an error that Java.lang.string cannot be cast to java.lang.double

Upvotes: 2

Views: 464

Answers (2)

Noitidart
Noitidart

Reputation: 37268

In react-native we can't set percentage on borderRadius, you have to use numbers.

You can set a high borderRadius, then use onLayout to get the actual width of the view and then set the border radius. Or just set a high borderRadius.

Most preferably though, you know the dimensions, and just use that divided by 2.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273626

Split the shorthand property of border-radius to avoid the use of /:

border-radius: 50% / 100%;

Become this:

border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
border-bottom-left-radius: 50% 100%;

Upvotes: 1

Related Questions