react-native Styling Adding multiple styles
Example
You can pass an array to the style prop to apply multiple styles. When there is a conflict, the last one in the list takes precedence.
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
red: {
color: 'red'
},
greenUnderline: {
color: 'green',
textDecoration: 'underline'
},
big: {
fontSize: 30
}
});
class Example extends Component {
render() {
return (
<View>
<Text style={[styles.red, styles.big]}>Big red</Text>
<Text style={[styles.red, styles.greenUnderline]}>Green underline</Text>
<Text style={[styles.greenUnderline, styles.red]}>Red underline</Text>
<Text style={[styles.greenUnderline, styles.red, styles.big]}>Big red underline</Text>
<Text style={[styles.big, {color:'yellow'}]}>Big yellow</Text>
</View>
);
}
}
