POC: Add custom units support

[NathHorrigan]

One of the struggles of using styled components on React Native is lack of rem, vh & vw support which can make styled tags full of Javascript values relying on utility functions like so:

const Header = styled.Text`
  font-size: ${responsiveText(14)}
`

or

const Container = styled.Text`
  width: ${SCREEN_WIDTH}px;
`

This makes code IMO super messy and fragmented. Adding the ability the expand the length units for this underlying library would greatly improve developer experience. This PR adds the ability for developers to define their own custom units once for their project like so:

import { Dimensions} from 'react-native'
import { declareCustomUnit } from 'css-to-react-native'

// 1 rem == 16px
declareCustomUnit('rem', 16)

// 1vw = 1% of screen width
declareCustomUnit('vw', Dimensions.get('screen').width / 100)

// 1vh = 1% of screen height
declareCustomUnit('vh', Dimensions.get('screen').height / 100)

This registers those units so that they can be used throughout the RN project:

const HeaderText = styled.Text`
  color: ${props => props.theme.fontColor};
  font-size: 1.5rem;
  font-family: ${props => props.theme.sansFont};
`

[jacobp100]

It’s possible to do this already - but it’s down to the runtime to do it. Look at my project, Cssta, for an example of this.

[NathHorrigan]

Hi @jacobp100

I appreciate the quick response, Have you got a reference to how this can be done via Styled Components?

It seems silly to switch to a smaller library when this feature in css-to-react-native has been requested in styled component threads multiple times?

[jacobp100]

The work to achieve this needs to be done in styled components — not this library

I don't work on the styled components library so can't really comment on what it'd take for them to implement it