Including scss in react-native project? - react-native

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',
},
});