Set Background Color of Root View in React Native App Activity

How to change complete background color of parent view in react native using css style and apply any color as full layout background.

React Native supports root view structure just like HTML and jQuery. You need to create parent view which holds the other views, widgets and components inside it. So by change the root view color we can change the whole application activity screen background color. So let’s get started 🙂

Contents in this project Set Background Color of Root View :

  1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
  2. Add StyleSheet and View component in import block.
  3. Add View tag in render’s return block.
  4. Create StyleSheet just above the AppRegistry.registerComponent line.
  5. Inside StyleSheet create one style Container for complete View which would allow us to apply and change background color using class.
  6. Call CSS class into View.
  7. Complete Source Code.

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add Image, StyleSheet and View component in import block.

3. Add View tag in render’s return block.

4. Create StyleSheet just above the AppRegistry.registerComponent line.

5. Inside StyleSheet create one style Container for complete View which would allow us to apply and change background color using backgroundColor attribute .

6. Call CSS class into View.

7. Complete Source Code for index.android.js file :

Application Screenshot :

Background Color

Leave a Reply

Your email address will not be published.