DEV Community

Cover image for Custom colors in React-Native
SAQ
SAQ

Posted on

3 1

Custom colors in React-Native

Pop-up your app’s brand.

Obviously, you’ll be using multiple colors in your app but the question is how to make color usage effective and optimized.

We’ll be quickly adding colors to our react-native application.
First thing first define hierarchy of your app and know where you want your color file to be, I like to keep in utilities/config folder and name it as Color.js

Now open your newly made file and start defining your colors.

const Colors =
{}
export default Colors;
Enter fullscreen mode Exit fullscreen mode

We made a simple “Colors” object and exported it.

const Colors =
{
AQUA_GREEN: '#1A5276',
RED: '#B03A2E',
ORANGE: '#DC7633',
PURPLE: '#8E44AD',
GRAY: '#566573',
}
export default Colors;
Enter fullscreen mode Exit fullscreen mode

You can put Hex, rgba, rgb whatever sails your boat, I like to work mostly with hex unless need to control opacity.

Now save it and go back to your App.js or wherever:

import Colors from './src/utilites/Color'
after importing Colors you can use as you please..
<Text style={{
backgroundColor: Colors.AQUA_GREEN,
color: Colors.ORANGE
}}>
{HELLO_WORLD}
</Text>
Enter fullscreen mode Exit fullscreen mode

& that’s practically it.
The main advantage of using colors in separate files that it is:

    1- Maintainable. 2- Reusable. 3- Changeable.

Like say, if you want to change the shade of red a tone you won’t have to go in each file changing it, you can easily change it in your file & it’ll be applied to whole app.

** Automated **

Kidding lol, anyway, I have this series of easy customization things for your react-native app. If you want me to cover anything in this series do let me know in comments below.
Until next time!

P.S: Drop a heart, I just like that notification. 👇

Here's a link to github repo:
https://github.com/swairAQ/CustomizationReactNative

Youtube tutorial:
https://youtu.be/NEX_eQR-mEY

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
fredmurphy profile image
FredMurphy

How do I select colors in React Native? كيف تجلب الحبيب

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more