Sometimes, we want to import color variables into styles with React Native.

In this article, we’ll look at how to import color variables into styles with React Native.

How to import color variables into styles with React Native?

To import color variables into styles with React Native, we can use export to export the color variables.

For instance, we write:

colors.js

export const COLORS = {
  white: '#fff',
  green: 'green',
};

to create the color.js module.

Then we write:

App.js

import * as React from 'react';
import { View, TouchableHighlight, Text } from 'react-native';
import { COLORS } from './colors.js';
export default function App() {
  return (
    <View>
      <Text style={{ color: COLORS.green }}>hello</Text>
    </View>
  );
}

to import the COLORS variable with

import { COLORS } from './colors.js';

And we use it to set the color style of the Text component.

As a result, we see that the text is green.

Conclusion

To import color variables into styles with React Native, we can use export to export the color variables.