Skip to content
This repository has been archived by the owner on Jun 27, 2020. It is now read-only.

react-native-style-names is a very simple JavaScript utility for conditionally joining react-native styles

License

Notifications You must be signed in to change notification settings

diegoddox/react-native-style-names

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-style-names

NPM

Say goodbye to if and else for styles on your react-native App, react-native-style-names is a very simple JavaScript utility for conditionally joining react-native styles

1. Installation

npm install --save react-native-style-names

2. Usage
import {StyleSheet} from 'react-native';
import stylenames from 'react-native-style-names';

stylenames(
  styles.container,
  styles.background
) // => [styles.container, styles.background]

stylenames({ [styles.container]: true }) // => [styles.container]

stylenames({ [styles.container]: false }) // => []

stylenames({
  [styles.container]: true,
  [styles.background]: true
}) // => [styles.container, styles.background]

stylenames({
  [styles.container]: false,
  [styles.background]: true
}) // => [styles.background]

const widthAnimation = new Animated.value(10);
stylenames(styles.container, {
  height: widthAnimation
}); // => [styles.container, {height: widthAnimation}];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  background: {
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

License

MIT. Copyright (c) 2017 Diego Oliveira.

About

react-native-style-names is a very simple JavaScript utility for conditionally joining react-native styles

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published