rn-stylenames

Stylenames

A simple JavaScript utility for conditionally joining react native styles together.

Install with npm or Yarn:

npm:

npm install rn-stylenames --save

Yarn:

yarn add rn-stylenames

Usage

The stylenames function takes any number of arguments which can be a number, plain object or array. The argument 51 is short for { 51: true }. If the value associated with a given key is falsy, that key won't be included in the output. If the given key is not style object id, it will be passed as common key:value pair. If the given value is array, it will be recursively walked through.

stylenames(51, 52); // => [51, 52]
stylenames(51, { 52: true }); // => [51, 52]
stylenames(51, { 52: false, fontSize: 18 }); // => [51, {fontSize: 18}]
stylenames(51, [{ 52: false, fontSize: 18 }]); // => [51, {fontSize: 18}]

Usage with React Native

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import stylenames from 'react-native-stylenames';
 
const styles = StyleSheet.create({
    text: {
        fontSize: 14,
        lineHeight: 20,
    },
 
    activeText: {
        color: 'blue'
    }
});
 
const Screen = (props) => {
    const textStyles = stylenames(styles.text, {[styles.activeText]: props.isActive});
 
    return (
        <View>
            <Text style={textStyles}>Hello World!</Text>
        </View>
    );
}
 

License

MIT. Copyright (c) 2018 Anton Bebnev.