[react-native] Function values for React Native

[kof]

Lets think about how this could be implemented. Anyone experienced?

[kay-is]

Could something from styled-compnents/native be used?

[kof]

We need first of all a contributor with rn experience in order to evaluate what we need.

[ahmad2smile]

For React Native you have to follow yoga project of Facebook. I think thats the backbone of React Native styles.

[yordis]

@kof from RN

Transformer do not transform the keys of the styles. For example marginTop still marginTop after the transformation which it will different from the web where you need to do transform it to margin-top.

Transformer do not require to cover nested values. For example the usage of `'&:hover': and those other features, it is just one level object.

jss.createStyleSheet(styles).attach() ends using Stylesheet from RN.

What else do you need help with?

I am happy to contribute by helping you because I can't understand the whole code base but we can team up so we tackle this issue.

[kof]

@yordis those are just plugins jss-camel-case, jss-nested. I think there are much more things to consider but more important - we need a contributor who is using react-native and is willing to implement a prototype and use it in some project. I am happy to help from my side, feel free to ping me on gitter or twitter.

[yordis]

@kof then we create a different pipeline where we do use the correct plugins.

Who is the one doing the final compilation? That section needs to be aware of the environment, one compiles to the a string/css file and the others one just use Stylesheet for the final compilation

[kof]

@yordis one more question to figure out

[yordis]

@kof sorry for the delay, has been inactive on RN.

Mate could you help me with the question: Who is the one doing the final compilation?

Where in the pipeline the package compiles the styles object into the final form of the output?

[kof]

createStyleSheet() -> plugins -> toString() essentially if thats what you ask. Plugins api is http://cssinjs.org/plugins

[yordis]

@kof mate I can't figure out how to run my testing. I don't understand this Karma thing, no counting that I dont want to run a browser for my test.

I need help for figure this out by my own or I will install Jest just I dont get stuck with this.

Sorry.

[yordis]

OK this is what I figured out so far.

There is a config for the Renderer which is the one that does something when we call sheet.attach() https://github.com/cssinjs/jss/blob/ef434607f1d46e5e66d26312c4e3657aa0aeda9c/src/StyleSheet.js#L61

So, that attach function from the renderer would need to give back the React Native styles, something like this

attach() {
    const classes = StyleSheet.create(this.sheet.rules.raw);
   // no sure if using this `this.sheet.rules.raw` makes sense thought
   // as long as that object is a flatted plain object we should be good to go then
    return { classes };
  }

So it is around those lines for be able to use React Native with this package at the end of the day what we need is to finish on a plain object for StyleSheet.create/1, on the web, classes are names, on RN classes are an style object from StyleSheet.

The only concern left is the dynamic

I don't understand all the functionality of Renderer interfaces what what should I do for each function.

[kof]

Whats the problem exactly with testing? Yes we use real browsers with karma for now for all tests, but in the future we have discussed a different route, since tests for CSSOM are only needed for some cases.

Regarding .attach() in non-dom env you don't want to use the DOM renderer, you want to implement a RnRenderer. Also you don't want to work with classes I guess in react native, you want style objects, so you don't need to generate styles with toString and classes, you need props in a format that is understood by rn.

In the first step I would try to make a proper implementation with just a convention that user has to use proper property/values.

Next big step would be to be able to convert full css syntax to react-native style, which is way more limited. Also in some cases you would need to throw errors, since not entire CSS can be converted to RN.

[kof]

Also I am not sure if it makes sense to use StyleSheet.create api, since it will evtl do some work that you already do, not sure though. Mb you can bypass it, but its fine for now as you are prototyping.

[HenriBeck]

Maybe also take a look at styled-components how they do their react native integration

[just-Bri]

Has there been any progress towards React Native support?

I have implemented react-jss for our front end and am loving it, but our mobile dev would like to be able to use the same hooks so we can easily share styles.