React Native convert RGB Color Code to Hexadecimal Code

This tutorial explains how to convert RGB color code to Hexadecimal code in react native application. Here we are going to provide you complete guide step by step that helps to generate hexadecimal code from RGB color code.

Convert RGB Color Code to Hexadecimal Code In React Native :

Lets follow the below steps that helps to convert RGB color code to Hexadecimal code 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 App.js File in your favorite 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 { AppRegistry, View, Text, StyleSheet, Platform } from 'react-native';

Step 4: Lets create constructor block inside your App component.

constructor() {
    super();

    this.red = 80;
    this.green = 48;
    this.blue = 23;
  }

Step 5: Lets create convertSingleCode function inside your App component. This convertSingleCode  function will be executed for each single color code ( red / green / blue ) and gives us equivalent hex code. Using toString(16) function we can convert decimal number to hexadecimal  number.

convertSingleCode = (colorCode) => {
    let hexCode = colorCode.toString(16);

    return (hexCode.length == 1) ? ('0' + hexCode) : hexCode;
  }

Step 6: Lets create rgbToHex function inside your App component.  This rgbToHex function will be checking a condition  isNaN( red ) || isNaN( green ) || isNaN( blue ) to check that supplied rgb color code contains numbers or not. If user don’t provide number as rgb color code parameters then an alert will be shown with a message Incorrect RGB Color Code.

rgbToHex = (red, green, blue) => {
    if (isNaN(red) || isNaN(green) || isNaN(blue)) {
      alert('Incorrect RGB Color Code!!!');
      return;
    }
    else {
      return '#' + this.convertSingleCode(red) + this.convertSingleCode(green) + this.convertSingleCode(blue);
    }
  }

Step 7: Implement render method inside the App class and wrapped the below layout design inside the root View component.

render() {

    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>RGB: rgb({this.red}, {this.green}, {this.blue})</Text>
        <Text style={styles.setHeaderText}>HEX: {this.rgbToHex(this.red, this.green, this.blue)}</Text>
      </View>
    );

  }

Step 8 : Apply the below style sheet design.

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      paddingTop: (Platform.OS === 'ios') ? 20 : 0,
      justifyContent: 'center',
      alignItems: 'center',
    },
    headerText: {
      fontSize: 30,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
    setHeaderText: {
      fontSize: 30,
      textAlign: "center",
      margin: 10,
      color: 'blue',
      fontWeight: "bold"
    },

  });

Complete Source Code for App.js 

Lets see the complete source code that helps to convert RGB color code to Hexadecimal code in react native application.

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet, Platform } from 'react-native';

export default class App extends Component {
  
  constructor() {
    super();

    this.red = 80;
    this.green = 48;
    this.blue = 23;
  }

  convertSingleCode = (colorCode) => {
    let hexCode = colorCode.toString(16);

    return (hexCode.length == 1) ? ('0' + hexCode) : hexCode;
  }

  rgbToHex = (red, green, blue) => {
    if (isNaN(red) || isNaN(green) || isNaN(blue)) {
      alert('Incorrect RGB Color Code!!!');
      return;
    }
    else {
      return '#' + this.convertSingleCode(red) + this.convertSingleCode(green) + this.convertSingleCode(blue);
    }
  }

  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>RGB: rgb({this.red}, {this.green}, {this.blue})</Text>
        <Text style={styles.setHeaderText}>HEX: {this.rgbToHex(this.red, this.green, this.blue)}</Text>
      </View>
    );

  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      paddingTop: (Platform.OS === 'ios') ? 20 : 0,
      justifyContent: 'center',
      alignItems: 'center',
    },
    headerText: {
      fontSize: 30,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
    setHeaderText: {
      fontSize: 30,
      textAlign: "center",
      margin: 10,
      color: 'blue',
      fontWeight: "bold"
    },

  });

Screenshot : 

This is all about React Native convert RGB Color Code to Hexadecimal Code. 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.