Tutorial by Examples

Each React Native component can take a style prop. You can pass it a JavaScript object with CSS-style style properties: <Text style={{color:'red'}}>Red text</Text> This can be inefficient as it has to recreate the object each time the component is rendered. Using a stylesheet is pref...

import React, { Component } from 'react'; import { View, Text, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ red: { color: 'red' }, big: { fontSize: 30 } }); class Example extends Component { render() { return ( ...

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: ...

<View style={[(this.props.isTrue) ? styles.bgcolorBlack : styles.bgColorWhite]}> If the value of isTrue is true then it will have black background color otherwise white.