I have the following component defined:
import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
export default class Button extends Component {
render() {
return (
<TouchableOpacity onPress={() => this.props.onPress}>
<View style={styles.container}>
<Text
style={{
color: this.props.foregroundColor,
}}
>
{this.props.title}
</Text>
</View>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
container: {
paddingTop: 15,
paddingBottom: 15,
paddingRight: 20,
paddingLeft: 20
},
});
I'd like to pass a prop backgroundColor
to this component. But how do I extend the current styles.container
to dynamically set backgroundColor
? I've tried
<View style={
...styles.container,
backgroundColor: this.props.backgroundColor
}>...
But I get a SyntaxError
when I do that...