Works only with react-native version < 0.56
A simple JavaScript utility for conditionally joining react native styles together.
npm:
npm install rn-stylenames --save
Yarn:
yarn add rn-stylenames
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}]
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>
);
}
MIT. Copyright (c) 2018 Anton Bebnev.