How do you style a component in react native?

• With React Native, you style your application using JavaScript.
• All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color.
• The style prop can be a plain old JavaScript object. That’s the simplest and what we usually use for example code.
• You can also pass an array of styles – the last style in the array has precedence, so you can use this to inherit styles.

As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Here’s an example:

const styles = StyleSheet.create({
	container:  {
		borderRadius:  4,
		borderWidth:  0.5,
		borderColor:  '#d6d7da',
	}, 
	title:  {
		fontSize:  19,
		fontWeight:  'bold',
	}, 
	activeTitle:  {
		color:  'red',
	},
});

<View style={styles.container}>
	<Text style={[styles.title, this.props.isActive && styles.activeTitle]} /> 
</View>