How to Import Color Variables to a File in React Native

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 an object with color values. You can import this and use it 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.