Style - React Native

You use JavaScript to style your application with React Native. All the core components accept a style called a prop. The names and values of styles usually match how CSS works on the web, except that names are written using camel casing, e.g. backgroundColor instead of background color.

A plain old JavaScript object can be the style prop. This is the simplest and we usually use code, for instance. An array of styles can also be passed-the last style in the array has precedence, so you can use this to inherit styles.

As a component becomes more complex, using StyleSheet.create to define multiple styles in one place is often cleaner. Here is a case in point:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
  helloBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  red: {
    color: 'red',
export default class ListsOfStyles extends Component {
  render() {
    return (
        <Text style={}>just red</Text>
        <Text style={styles.helloBlue}>just helloBlue</Text>
        <Text style={[styles.helloBlue,]}>helloBlue, then red</Text>
        <Text style={[, styles.bigBlue]}>red, then helloBlue</Text>

Try pasting this code inside your local IDE or use my console from NawabBlgConsole

One common pattern is to get your component to accept a style prop that is used in turn to style subcomponents. This can be used to make "cascade" styles as they do in CSS.

There are many more ways to tailor the style of the text. Check a complete list of the text component reference.

Now you can make beautiful your message. The next step in becoming a master of style is to learn how to control the size of components.

Never Miss a Post. Subscribe Now!

Contact Us:

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad