Why does styled-components 5.x warn about "Expected style to contain units."

Question

When styling a React Native app with Styled Components 5.x I'm getting the warning...

Expected style "borderWidth: 2" to contain units.

This didn't happen with previous versions.

What does the warning mean?

Wellappointed

Answer 1

_{After some research and questions on github I tracked this one down...}

Styled Components uses the package css-to-react-native for it's React Native conversions.

css-to-react-native recently released version 3 which now requires units to be present for all measurements. Details here.

You should use px for React Native as it is density independent.

Wellappointed

Answer 2

I think that using px is a bit of a pain, unintuitive, misleading, and even dangerous if you are using a theme giving some ...px string value to a component (Ionicons size for instance) that expect react native number units.

My way of dealing with this:

import { LogBox } from 'react-native'

LogBox.ignoreLogs([`to contain units`])

Cheep