By default React Native only allows you to write styles for your app using a Javascript API called StyleSheet. This presentation shows how I added support for using CSS files to React Native. https://github.com/kristerkari/react-native-css-modules

1. Implementing CSS for
React Native

2. I’m Krister
Twitter
@kristerkari
Github
@kristerkari

3. Why does
React Native
need
CSS support?

4. const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5,
},
});

5. StyleSheet is a
subset of CSS

6. const Container = styled.View`
flex: 1;
justify-content: center;
align-items: center;
background-color: #0f0;
`;
const Title = styled.Text`
font-size: 30px;
text-align: center;
color: palevioletred;
box-shadow: 1px 2px 3px red;
elevation: 6;
`;
styled-components 💅

7. CSS-in-JS
libraries bring us
powerful new
tools

8. CSS type checking

9. What about all the
existing CSS? What
about Sass, Less
and PostCSS?

10. https://github.com/search?q=css&type=Code
Github has almost 45 million
CSS files

11. Cool new things are created
with CSS every day

12. Wouldn’t it be nice if
there would be an
easier way to use
all that CSS
in React Native?

13. Supporting CSS in
React Native means
that developers have
more options to
choose from

14. CSS modules
for Web

15. .container {
padding: 30px 10px;
margin-top: 65px;
align-items: center;
border: 2px dashed #f00;
}
<div className={styles.container}>Some text</div>
import styles from "./styles.css";

16. <style>
._20WEds96_Ee1ra54-24ePy {
padding: 30px 10px;
margin-top: 65px;
align-items: center;
border: 2px dashed #f00;
}
</style>
<div class="_20WEds96_Ee1ra54-24ePy">Some text</div>

17. React Native
CSS modules

18. What is included?
React Native specific CSS parser
Transformer to parse and live reload CSS
Babel plugins
to add className property to React Native
to add platform specific extensions for
CSS files

19. CSS parser is the
same one that
styled-components
is using

20. .container {
padding: 30px 10px;
margin-top: 65px;
align-items: center;
border: 2px dashed #f00;
}
{
container: {
paddingBottom: 30,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 30,
marginTop: 65,
alignItems: "center",
borderColor: "#f00",
borderStyle: "dashed",
borderWidth: 2
}
}
↓ ↓ ↓ ↓ ↓ ↓
CSS
JS

21. What is a
transformer?

22. module.exports = {
getTransformModulePath() {
return require.resolve("./my-css-transformer.js");
},
getSourceExts() {
return ["css"];
}
}
rn-cli.config.js
Tell bundler to support
additional file extensions
Custom transformer

23. Transformer is just a
function that gets
called when a file is
getting bundled

24. module.exports.transform = function({ src, filename, options }) {
if (filename.endsWith(".css")) {
return upstreamTransformer.transform({
src: "module.exports = " + JSON.stringify(css2rn(src)),
filename,
options
});
}
return upstreamTransformer.transform({ src, filename, options });
};
my-css-transformer.js
Call to CSS parser

25. CSS gets parsed when
the app is bundled
There is no runtime
overhead

26. Choose from the
available transformers
CSS, Sass, Less, Stylus or
PostCSS

27. module.exports = {
getTransformModulePath() {
return require.resolve("react-native-sass-transformer");
},
getSourceExts() {
return ["scss", "sass"];
}
}
rn-cli.config.js

28. Babel plugins

29. Node {
type: 'JSXExpressionContainer',
start: 67,
end: 85,
loc:
SourceLocation {
start: Position { line: 1, column: 67 },
end: Position { line: 1, column: 85 } },
expression:
Node {
type: 'ObjectExpression',
start: 68,
end: 84,
loc: SourceLocation { start: [Position], end: [Position] },
properties: [ [Node] ] } }
Abstract Syntax Tree (AST)

31. AST Explorer

32. babel-plugin-react-native-
classname-to-style

33. <Text className={styles.myClass} />
<Text style={styles.myClass} />
↓ ↓ ↓ ↓ ↓ ↓

34. With className you
can use the same
React components
for Web and Native

35. React Native’s
platform specific
extensions

36. import styles from "./styles.css";
styles.android.css - Android
styles.ios.css - iOS
styles.native.css - Android and iOS
styles.css - Android, iOS and Web
↓

37. babel-plugin-react-native-
platform-specific-
extensions

38. import styles from "./styles.css";
import { Platform } from "react-native";
var styles = Platform.OS === "ios" ?
require("./styles.ios.css") :
require("./styles.css");
↓ ↓ ↓ ↓ ↓ ↓

39. CSS Media
Queries

40. The implementation is
based on
React Native Extended
StyleSheet
library

41. .container {
background-color: red;
}
@media (orientation: landscape) {
.container {
background-color: blue;
}
}
{
container: {
backgroundColor: "red"
},
"@media (orientation: landscape)": {
container: {
backgroundColor: "blue"
}
}
}
CSS JS

42. Media Queries require
that parts of the styles
are modified at runtime

43. Doing parsing at
runtime can hurt
performance, so
avoid it

44. .container {
background-color: red;
}
@media (orientation: landscape) {
.container {
background-color: blue;
}
}
{
__mediaQueries: {
"@media (orientation: landscape)": [{
expressions: [
{
feature: "orientation",
modifier: undefined,
value: "landscape"
}
],
inverse: false,
type: "all"
}]
},
container: {
backgroundColor: "red"
},
"@media (orientation: landscape)": {
container: {
backgroundColor: "blue"
}
}
}
CSS JS

45. What is actually done
at runtime?

46. Media Queries are
matched against React
Native’s dimensions

47. import { Dimensions } from "react-native";
function getMatchObject() {
const win = Dimensions.get("window");
return {
width: win.width,
height: win.height,
orientation: win.width > win.height ? "landscape" : "portrait",
"aspect-ratio": win.width / win.height,
type: "screen"
};
}

48. Check if a Media Query
matches current
dimensions

49. const isMatch = mediaQuery.match(query, matchObject);
if (isMatch) {
res = merge(res, styles[key]);
}

50. When a Media Query
matches, everything
inside it gets merged
with base styles

51. .container {
background-color: red;
font-size: 20px;
}
@media (orientation: landscape) {
.container {
background-color: blue;
}
}
{
container: {
backgroundColor: "blue",
fontSize: 20
}
}
↓ ↓ ↓ ↓ ↓ ↓
CSS
JS

52. new Babel plugin is
needed for Media
Queries

53. babel-plugin-react-native-
classname-to-dynamic-style

54. <Text className={styles.myClass} />
<Text style={process(styles).myClass} />
↓ ↓ ↓ ↓ ↓ ↓

55. To be implemented…
CLI installer
A better way to measure Media Queries
runtime performance
CSS Viewport units
And more…

56. Thanks!
Questions?
github.com/kristerkari/
react-native-css-modules