Custom colors in React-Native

#reactnative #customization #javascript #colors

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;

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;

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>

& 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