How to add External CSS, SCSS, SASS and LASS in React Native

CSS SASS LASS React React Native Android IOS SCSS

By Code solution
Jan 20th, 2021
0 comments
1

React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript.Add the following libraries to used external css in react native.

This Tutorial provide information to how to used External Scss in react native.

Following libraries are needed:

react-native-sass-transformer - Transforms Sass to a React Native compatible style object and handles live reloading
babel-plugin-react-native-platform-specific-extensions - Transforms ES6 import statements to platform specific require statements if the platform specific files exist on disk.
babel-plugin-react-native-classname-to-style - Transforms className property to style property.

Creating New Project run this command

react-native init <Project-name>

After then create a project add node package

npm install --save native-base

After then install node package then run this command

react-native link

SASS and SCSS
npm add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-sass-transformer node-sass --dev

yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-sass-transformer node-sass --dev

After that open .babelrc (or babel.config.js) and this code

React Native v0.57 or newer

"plugins": [
    "react-native-classname-to-style",
    [
        "react-native-platform-specific-extensions",
        {
        "extensions": ["scss", "sass"]
        }
    ]
]

For React Native v0.56 or older

.babelrc

 "plugins": [
    "react-native-classname-to-style",
    [
      "react-native-platform-specific-extensions",
      {
        "extensions": ["scss", "sass"]
      }
    ]
  ]

Setup Metro bundler configuration

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-sass-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "scss", "sass"]
    }
  };
})();

For React Native v0.56 or older

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

After then Open index.js under Project folder and add this code.

/**
 * @format
 */
import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

After then src folder under ther project folder like "project-name/src/" and cut the App.js of the root folder and paste src folder
After that add this code in App.js

import React, {Component} from 'react';
import { Root } from "native-base";
import {Platform, StyleSheet, Text, View} from 'react-native';
import Login from "./Components/login/login";

export default class App extends React.Component {
  render() {
    return (
      <Root>
        <Login />
      </Root>
    );
  }
}

After then create Components folder under ther src folder and create a login folder and file then add code

import React, {Component} from 'react';
import { View } from 'react-native';
import { Container, Header, Content, Card, CardItem, Text, Left, Body, Right, Button, Icon, Title } from 'native-base';
import styles from "./login.scss";
export default class Login extends Component {
    render() {
        return (
          <Container>
           <Header>
              <Left>
                <Button transparent>
                   <Icon name='menu' />
                </Button>
              </Left>
              <Body>
                <Title>Header</Title>
              </Body>
              <Right />
            </Header>
            <Content>
              <Card>
                <CardItem style={styles.green}>
                  <Body>
                    <Text style={styles.whiteblack}>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </Text>
                  </Body>
                </CardItem>
              </Card>
              <Card>
                <CardItem style={styles.black}>
                  <Body>
                    <Text style={styles.whitetext}>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </Text>
                  </Body>
                </CardItem>
              </Card>
              <Card>
                <CardItem style={styles.white}>
                  <Body>
                    <Text style={styles.blacktext}>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </Text>
                  </Body>
                </CardItem>
              </Card>
              <Card>
                <CardItem style={styles.Red}>
                  <Body>
                    <Text style={styles.whitetext}>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </Text>
                  </Body>
                </CardItem>
              </Card>
            </Content>
          </Container>
        );
      }
}

After that create login.scss in login folder and add the code

.container {
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  .blue {
    background: blue;
    font-size: 30px;
  }
  .whitetext{
    color: #fff;
  }
  .whiteblack{
    color: #000;
  }
  .black {
    background: #000;
    font-size: 30px;
  }
  .green{
    background: #0f0;
  }
  .Red {
    background: #F00;
    font-size: 30px;
  }
  .White {
    color: #000;
    background: #FFF;
    font-size: 30px;
  }

Add External Scss Done after that you can run this project.

Run command

react-native run-android
react-native run-ios

if you are change the App name then you delete android and ios folder of you project. After then run this command

 react-native eject

this command help to create android and ios folder with clean status

For LESS setup Link:https://github.com/kristerkari/react-native-css-modules/blob/master/docs/setup-less.md

For CSS Setup Link: https://github.com/kristerkari/react-native-css-modules/blob/master/docs/setup-css.md

Thank you

github link
https://github.com/Sudarshan101/ReactNativeSASS

youtube:

https://www.youtube.com/watch?v=6XOpzsHxJoI

About the author

Code solution

info@codesolution.co.in

Discussion

0 comments

Add comment To Login

Add comment