Hello friends, The View component in react native does support background color using backgroundColor prop. We can easily apply any color as per our requirement using backgroundColor on View component. One more thing friends we can also set any type color format like Hex Color code, RGB color code, RGBA color code and HSL color code. So in this tutorial we would learn about Set Change Background Color of View Component in React Native Android iOS Example.
Contents in this project Set Change Background Color of View Component in React Native :-
Complete Source Code for App.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 43 44 45 46 47 48 49 50 |
import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default function App() { return ( <View style={styleSheet.MainContainer}> <Text style={{ fontSize: 30, textAlign: 'center', fontWeight:'bold', paddingBottom: 12 }}> Set Background Color of View </Text> <View style={{ backgroundColor: '#33691E', width: 250, height: 100 }}> <Text style={styleSheet.text}> View with Background Color </Text> </View> <View style={{ marginTop: 12, backgroundColor: '#00B8D4', width: 250, height: 100 }} > <Text style={styleSheet.text}> View with Background Color </Text> </View> <View style={{ marginTop: 12, backgroundColor: 'red', width: 250, height: 100 }} > <Text style={styleSheet.text}> View with Background Color </Text> </View> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { fontSize: 28, color: 'white', textAlign: 'center', } }); |
Screenshot :-
