Set View Background Color Using HEX RGB RGBA HSL Color Format in React Native

Hello friends, This is our second tutorial on our newly launched React Native website. Today’s tutorial is very important for beginners in react native. Because in today’s tutorial we would learn about all different type of color format we can use in react native. As we all know color is the background of every mobile application and without color they’re like Black & White. So there are 5 types of color format react native supports Hex Color code, RGB Color code, RGBA Color code, HSL color code and React own color constants. Today we would create 5 View component and apply all these above color codes on them, So you’ll know how to use all of them. So in this tutorial we would learn about Set View Background Color Using HEX RGB ARGB HSL and Color constants Color Code Format in React Native.

Note:- You can find List of all available color constants here.

Contents in this project Set View Background Color Using HEX RGB ARGB HSL Color Format in React Native :-

1. Open your project’s main App.js file and import View, StyleSheet and Text component.

2. Creating our main Export default App function component.

3. Creating return() block. Now we would make 1 Main Root View component. This is our main component and all the other components will be its children.

4. Creating 5 View component with Color Constants, HEX Color Code, RGB Color Code, RGBA Color Code and HSL color code.

5. Creating Style.

6. Complete Source Code for our React Native Project’s Main App.js File :

Screenshot :-

Set View Background Color Using HEX RGB RGBA HSL Color Format in React Native

Leave a Reply

Your email address will not be published. Required fields are marked *