How to Import Color Variables to a File in React Native

Last Updated on July 1, 2021.

It’s always good to have common color variables throughout your react native project. This helps you to manage your colors and usage easily. Even though this seems pretty obvious beginners may not know how to add a color file in react native.

For example, create a file named Colors.js in your project. Then add the following code.

export const Colors = {
  primary: '#fff',
  secondary: '#000',
}

As you see, it’s just a JSON object with the color values. You can import this and use throughout the project. See the following code snippet.

import {Colors} from './yourPath/colors.js';

button: {
 backgroundColor: Colors.primary,
 borderColor: Colors.secondary,
}

That’s how you add a common color file and use it in react native.

Leave a Reply

%d bloggers like this: