Needless Patchouli Manufacture

    babel-plugin-react-native-css-class

    0.1.1 • Public • Published

    babel-plugin-react-native-css-class

    Build Status npm version

    Use class tag in React Native Component

    Installation

    npm i --save babel-plugin-react-native-css-class

    Usage

    Create file .babelrc in your react native project folder

    {
      "presets": [ "react-native" ],
      "plugins": [ "react-native-css-class" ]
    }

    In RN component, you can use class tag

    'use strict';
     
    import React, { Component, StyleSheet, Text, View } from 'react-native';
     
    const HelloWorld = React.createClass({
      render() {
        return (
          <View class="container">
            <Text class="hello" style={{ color: '#F00' }}>
              Hello World!
            </Text>
          </View>
        );
      }
    });
     
    var styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      hello: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: 'center',
      },
    });
     
    module.exports = HelloWorld;

    Custom options

    Update file .babelrc

    {
      "presets": [ "react-native" ],
      "plugins": [
        ["react-native-css-class", {
            "pragma": "varStyles"
        }]
      ]
    }

    Note: default pragma is styles

    Install

    npm i babel-plugin-react-native-css-class

    DownloadsWeekly Downloads

    6

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • apentle