Bridging the React Native Knowledge Gap with CSS Syntax

If you have ever built a web app with React or are familiar with it, you may have heard of its exciting sibling, React Native. If you haven’t, React Native is a framework that allows you to build cross-platform mobile apps using the same tools you would use to build a web app. Thanks to React Native, instead of having to learn an entirely new set of tools, web developers can now build mobile apps using many tools they are already familiar with.

While developing mobile apps with React Native is very similar to developing web apps with React, there are some key differences. One difference that can take some time to get used to is the component styling tools you have at your disposal. When building for the web, you get all the potency of CSS (and the ecosystem built around it) to craft the look and feel of your application, while working in React Native has you styling your app’s components with JavaScript. As a result, even if you are an experienced web developer, there is a knowledge gap you must overcome when you start working in React Native. Thankfully, with the right tools, you can bridge this gap and leverage your experience as a web developer.

Styling in React Native

Since working with React Native means building styles with JavaScript, many of the techniques you would use with CSS are no longer available. For example, instead of using classes and external stylesheets, in React Native you would use style props and the StyleSheet API.

// Web Styling 
<style>
  .class {
    color: red;
  }
</style>
<h1 class="class">Hello World!</h1>

// React Native Styling 
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  class: {
    backgroundColor: '#F5FCFF'
  }
});
<Text style={styles.class}>Hello World!</Text>

In addition to how we compose and apply our styles, there are differences in the style properties available and how they function. Thankfully, React Native’s style properties, names, and values usually match CSS. However, that is only the case sometimes. For example, React Native exclusively uses Flexbox for layout meaning there is no implementation of CSS Grid available. The difference that can be the hardest to get used to though, is that there is no more cascade; this means that elements do not inherit any styles from their parents. If that’s not enough to induce anxiety, React Native eventually gets compiled into native code—this results in some style properties not being supported on every platform. On iOS for instance, there are style properties you can use to style shadows that are unavailable on Android.

CSS Syntax in React Native?

There is some good news. With a little bit of setup (hello Babel and Metro) we can use CSS modules in a React Native app. This means it is possible to style React Native apps with CSS syntax, classes, and stylesheets. Before you get too excited though, it is essential to point out that even though we can write what looks like CSS it will be ultimately transformed into JavaScript, This means we will still be subject to many of the same limitations.

The exact setup process will differ based on the tools you are using to build your app, but the general process is the same. Specifically, we need to do two things.

• Configure Babel to transform our styles into JavaScript

• Configure Metro (or any other bundler you may be using) to include CSS modules in the bundle

You can find more detailed instructions by visiting the GitHub repository for React Native CSS modules.

Now that we have everything set up, let’s look at how we can use CSS syntax in React Native. First, let us take a look at the following CSS.

.screen {
  height: 100%;
  background-color: #ffffff;
}

.section {
  flex-direction: row;
  background-color: #d5d5d5;
}

.headingOne {
  font-size: 2rem;
}

.headingTwo {
  font-size: 1rem;	
}

At first glance, it may look like the above CSS could have been pulled from just about any web application. But if you look closer, you will notice that not everything is as it seems. The first thing you might notice is that this example is only using class selectors. That’s because the tools we are using to transform our CSS into JavaScript currently only support the use of class selectors.

Another thing you might have noticed is the use of flexDirection:row without first setting the display property to flex. This is because in React Native, a few style properties have different default values than they do on the web. In this case, flex is the default value for the display property and flex-direction defaults to column instead of row. It is important to remember that even though we are now using CSS syntax, our style properties will still behave the same way they would in any React Native application.

Now that we have written some CSS, it’s time to use it to style a React Native component. Although we can create CSS classes in pretty much the same way we would on the web, applying these classes to our component will look a bit different. Take a look at the following React Native Component.

import styles from './styles.css';

const Component = () => {
  return(
    <View className={styles.page}>
      <Text className={styles.headingOne}>Heading</Text>
      <View className={styles.section}>
        <Text className={styles.headingTwo}>Heading</Text>
      </View>
    </View>
  )
}

In the above component, we first imported our CSS file into our JSX like it was a JavaScript file. Then we applied our styles by using the className property. If you are unfamiliar with React Native, using the className property might not seem all that important to point out. Normally in React Native, components get their styles through a style prop. We can only use the className property thanks to a Babel plugin we added while setting up React Native CSS modules.

Take It a Step Further With SCSS

In addition to being able to use CSS syntax to make writing your styles easier, it is also possible to use the SCSS to maintain consistent styles across your entire React Native application. To do this, we’ll need to add additional Babel plugins to your app and let your bundler know to include files ending in additional extensions. You can find more detailed instructions for using SCSS with React Native by visiting the SCSS support documentation for React Native CSS modules.

Now that we have SCSS setup, we can create a global theme stylesheet that we can use across an entire application. Take a look at the below example.

// theme.scss	
$backgroundPrimary: #ffffff;
$backgroundSecondary: #d5d5d5; 

.layout {
  height: 100%;
  width: 90%;
  background-color: $backgroundPrimary;
}

.headingOne {
  color: #646464;
  font-size: 2rem;
}

In this stylesheet, we have a few color variables and a layout class. These variables and the layout class can be used as a base to build the rest of an application’s styles. With a little organization we can make it so that when we make a change in our theme stylesheet, that change will be reflected across our entire application.

@import 'theme.scss';

.section {
  flex-direction: row;
  background-color: $backgroundSecondary;
}

.headingOneAlternate {
  @extend .headingOne;
  font-size: 1.75rem;
}

In the above example, we only have one stylesheet that uses our global theme stylesheet, so the benefits of this approach might not be immediately clear. But now try to imagine we built a large application with dozens, if not hundreds, of components that all rely on the same set of base colors and you need to change one of those colors. Thanks to the power of SCSS, all we need to do is change one variable and the change will be applied everywhere.

Conclusion

Now that we have seen that it is possible to style React Native applications using CSS syntax and how we can expand upon that with SCSS, is it better than React Native’s out-of-the-box styling? The answer is, it depends on the previous experience of your team. If your team already has a solid foundation in React Native, then it might not add a lot of value to deviate from React Native’s standard approach to styling. On the other hand if your team is new to React Native, then using CSS or SCSS can help bridge the learning gap by providing a much more familiar developer experience.