Search code examples
react-nativestyled-components

Error when using calc() with react-native and styled-components

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?

Solution

  • 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