❤
npm
Sign UpSign In

react-native-component-styler

1.0.8 • Public • Published

React Native Component Styler

NPM

Lib to create UI components in React Native

Based on React Native Styler. Don't forget to include import { StylerProvider } from 'react-native-styler'; into your project!

createStyledComponent method

The createStyledComponent method expects three parameters:

  • variants (collection of strings)
  • style definition (object)
  • component function

Describe the component

    import { createStyledComponent } from 'react-native-component-styler';
    import MyComponentView from './View';
    import style from './style.json';
 
    const VARIANTS = [
        'DEFAULT',
        'PRIMARY',
        'FOCUS'
    ]
 
    export default createStyledComponent(
        VARIANTS,
        style,
        MyComponentView
    );

Style definition (can be json)

The style definition needs three levels:

  • Element name
    • Variant
      • Style property

All functionality of React Native Styler can be used inside this definition.

    {
        "Container": {
            "DEFAULT": {
                "backgroundColor": "theme:sheet"
            }
        },
        "TextInput": {
            "DEFAULT": {
                "width": "100%"
            },
            "FOCUS": {
                "borderBottomColor": "theme:accent"
            }
        }
    }

Component function (stateless component)

    function MyComponentView(props, s) {
        return (
            <View
                style={s('Container')}
            >
                <TextInput
                    style={s('TextInput')}
                />
            </View>
        );
    }
 
    export default MyComponentView;

addGlobalContainerVariants method

Add variants to all elements named Container. One use case can be spacing

    addGlobalContainerVariants({
        SPACE: {
            marginBottom: '4h4s'
        }
    })

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-component-styler

Repository

github.com/dejakob/react-native-component-styler

Homepage

github.com/dejakob/react-native-component-styler#readme

Weekly Downloads

6

Version

1.0.8

License

MIT

Unpacked Size

6.58 kB

Total Files

4

Last publish

Collaborators

  • dejakob
Try on RunKit
Report malware