Color representations
Some methods of representation for the Color Reference Component are mentioned below.
Red Green Blue
React Native supports rgb() and rgba() in both hexadecimal and functional notation:
'rgb(255, 0, 255)'
'rgba(255, 0, 255, 1.0)'
'#f0f' (#rgb)
'#ff00ff' (#rrggbb)
'#f0ff' (#rgba)
'#ff00ff00' (#rrggbbaa)
Hue Saturation Lightness
React Native supports hsl() and hsla() in functional notation:
'hsla(360, 100%, 100%, 1.0)'
'hsl(360, 100%, 100%)'
Color ints
React Native also supports colors as an int values (in RGB color mode):
0xff00ff00 (0xrrggbbaa).
Note that while this may appear to be comparable to the Android Color ints representation, values on Android are saved in SRGB color mode (0xaarrggbb).
Color keywords
Named colors implementation follows the CSS3/SVG specification:
- khaki (`#f0e68c`)
- lavender (`#e6e6fa`)
- lavenderblush (`#fff0f5`)
- lawngreen (`#7cfc00`)
- lemonchiffon (`#fffacd`)
- lightblue (`#add8e6`)
- lightcoral (`#f08080`)
- lightcyan (`#e0ffff`)
- lightgoldenrodyellow (`#fafad2`)
- lightgray (`#d3d3d3`)
- lightgreen (`#90ee90`)
- lightgrey (`#d3d3d3`)
- lightpink (`#ffb6c1`)
- lightsalmon (`#ffa07a`)
- lightseagreen (`#20b2aa`)
- lightskyblue (`#87cefa`)
- lightslategrey (`#778899`)
- lightsteelblue (`#b0c4de`)
- lightyellow (`#ffffe0`)
- lime (`#00ff00`)
- limegreen (`#32cd32`)
- linen (`#faf0e6`)
- magenta (`#ff00ff`)
- maroon (`#800000`)
- mediumaquamarine (`#66cdaa`)
- mediumblue (`#0000cd`)
- mediumorchid (`#ba55d3`)
- mediumpurple (`#9370db`)
- mediumseagreen (`#3cb371`)
- mediumslateblue (`#7b68ee`)
- mediumspringgreen (`#00fa9a`)
- mediumturquoise (`#48d1cc`)
- mediumvioletred (`#c71585`)
- midnightblue (`#191970`)
- mintcream (`#f5fffa`)
- mistyrose (`#ffe4e1`)
- moccasin (`#ffe4b5`)
- navajowhite (`#ffdead`)
- navy (`#000080`)
- oldlace (`#fdf5e6`)
- olive (`#808000`)
- olivedrab (`#6b8e23`)
- orange (`#ffa500`)
- orangered (`#ff4500`)
- orchid (`#da70d6`)
- palegoldenrod (`#eee8aa`)
- palegreen (`#98fb98`)
- paleturquoise (`#afeeee`)
- palevioletred (`#db7093`)
- papayawhip (`#ffefd5`)
- peachpuff (`#ffdab9`)
- peru (`#cd853f`)
- pink (`#ffc0cb`)
- plum (`#dda0dd`)
- powderblue (`#b0e0e6`)
- purple (`#800080`)
- rebeccapurple (`#663399`)
- red (`#ff0000`)
- rosybrown (`#bc8f8f`)
- royalblue (`#4169e1`)
- saddlebrown (`#8b4513`)
- salmon (`#fa8072`)
- sandybrown (`#f4a460`)
- seagreen (`#2e8b57`)
- seashell (`#fff5ee`)
- sienna (`#a0522d`)
- silver (`#c0c0c0`)
- skyblue (`#87ceeb`)
- slateblue (`#6a5acd`)
- slategray (`#708090`)
- snow (`#fffafa`)
- springgreen (`#00ff7f`)
- steelblue (`#4682b4`)
- tan (`#d2b48c`)
- teal (`#008080`)
- thistle (`#d8bfd8`)
- tomato (`#ff6347`)
- turquoise (`#40e0d0`)
- violet (`#ee82ee`)
- wheat (`#f5deb3`)
- white (`#ffffff`)
- whitesmoke (`#f5f5f5`)
- yellow (`#ffff00`)
- yellowgreen (`#9acd32`)
- aliceblue (`#f0f8ff`)
- antiquewhite (`#faebd7`)
- aqua (`#00ffff`)
- aquamarine (`#7fffd4`)
- azure (`#f0ffff`)
- beige (`#f5f5dc`)
- bisque (`#ffe4c4`)
- black (`#000000`)
- blanchedalmond (`#ffebcd`)
- blue (`#0000ff`)
- blueviolet (`#8a2be2`)
- brown (`#a52a2a`)
- burlywood (`#deb887`)
- cadetblue (`#5f9ea0`)
- chartreuse (`#7fff00`)
- chocolate (`#d2691e`)
- coral (`#ff7f50`)
- cornflowerblue (`#6495ed`)
- cornsilk (`#fff8dc`)
- crimson (`#dc143c`)
- cyan (`#00ffff`)
- darkblue (`#00008b`)
- darkcyan (`#008b8b`)
- darkgoldenrod (`#b8860b`)
- darkgray (`#a9a9a9`)
- darkgreen (`#006400`)
- darkgrey (`#a9a9a9`)
- darkkhaki (`#bdb76b`)
- darkmagenta (`#8b008b`)
- darkolivegreen (`#556b2f`)
- darkorange (`#ff8c00`)
- darkorchid (`#9932cc`)
- darkred (`#8b0000`)
- darksalmon (`#e9967a`)
- darkseagreen (`#8fbc8f`)
- darkslateblue (`#483d8b`)
- darkslategrey (`#2f4f4f`)
- darkturquoise (`#00ced1`)
- darkviolet (`#9400d3`)
- deeppink (`#ff1493`)
- deepskyblue (`#00bfff`)
- dimgray (`#696969`)
- dimgrey (`#696969`)
- dodgerblue (`#1e90ff`)
- firebrick (`#b22222`)
- floralwhite (`#fffaf0`)
- forestgreen (`#228b22`)
- fuchsia (`#ff00ff`)
- gainsboro (`#dcdcdc`)
- ghostwhite (`#f8f8ff`)
- gold (`#ffd700`)
- goldenrod (`#daa520`)
- gray (`#808080`)
- green (`#008000`)
- greenyellow (`#adff2f`)
- grey (`#808080`)
- honeydew (`#f0fff0`)
- hotpink (`#ff69b4`)
- indianred (`#cd5c5c`)
- indigo (`#4b0082`)
- ivory (`#fffff0`)
Also see, React Native Reanimated
Also Read, React Native Paper, React devtools
Frequently Asked Questions
Is React Native the same as Reactjs?
While Reactjs is essentially a JavaScript library and React Native is the whole framework, the former is at the heart of the latter and the two operate well together. If Reactjs is best for generating high-functioning apps with complicated computations, then React Native is best for giving your mobile apps a native feel.
Is it MVVM or MV in React?
React is basically the VVM of MVVM. You are in charge of the model and it is usually determined by the type of state management employed.
Is it really worth investing in React Native in 2022?
React Native is one of the greatest choice for cross-platform app development in 2022, thanks to its quite intuitive architecture, live time reloading, and quick enough development timeframes, as well as good performance again and again and code reusability across platforms (iOS, Android, and web).
Conclusion
In this article, we learned about Colors reference in React Native and its working implementation by showcasing a working example.
We hope that this article has aided you in your quest to become a better Dart player. Check out our articles on environment setup and Competitive Programming for more information. Please upvote this article to assist other ninjas in their development.
Happy Coding!
84+ registered