Sass in React Native: A Beginner’s Guide

Unlock the Power of Sass in Your React Native App

Sass, short for “Syntactically Awesome Style Sheets,” is a game-changer for styling large web applications. As a pre-processor, it allows developers to write, structure, and organize CSS code with ease. Many modern CSS frameworks and libraries, like Bootstrap, are built using Sass. But did you know you can also harness its power in your React Native projects?

How Sass Works

Sass is a development-time tool, not an extension to the CSS standard. When you use a module bundler like webpack to build your code, it compiles your Sass files alongside your regular CSS files. In the web ecosystem, Sass files are saved with the.scss extension, which provides a syntactic sugar similar to CSS. You can even write raw CSS inside your Sass files, as every valid CSS is also a valid SCSS.

Setting Up Sass in React Native

To configure Sass in your React Native project, you’ll need the react-native-sass-transformer package. This package uses node-sass as a dependency to provide the Node binding to Sass. Create a new React Native project and install both dependencies using the command npm install react-native-sass-transformer node-sass.

Next, add the following configurations to your metro.config.js file:

javascript
module.exports = {
transformer: {
babelTransformerPath: require.resolve('react-native-sass-transformer'),
},
};


If you’re using Expo CLI, create a metro.config.js file inside the root directory and add the above configurations. Then, update your app.json file to load these configurations:

javascript
{
"expo": {
...
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": ["js", "jsx", "ts", "tsx", "scss"]
}
}
}


Using Sass to Style Your React Native Components

Create a new file called App.scss and add the following styles:

scss
.container {
flex: 1;
justifyContent: 'center';
alignItems: 'center';
backgroundColor: #f5f5f5;
}


Import these styles into your App.js file and log the Appstyles object to the console:

“`javascript
import React from ‘eact’;
import { View, Text } from ‘eact-native’;
import Appstyles from ‘./App.scss’;

console.log(Appstyles);
“`

You’ll see that your CSS styles have been compiled to a plain JavaScript object. Now, use these styles like any regular React Native styles object inside your App.js file:

javascript
function App() {
return (
<View style={Appstyles.container}>
<Text>Hello World!</Text>
</View>
);
}


The Power of Variables in Sass

Sass allows you to create variables to store information that can be used in various style blocks. Create variables for font sizes and colors, and use them to style your components:

“`scss
$font-size-lg: 24px;
$background-color-white: #ffffff;

.container {
font-size: $font-size-lg;
background-color: $background-color-white;
}
“`

Inheritance in Sass

Sass lets you reuse a set of styles amongst multiple selectors. Define a placeholder class using the % symbol, and then extend it using the @extend keyword:

“`scss
%box-shared {
padding: 10px;
border: 1px solid #ccc;
}

.boxWhite {
@extend %box-shared;
background-color: #ffffff;
}
“`

Using Operators in Sass

Sass allows you to perform simple mathematical calculations while writing your styles using operators. Create a variable for the box dimension, and then use it to calculate the height and width of the box:

“`scss
$box-dimension-lg: 200px;

.box {
width: $box-dimension-lg / 2;
height: $box-dimension-lg / 2;
}
“`

With Sass, you can simplify your CSS styles and rules, write more clean and concise code, and reuse your styles easily between your web and React Native projects. Explore more features like modules, mixins, and functions in the official Sass docs. Happy coding!