Implementing CSS support for React Native

Implementing CSS for
React Native

I’m Krister
Twitter
@kristerkari
Github
@kristerkari

Why does
React Native
need
CSS support?

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

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 💅

CSS-in-JS
libraries bring us
powerful new
tools

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

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

Cool new things are created
with CSS every day

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

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

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

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

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

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

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

Transformer is just a
function that gets
called when a ﬁle is
getting bundled

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

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

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

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

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)

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

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

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

React Native’s
platform speciﬁc
extensions

styles.android.css - Android
styles.ios.css - iOS
styles.native.css - Android and iOS
styles.css - Android, iOS and Web
↓

platform-speciﬁc-
extensions

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

The implementation is
based on
React Native Extended
StyleSheet
library

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

Media Queries require
that parts of the styles
are modiﬁed at runtime

Doing parsing at
runtime can hurt
performance, so
avoid it

.container {
}
.container {
}
}
{
__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

What is actually done
at runtime?

Media Queries are
matched against React
Native’s dimensions

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"
};
}

Check if a Media Query
matches current
dimensions

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

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

.container {
font-size: 20px;
}
.container {
}
}
{
container: {
backgroundColor: "blue",
fontSize: 20
}
}
↓ ↓ ↓ ↓ ↓ ↓
CSS
JS

new Babel plugin is
needed for Media
Queries

classname-to-dynamic-style

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

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

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

Implementing CSS support for React Native

More Related Content

What's hot

Similar to Implementing CSS support for React Native

Recently uploaded

Implementing CSS support for React Native