Including scss in react-native project?

Question

Is there a way to work with scss files in react native application? I am just curious and don't have much knowledge in react-native application architecture, But was thinking of using my current project scss files to work with the new react-native-android project we are planning to build.

REACT NATIVE VERSION : "0.46.4"

REACT VERSION : "16.0.0-alpha.12"

BABEL-PRESET-REACT-NATIVE: "2.1.0"

UPDATE :

I searched a little found out css-to-react-native which kinda let me transform my css into react-native stylesheet object, kinda workaround for me.

Thanks.

Answer 1

TL;DR: Yes, you can.

https://github.com/kristerkari/react-native-sass-transformer

It takes scss like:

.myClass {
  color: blue;
}
.myOtherClass {
  color: red;
}

and converts it to

var styles = {
  myClass: {
    color: "blue"
  },
  myOtherClass: {
    color: "red"
  }
};

Easy peasy.

Answer 2

TL;DR: No you cannot.

In react-native we are using inline style, which you can attain using Stylesheet.create.

Why you cannot CSS like styling is, In react native there are no #id either .class, so you cannot apply the style into #id or .class like you usually do in css styling. And also there is no related style, like in css you can do .element1 > .element2.

I think most developer main reason to use scss are to use nested class definition. Such as below:

.element1 {
  > .element2 {
    ...
  }
} 

And because no class like feature in react-native component, there such method could not be apply in react-native.

Example how to create style in:

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});