In a React Native stylesheet how can I group multiple styles together

Question

I would like to combine shared styles together in React Native, if possible, like the way it's possible in a CSS stylesheet..

.one, .two {
    padding: 5px;
    background-color: green;
}

Currently, my React Native stylesheet looks like..

module.exports = {
    "one": {
        justifyContent: 'flex-start',
        padding: 5,
        backgroundColor: 'green'
    },
    "two": {
        justifyContent: 'flex-end',
        padding: 5,
        backgroundColor: 'green'
    }
}

I could of course add multiple styles to an element..

module.exports = {
    "oneAndTwo": {
        padding: 5,
        backgroundColor: 'green'
    },
    "one": {
        justifyContent: 'flex-start'
    },
    "two": {
        justifyContent: 'flex-end'
    }
}

<View style={[styles.oneAndTwo, styles.one]}>
    <Text style={styles.oneAndTwoText}>One</Text>
</View>
<View style={[styles.oneAndTwo, styles.two]}>
    <Text style={styles.oneAndTwoText}>Two</Text>
</View>

..but I'm looking to see if its doable the CSS way.

edit - thanks for the style management suggestions so far. I'll try them out over the weekend as I get more into React Native and reply back once I've had a chance to understand and apply them.

It doesn't look like there is any simple method to style multiple style 'classes' like in css so I'll try the other ideas out.

Answer 1

The simplest way I found to this this is like so. First I have a file which holds my variables

/* styles/variables.js */
const styleVariables = {

  // Fonts
  baseFontSize: 16,
  largeFontSize: 24,

  // Icons
  smallIconSize: 24,
  mediumIconSize: 36,

  // Colors
  mainColor: '#e85e45',
  secondaryColor: '#a0c5d8',
  offWhite: '#f4f4f4',
  darkColor: '#404040',

  // Dimensions
  headerHeight: 70,
  shadowSize: 6
};
export default styleVariables;

And I reference my variables in other styling files where related information is grouped:

/* styles/presentation.js */
import variables from './variables';

export const shadow = {
  shadowColor: variables.darkColor,
  shadowRadius: variables.shadowSize,
  shadowOpacity: 0.35,
  shadowOffset: {width: 0, height: 0}
};

export const centered = {
  alignItems: 'center'
  justifyContent: 'center'
}

export const button = {
    width: variables.buttonSize,
    height: variables.buttonSize,
    borderRadius: variables.buttonSize / 2,
}

And in then in my components I can combine those styles:

import variables from './../styles/variables';
import {centered, shadow, button} from './../styles/presentation';

class RoundButton extends React.PureComponent {

  render() {
    return (
        <View style={styles.button}>
          {this.props.children}          
        </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    ...button,
    ...centered,
    ...shadow
  }

Answer 2

You can try like this

    var {
        StyleSheet
      } = React;

    var styles = StyleSheet.create({
          oneAndTwo: {
        padding: 5,
        backgroundColor: 'green'
    },
    one: {
        justifyContent: 'flex-start'
    },
       oneAndTwoText:{
        backgroundColor: 'green'
      }
      });

    <View style={[styles.oneAndTwo, styles.one]}>
        <Text style={styles.formButtonOutline}>One</Text>
    </View>