React Native provides great styling capabilities, but working with plain stylesheets can sometimes feel limiting. brings more flexibility and organization to your styles, making development smoother.

In this guide, we’ll walk you through setting up SCSS in React Native and making the most of its features. Let’s get started!

React Native provides great styling capabilities, but working with plain stylesheets can sometimes feel limiting. If you’ve ever found yourself repeating styles across multiple components or struggling to maintain consistency, Syntactically Awesome Style Sheets (SCSS) can be a game-changer. SCSS brings more flexibility and organization to your styles, making development smoother.

In this guide, we’ll walk you through setting up SCSS in React Native and making the most of its features. Let’s get started!

Create a React Native Project

React Native comes with Metro, the dedicated bundler that takes your React Native code and assets, packages them together, and prepares them to be run on a mobile device. Before setting up SCSS, you need to create a new React Native project. Use these steps to get started:

1. Run the command npx @react-native-community/cli@latest init AwesomeProject
2. Run the command npm run android

SCSS Setup

1. Install the required dependencies by running the following command:

npm install babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-sass-transformer sass --save-dev

2. Update the babel.config.js file to include the necessary plugins:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-classname-to-style',
    [
      'react-native-platform-specific-extensions',
      {
        'extensions': ['scss', 'sass'],
      },
    ],
  ],
};

3. Update the metro.config.js file to ensure Metro can process SCSS files:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */

module.exports = (async () => {
    const defaultConfig = getDefaultConfig(__dirname);

    const customConfig = {
      transformer: {
        babelTransformerPath: require.resolve('react-native-sass-transformer'),
      },
      resolver: {
        sourceExts: [...defaultConfig.resolver.sourceExts, 'scss', 'sass'],
      },
    };

    return mergeConfig(defaultConfig, customConfig);
})();

4. Create a styles.scss file as define your desired files:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5fcff;
}
  
.blue {
  color: blue;
  font-size: 30px;
  font-weight: bold;
}

.image {
  margin-top: 20px;
  width: 200px;
  height: 200px;
}

5. Apply the styles in the App.tsx file:

import styles from './styles.scss';

const BlueText = () => {
  return <Text style={styles.blue}>Trailhead Technology</Text>;
};

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View style={styles.container}>
          <Image
            source={require('./assets/trailhead.jpg')}
            style={styles.image}
          />
          <BlueText />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

Some Tips

You may get an error while importing the style like “Cannot find module ‘./styles.scss’ of its corresponding type declarations.”:

If you do, this means you must add a file called loaders.d.ts on the root folder of your code:

Put the following content in the loaders.d.ts file you just created:

declare module '*.css';
declare module '*.scss';
declare module '*.jpeg';
declare module '*.jpg';
declare module '*.gif';
declare module '*.png';
declare module '*.svg';
declare module '*.json';

These module declarations in TypeScript tell the compiler to treat files with these extensions as importable modules, even if they don’t have explicit type definitions. This is particularly useful when working with assets like images, styles, or JSON files in a TypeScript-based React Native project.

Result

Below is a screenshot of a sample application I built showing how you can add custom SCSS styles and content in a React Native app.

Conclusion

Using SCSS in React Native enhances styling by introducing powerful features like variables, nesting, and mixins, leading to more structured and maintainable styles. While React Native doesn’t natively support SCSS, tools like react-native-sass-transformer enable its use, making it easier to manage styles in large React Native projects.

Further Reading

• React Native – Get started
• Setup SCSS
• react-native-scss Repository