React Native support

[thgh]

Is your feature request related to a problem? Please describe. I'm using Expo (React Native) and it doesn't support CSS. I need style objects instead.

Describe the solution you'd like

• [ ] Fontsize in px
• [ ] Spacing in px
• [ ] Typed element output with StyleSheet.create({})
• [ ] Possibly more things

Describe alternatives you've considered I haven't. Coding things manually so far.

Additional context StyleSheet: https://docs.expo.io/versions/latest/react-native/stylesheet/

[mikaelvesavuori]

Hey @thgh and thanks for your issue/idea for improvement!

The px part should be fairly easily doable I think. Typed element output I believe will be harder (possibly not doable) as design tokens and Figmagic is based around non-contextual values (e.g. the exact value of a color, size of a font etc.). My assumption is that the objects are contextual (given their names, such as container and title). I'm not a React Native dev either so I don't have much experience on how this would ideally work...

The only, and closest, option I see for that would be like how the element generation works, but that's much deeper and probably not at all what you need here...

But again, as for driving the generation of values in px I'll certainly look at that. Typically you'd tie values in (by importing them from the generated Figmagic files) into something like your style object and using them as values (ugly demo example here):

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: ${spacing-medium},
    backgroundColor: ${someColor},
  },
  title: {
    marginTop: ${spacing-small},
    paddingVertical: ${spacing-mini},
    borderWidth: ${spacing-micro},
    borderColor: ${someAccent},
    borderRadius: ${spacing-micro},
    backgroundColor: ${someBackground},
    color: ${white},
    textAlign: 'center',
    fontSize: ${h1},
    fontWeight: 'bold',
  },
});

[thgh]

Thanks for the quick reply! I hope to apply figmagic to a React Native project in the coming month and will report my findings here :-)

[JaccoGoris]

Hi, chiming in here, we're using figmagic in a setup with styled-components/native which doesn't take rem or em. What is the best way to work around the lack of px output?

I was thinking either the design file could change to use values without px, (but my designer won't like it 😄 ) or maybe manipulating the values before putting them into the styled-components theme (take "1rem" and parse it to an int, then multiply by base fontSize)

Thanks!

[mikaelvesavuori]

Hi @thgh and @JaccoGoris,

I've been busy at work and doing other open-source projects so this got a bit sidelined. I've just released version 4.1.2 which supports px value output for both spacing and font sizes.

If you feel like this solves the main request, go ahead and close this issue :)

[JaccoGoris]

Oh wow @mikaelvesavuori that sounds awesome! I was working on a workaround.. and now I don't have to :D thanks a lot!!

I don't know about @thgh but it certainly solved my issue 😁 thanks!

[mikaelvesavuori]

I am closing since the token export part is done and no further React Native work is technically needed to support it.