React Native

[zeitamin]

is react native supported? because I just initiated a project and saw styles as props already work(without styled-components and styled-systems):

   <View
            backgroundColor='yellow'
            flex={1}
            margin={0}
          >

are there any conflict between them? why would someone use styled-system in react-native?

[macintoshhelper]

Hi, I am using this library with React Native and React Sketch.app, it works fine, but you need to use styled-components/native or styled-components/primitives for React Native, and you need to polyfill some features like the responsive media queries. This library adds a lot of useful utils like passing theme keys for colour, etc.

React Native shouldn't let you pass styles as props, you need to use styles the same as React web: <View style={{ backgroundColor: 'yellow' }} />.

Here's some code of mine, for using styled-system with React Primitives (for web, React Native, Sketch.app, etc): https://github.com/elemental-design/elemental-react/blob/master/src/atoms/Box/Box.tsx – there's an example of a polyfill system for the responsive breakpoint system in this library (with a LayoutProvider to handle screen sizes).

[ItsWendell]

I'm trying to accomplish the same thing.

@macintoshhelper Love your work! I've been experimenting myself with adding support for media queries using react-native-extended-stylesheet in Styled Components / Emotion. I've been going through your code, can you explain how your poly-fill works?

I've got a couple of versions working with react-native-extended-stylesheet, favorite and most modular part is using Emotion instead of Styled Components, since it's easier to extend the primatives-core of Emotion, with the extended stylesheet. Had to change the style props to actually use StyleSheet.create(), since emotion works using inline style props instead of sheets.

The only two problems I have:

1. screen and media queries are not supported in extended stylesheet, and there is no way to customize the media queries now in Styled System, which I think we should support. Custom media query breakpoints #1133
2. For the media queries to respond to orientation and screen resizes (think Web) I still have to figure out a clean method for this. https://github.com/vitalets/react-native-extended-stylesheet#theming

I would love to see support for #1133 to at least solve this first issue.

[macintoshhelper]

I'm trying to accomplish the same thing.

@macintoshhelper Love your work! I've been experimenting myself with adding support for media queries using react-native-extended-stylesheet in Styled Components / Emotion. I've been going through your code, can you explain how your poly-fill works?

I've got a couple of versions working with react-native-extended-stylesheet, favorite and most modular part is using Emotion instead of Styled Components, since it's easier to extend the primatives-core of Emotion, with the extended stylesheet. Had to change the style props to actually use StyleSheet.create(), since emotion works using inline style props instead of sheets.

The only two problems I have:

1. screen and media queries are not supported in extended stylesheet, and there is no way to customize the media queries now in Styled System, which I think we should support. Custom media query breakpoints #1133
2. For the media queries to respond to orientation and screen resizes (think Web) I still have to figure out a clean method for this. https://github.com/vitalets/react-native-extended-stylesheet#theming

I would love to see support for #1133 to at least solve this first issue.

Thanks!

What my polyfill is doing, is resolving/flattening breakpoint array props before they reach styled-system. breakpoint is an integer index (key to be used on the array prop) that is set/retrieved from a context e.g. <LayoutContext> (in react-native, you can probably set this in your app wrapper by taking the width and height with the useWindowDimensions hook and use a switch/case to resolve the width to a breakpoint: <LayoutContext.Provider breakpoint={breakpoint}> (0 for mobile, 1 for tablet, etc).

Some code that may be useful (for react-sketchapp, but can be refactored to react-native by moving LayoutProvider to the app root): https://github.com/elemental-design/react-sketchapp-examples/tree/master/responsive-devices/src

Issue #949 has another implementation example also btw.

const getSize = (args: Styles, breakpoint: number) => { is a middleware/preprocess step that I'm using in base components, resolving the breakpoint array, this would probably be more appropriately named preprocessStyledProps, but this should be handled by styled-system inside of the functions. My polyfill isn't good for performance, as the idea is to loop through every possible styled-system prop and use theme-get on the resolved breakpoint value. Hope this makes sense.

[ItsWendell]

@macintoshhelper Thanks that helped a lot!

I've made an extensions for Emotion (was a bit easier to extend than Styled Components) that adds support for React Native Extended Stylesheet, with support for dynamic responsiveness.

How it works is that if a component has any breakpoints / media queries, I'll add a Dimensions listener to that styled component, that changes the stylesheet of the component once a breakpoint is hit. This causes the component to re-render properly without losing it state. I'll upload a demo somewhere next week.

@jxnblk Support for #1133 would again, be appreciated since now I have to manually filter out 'screen and' properties from the media queries which isn't ideal.

Edit:
Here is the first release with working example of Styled System with react native. emotion-native-extended ) (see example)

[viniarruda]

I'm trying to use styled-system with theme, but doesn't work. I try color, space, but the component not understand the theme things.

Anyone have the same problem?

[macintoshhelper]

Hi @viniarruda, the theming is up to styled-components. This library just consumes the theming system. You're probably referencing different instances of the theme context. Make sure you're importing the { ThemeProvider} from styled-components/primitives or styled-components/native, and maybe you are bundling styled-components as a dependency multiple times, so try aliasing styled-components to ./node_modules/styled-components in your Webpack/Metro config.

[viniarruda]

Hi @viniarruda, the theming is up to styled-components. This library just consumes the theming system. You're probably referencing different instances of the theme context. Make sure you're importing the { ThemeProvider} from styled-components/primitives or styled-components/native, and maybe you are bundling styled-components as a dependency multiple times, so try aliasing styled-components to .node_modules/styled-components in your Webpack/Metro config.

Oww! It works. Thank you man, you save me haha. I'm tried using the ThemeProvider for styled-components, not /native. This is the problem, I do not thinked about this.