CodeSolution

Please wait...

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

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

@React-native  @ CSS  @ SASS  @ SCSS  @ External   @ Link  @ CodeSolution  

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

Comments 2

Reply