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.
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.
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.
Step-5 : Apply the below style sheet design and that helps to change background color.
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.
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.
No comments:
Post a Comment