Import color variables to my styles

It's a little late. But a complete example. Create a constant like

const Colors {
  tabIconDefault: '#959292',
  tabIconSelected: tintColor,
  tabBar: '#fefefe',
  errorBackground: 'red',
  errorText: '#fff',
  warningBackground: '#EAEB5E',
  warningText: '#666804',
  noticeBackground: tintColor,
  noticeText: '#fff'
};
module.exports = Colors ;

To use anywhere , import it like

const Colors = '../constants/Colors';

Now use it like

color: Colors.warningBackground

Hope it help.


You can define a separate js file colors.js, that consists of the colors object and export it.

export const COLORS = {
  white: '#fff',
  black: '#000',
  // your colors
}

Now import COLORS from the above file - import {COLORS} from './<Path>/colors.js' in your respective file that uses the defined colors. And use it as shown below.

button: {
  color: COLORS.white,
  backgroundColor: COLORS.black
}

You can define a separate js file colors.js, that consists of the colors object and export it. and it is easy to use anywhere. just import {MyColor} from './/colors.js'

export const MyColor = {
  white: '#fff',
  mybackground: '#222264',
  // your colors
}

Tags:

React Native