React Native Component Styler

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'
        }
    })