Set Background Color of Root View in React Native

This post explains how to set or change background color of RootView in React Native application using CSS stylesheet design. You can change the background of main activity/screen, by specifying backgroundColor attribute of stylesheet design in parent view layout (or RoorView) . This will make App’s starting screen look and feel better.

Change Background Color Of RootView In React Native :

Lets follow the below steps to change background color of RootView in react native application.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";

Step-4 : Implement render method and return child component wrapped by root View component.Specify the background color attribute of stylesheet design in root view with the help of style prop.

render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
          Set background of main activity screenWWW
        </Text>
      </View>
    );
  }

Step-5 : Apply the below style sheet design and that helps to change background color.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#E1BEE7"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to change background color of root or parent view in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";

export default class HomeActivity extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
          Set background of main activity screenWWW
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#E1BEE7"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

Screenshot :

This is all about changing background color of react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.