I'm using styled-components in react-native with the calc()
function
const MyElement = styled(MyText)`
position: absolute;
left: calc(20% - 10px);
`
Error
JSON value 'calc(20% - 10px)' of type NSString cannot be converted to YGValue. Did you forget the % or pt suffix?
I already found this solution (CSS' calc() in styled-components). But I am already using whitespaces.
What am I doing wrong?
React-native uses yoga layout which doesn't support calc
. Ideally try to position your elements using flex. Otherwise, create additional wrapper for the element, go with left: 20%
on on it and add -10px
on the element itself. Another option is to calculate left
yourself from container width using View#onLayout of that container. It is also possible to calculate it from screen width (if your element can be positioned based on screen width rather than parent width) with Dimensions