Styled-system: Support for React Native?

[cantyjeffrey]

Encountering the following error when trying to import styled-system in a project utilizing styled-components/native:

Is this a known issue? I didn't see any mention of RN support, and didn't know if you were planning on supporting it or not. Let me know if there's any other info you'd like to see.

[jxnblk]

This looks like you have babel-loader set up to transpile packages in your node_modules folder, which should be ignored

[cantyjeffrey]

@jxnblk, I’ll take a look tomorrow and report back on if that’s the issue. This was on a freshly scaffolded app using the react-native init Foo command. I first added in styled-components and scaffolded some basic styles, and then ran into issues only when I installed/imported styled-system. If I comment the import out, the app compiles fine.

I’ll throw it up in a repo since it’s probably helpful to have something to reference. Thanks for the quick response!

[JCMais]

should not .babelrc be added to .npmignore?

[cdimitroulas]

just to confirm, styled-system should work without any issues in React Native?

[cantyjeffrey]

@cdimitroulas I attempted to get this working on three separate projects with no luck. I ended up not using this on RN projects.

[hew]

This works on React Native.

Note: Be sure to use the import styled from 'styled-components/native import.

[nandorojo]

Is there a way to get the CSS media queries to work, given that React Native now supports the matchMedia api, using @expo/match-media?

[RatebSeirawan]

any news about it?
currently, I'm writing an extra layer between styled-components and styled-system to support responsive UI but it would be really cool if the same experience works out of the box for react-native.

[nandorojo]

I’m working on a solution that works out of the box for expo / react native / react native web. It follows the theme-UI API.

[RatebSeirawan]

That's nice, are you changing theme values on the ThemeProvider level based on dimensions?, cuz I'm doing it this way.
e.g width: iPhone5

space: {
  small: 4,
  large: 16, 
}

iPhone11

space: {
  sm: 6,
  large: 18,
}

[nandorojo]

Nope, I’m doing it based on media queries rather than devices. This way, all sizes depend only on viewport size universally, whether it’s on native or web.

[RatebSeirawan]

Nope, I’m doing it based on media queries rather than devices. This way, all sizes depend only on viewport size universally, whether it’s on native or web.

That's interesting, I have a monorepo web/mobile/electron with react-native/react-native-web kinda project tried @expo/match-media and react-native-match-media-polyfill with styled-system couldn't get them to work together, maybe I'm doing something wrong, I would be very interested to help with your solution.

[nandorojo]

You can check it out here, it's only a day-two old project: https://github.com/nandorojo/dripsy

[kumar303]

For those (like me) who landed on this issue from a search, the question _does styled-system support react native?_ is the wrong one to ask.

The actual style implementation can be whatever you want -- any css-in-js solution -- and styled-components/native is supported on react native.

The answer was in https://github.com/styled-system/styled-system/issues/21#issuecomment-356861881 but I'll admit I didn't understand this concept at first.

[RatebSeirawan]

I've landed on this https://github.com/Shopify/restyle at the end.
fits react-native more than styleed-system

[redbar0n]

FWIW, this was illucidating:

If you want a more performant app, I'd reach for Restyle. Styled Components by it's nature is less performant because it requires so much runtime style calculation — vs Restyle leveraging the native styling layer. Although I'd wonder if Restyle is worse on web, since it goes through react-native-web.

If you want first-class Typescript support, go for Restyle. It's made the process much simpler (and actually documented) unlike Styled System. I had to backwards engineer Rebass, Theme UI, and the Gatsby UI library to figure out the right way to type Styled System.

If you want to be able to leverage web features like non-flex layout options, Styled System would be a better bet. Or if you want to leverage Emotion or Styled Components literal style syntax (vs the object style syntax).

If you're considering a switch over from Styled System to Restyle, there's no huge reason to switch over (unless you're seeing issues or focusing more on native).

https://whoisryosuke.com/blog/2020/restyle-for-react-native-vs-styled-system/