emotion: Number in @emotion/native does not work

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

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 8
Comments: 20 (9 by maintainers)

Most upvoted comments

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.

Andarist on Oct 11, 2019

Yeah, but it diverges from web code where putting a number works directly. You’re right, it does work on styled-components!

The problem with that is that it makes migrating from styled-components to emotion trickier 😉

This prettiest way I found to write it was this:

const Component = styled.View`
  margin: ${({ theme }) => theme.margin.xs + 'px'};
`

pierpo on Feb 23, 2022

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

Thank you!

imcvampire on Oct 24, 2019

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?

Andarist on Oct 15, 2019

@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 on Oct 14, 2019

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.

Andarist on Aug 22, 2020

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

nitin42 on Oct 16, 2019

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.

Andarist on Oct 11, 2019