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 :
- Start a fresh React Native project. If you don’t know how then read my this tutorial.
- Add StyleSheet and View component in import block.
- Add View tag in render’s return block.
- Create StyleSheet just above the AppRegistry.registerComponent line.
- Inside StyleSheet create one style Container for complete View which would allow us to apply and change background color using class.
- Call CSS class into View.
- 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.
|
1
2
3
|
import {
AppRegistry, StyleSheet, View
} from ‘react-native’;
|
3. Add View tag in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View>
</View>
);
}
|
4. Create StyleSheet just above the AppRegistry.registerComponent line.
|
1
2
3
4
5
|
const styles = StyleSheet.create(
{
});
|
5. Inside StyleSheet create one style Container for complete View which would allow us to apply and change background color using backgroundColor attribute .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
// Set content’s vertical alignment.
justifyContent: ‘center’,
// Set content’s horizontal alignment.
alignItems: ‘center’,
// Set hex color code here.
backgroundColor: ‘#FFEB3B’,
}
});
|
6. Call CSS class into View.
|
1
2
3
|
<View style = {styles.MainContainer}>
</View>
|
7. Complete Source Code for index.android.js file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
import React, { Component } from ‘react’;
import {
AppRegistry, StyleSheet, View
} from ‘react-native’;
export default class Myproject extends Component {
render() {
return (
<View style = {styles.MainContainer}>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
// Set content’s vertical alignment.
justifyContent: ‘center’,
// Set content’s horizontal alignment.
alignItems: ‘center’,
// Set hex color code here.
backgroundColor: ‘#FFEB3B’,
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Application Screenshot :
Also Read :
React Native Call Function Task After Some Time Delay Using setTimeout(function())
React Native Sort Array into Ascending Descending Order iOS Android
React Native Rotate Text View Elements to Specific Degree using Transform
React Native Start Stop Device Vibration on Button Click Android iOS
React Native Add Floating Action Button in Both Android iOS App
