Updated May 19, 2023
Introduction to React Native Color
Colors are an integral part of any visual thing. Regarding software, applications, and websites, colors are essential in enhancing their User Interface and User Experience. It also supports Color to improve the User Interface of websites or apps. The color properties are just like the way CSS works on the web. Many different color APIs help us to take advantage of the design of the platform and the preferences of a user. In React Native, the PlatformColor component allows you to reference the color system of the platform. This ensures that your app’s colors adapt to the platform’s native color scheme.
Syntax
The Syntax is given below:
1. Red Green Blue (RGB)
It supports rgba() and rgb() in both functional and hexadecimal notation.
'#3cf' (#rgb)
'#b4ff33' (#rrggbb)
'#eba3' (#rgba)
'#ff00ff00' (#rrggbbaa)
'rgb(235, 163, 63)'
'rgba(90, 224, 171, 1.0)'2. Hue Saturation Lightness (HSL)
It supports hsla() and hsl() in functional notation.
'hsl(156, 69%, 62%)'
'hsla(307, 69%, 62%, 1.0)'3. Colorints
In RGB color mode, It supports colors as an int value.
0xff00ff00 (0xrrggbbaa)4. Named Colors
One can use color name strings as values in React Native.
aqua (#00ffff)
chartreuse (#7fff00)
darkcyan (#008b8b)Working of React Native Color
It has several applications. The syntaxes that can be used in React Native to apply colors have been listed above. Hue Saturation Lightness values and RGB notation can be used to apply colors. It can be used to apply colors using RGB mode integer color values and name strings for various colors. React Native is capable of recognizing both rgb() and rgba() notations.
Examples
In this article, we will go through different examples to understand the application.
1. Basic Example of Coloring an Image
In the example provided, the background color of a component is set to “cyan” using the backgroundColor style property, and the image is colored using the tintColor style property set to “yellow”.
App.js
import React from "react";
import { View
, Image } from "react-native";
class App extends React.Component {
render() {
return (
<View style={{ flex: 1, backgroundColor: "cyan" }}>
<Image
style={{
flex: 1,
resizeMode: "contain",
tintColor: "yellow",
padding: 15
}}
source={{ uri: "https://cdn.onlinewebfonts.com/svg/img_541880.png" }}
/>
</View>
);
}
}
export default App;index.js
import { AppRegistry } from "react-native";
import App from "./App";
AppRegistry.registerComponent("App", () => App);
AppRegistry.runApplication("App", {
rootTag: document.getElementById("root")
});Output:
2. With ColorPicker
In the example below, we have used the colorpicker to choose the color to display and get edited in the box border. The files used to implement the code below are:
ColorPicker.js
import React from "react";
import { CustomPicker } from "react-color";
import {
EditableInput
, Hue
, Saturation
} from "react-color/lib/components/common";
export constMyPicker = ({ hex, hsl, hsv, onChange }) => {
const styles = {
hue: {
height: 100,
position: "relative",
marginBottom: 40
},
saturation: {
width: 200,
height: 200,
position: "relative"
},
input: {
height: 35,
border: `1px solid ${hex}`,
paddingLeft: 30
},
swatch: {
width: 60,
height: 40,
background: hex
}
};
return (
<div>
<div style={styles.hue}>
<Hue hsl={hsl} onChange={onChange} />
</div>
<div style={styles.saturation}>
<Saturation hsl={hsl} hsv={hsv} onChange={onChange} />
</div>
<div style={{ display: "flex" }}>
<EditableInput
style={{ input: styles.input }}
value={hex}
onChange={onChange}
/>
<div style={styles.swatch} />
</div>
</div>
);
};
export default CustomPicker(MyPicker);index.js
import React from "react";
import ReactDOM from "react-dom";
import ColorPicker from "./ColorPicker";
function App() {
return (
<div>
<ColorPickercolor="#E829DE" />
</div>
);
}
constrootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
styles.css
.App {
font-family: 'Times New Roman'
, Times
, serif
text-align: center;
}Output:
3. React Native Color Using processColor
In the example below, we have imported the processColor from react native like.
import { processColor } from "react-native";and have used the function hexStringFromCSSColorand used the (“rgba(209,0,255,0.5)”)for coloring the background.
The files used to implement the code below are:
App.js
import React from "react";
import { View
, processColor } from "react-native";
function hexStringFromCSSColor(color) {
constprocessedColor = processColor(color);
constcolorStr = `${processedColor.toString(16)}`;
constwithoutAlpha = colorStr.substring(2, colorStr.length);
const alpha = colorStr.substring(0, 2);
return `#${withoutAlpha}${alpha}`;
}
class App extends React.Component {
render() {
const hex = hexStringFromCSSColor("rgba(209,0,255,0.5)");
return <View style={{ flex: 1, backgroundColor: hex }} />;
}
}
export default App;index.js
import { AppRegistry } from "react-native";
import App from "./App";
AppRegistry.registerComponent("App", () => App);
AppRegistry.runApplication("App", {
rootTag: document.getElementById("root")
});Output:
4. React Native Color Changing with Buttons
The buttons in the example below are used to alter the background colours of the various boxes. The files used to implement the code below are:
App.js
import React
, { useRef } from "react";
import { Button
, StyleSheet
, Text
, View } from "react-native";
import { animated } from "react-spring/native";
constAnimatedView = animated(View);
const styles = StyleSheet.create({
item: {
alignItems: "center",
justifyContent: "center",
width: 200,
height: 100,
margin: 15,
backgroundColor: "pink"
},
text: {
color: "white"
}
});
export default function App() {
const cache = useRef({
toggle1: false,
toggle2: false
});
const ref1 = useRef(null);
const ref2 = useRef(null);
return (
<View>
<View ref={ref1} style={styles.item}>
<Text style={styles.text}>BOX 1</Text>
</View>
<Button
onPress={() => {
cache.current.toggle1 = !cache.current.toggle1;
ref1.current.setNativeProps({
style: { backgroundColor: cache.current.toggle1 ? "lightgreen" : "orange" }
});
}}
title=" Box 1 - Change Color"
/>
<AnimatedView ref={ref2} style={styles.item}>
<Text style={styles.text}>BOX 2</Text>
</AnimatedView>
<Button
onPress={() => {
cache.current.toggle2 = !cache.current.toggle2;
ref2.current.setNativeProps({
style: { backgroundColor: cache.current.toggle2 ? "purple" : "brown" }
});
}}
title="Box 2 - Change Color"
/>
</View>
);
}index.js
import { AppRegistry } from "react-native";
import App from "./App";
AppRegistry.registerComponent("App", () => App);
AppRegistry.runApplication("App", {
rootTag: document.getElementById("root")
});Output:
Recommended Articles
We hope that this EDUCBA information on “React Native Color” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
