Styling

Styles are defined within a JSON object with similar styling attribute names like in CSS. Such an object can either be put inline within the style prop of a component or it are often passed to the function StyleSheet.create(StyleObject) and be stored during a variable for shorter inline access by employing a selector name for it almost like a category in CSS.

Conditional Styling

<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

Styling using inline styles

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

Styling using a stylesheet

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 (
<View>
<Text style={styles.red}>Red</Text>
<Text style={styles.big}>Big</Text>
</View>
);
}
}

StyleSheet.create() returns an object where the values are numbers. React Native knows to convert these numeric IDs into the correct style object.

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: Styling In React Native

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password