What I want to accomplish is this: I have created button component based on TouchableOpacity. In my app I have 3 types of differently looking buttons, they all share some styles and have something specific as well. Below is how my Button.js looks like:

```
import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';

class Button extends Component {
  render() {
    const { children, onPress, style } = this.props;
    const { buttonStyle, textStyle } = styles;

    return (
      <TouchableOpacity onPress={onPress} style={[buttonStyle]}>
        <Text style={[textStyle]}>
          {children}
        </Text>
      </TouchableOpacity>
    );
  }
}

//Commonly shared button styles
const styles = {
  textStyle: {
    alignSelf: 'center',
    fontSize: 17,
    paddingTop: 15,
    paddingBottom: 15
  },
  buttonStyle: {
    alignSelf: 'stretch',
    marginLeft: 15,
    marginRight: 15
  }
};

//Below are specific appearance styles
const black = {
  container: {
    backgroundColor: '#000'
  },
  text: {
    color: '#FFF'
  }
};

const white = {
  container: {
    backgroundColor: '#FFF'
  },
  text: {
    color: '#000'
  }
};

```

It would be great if I could use this button something like this:

```
<Button onPress={} style='black'>PLAY</Button>
<Button onPress={} style='white'>CANCEL</Button>

```

I.e. default buttonStyle and textStyle are applied from styles object. And I just want to pass a single word ('black', 'white') to reference additional style objects described in Button component.

I know I can create a helper method with switch, but I think there is a shorter way to do this. Is there?

Thanks a lot!