Emotion: Number in @emotion/native does not work

[imcvampire]

Current behavior:

If I pass a number to styled, it doesn't work. I need to use toString()

styled.View`
  height:  ${{ paddingTop }: { paddingTop: number }) => props.paddingTop.toString()}px;
`

Expected behavior:

styled.View`
  height:  ${{ paddingTop }: { paddingTop: number }) => props.paddingTop}px;
`

Environment information:

• react version: 16.9.0
• react-native version: 0.61.2
• emotion version: 10.0.20

https://snack.expo.io/H1xW-yR_S

[Andarist]

It shouldn't matter - because JS should automatically stringify this if you really are passing a number there.

Could you prepare repro case? Without such, we'll have to close the issue as not actionable.

[imcvampire]

Hi @Andarist, please kindly check https://snack.expo.io/H1xW-yR_S

[Andarist]

Ok, so I've debugged this a little bit and it seems that StyleSheet.create outputs an object with numbers as values and currently, we allow for interpolating those values (numbers) - so it's hard to differentiate between those special numbers and regular ones (like in your case).

The native library was developed by @nitin42 , maybe he could take a look at this or at least clarify if this is intended, how he believes it should work etc.

[nitin42]

@Andarist thanks for looping in!

It's been a while since I last looked at the @emotion/primitives-core implementation so not sure about the issue exactly. Let me have a look at it this week and I'll post an update @imcvampire

[nitin42]

Hey @imcvampire

An alternate solution for this will be to use interpolations in this manner:

const StyledText = styled.Text`
  ${props => props.size ? `font-size: ${props.size}px` : ''};
`

In this way, you can skip toString since the resultant value from the interpolation will be the combined string font-size: <your-prop-value>px. This should help.

[Andarist]

Both are workarounds though. Could you describe complexity of implementing a "proper" solution? I suspect it would require tracking more information about already parsed~ stuff to differentiate regular numbers from special StyleSheet IDs, right?

[nitin42]

Yes, that's what I was thinking. I'll give it a go 👍

[imcvampire]

Hi @nitin42, do you have any update for this problem?

Thank you!

[aecorredor]

I know it's been a while, so just wondering if there's a workaround for this at the moment. Thanks!

[Andarist]

No workaround - somebody from the community has to step up to implement a fix for this as our team do not have resources to handle issues related to the React Native.