How can I export these 2 variables together on react-native - react-native

Question

I want to make 2 variables for the main colors which can be used on the whole app. Here is the code:
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
const primary = '#27bcb5';
const secondary = '#ffffff;
How can I export these 2 variables together for using on the app components?
Issue with the solution is :
import {DefaultStyle} from './variables';
const screenHeight = Dimensions.get("window").height;
const styles = {
wrapper: {},
slide1: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: primary,
it says can't find variable primary

Answer 1

You can export them with:
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
const primary = '#27bcb5';
const secondary = '#ffffff';
export const DefaultStyle = {
primary,
secondary,
}
So you can use them as:
import { DefaultStyle } from './default-variables';
console.log(DefaultStyle.primary);
console.log(DefaultStyle.secondary);

Answer 2

You could do a named export. E.g. :
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
const primary = '#27bcb5';
const secondary = '#ffffff';
export { primary, secondary };
After that, you can import your styles via:
import { primary, secondary } from 'YOUR_FILE_PATH'

Answer 3

// Declarations of colors variables
const Maincolor ="#333640"
const Backgroundcolor = "#FFFFFF"
const Gridcolor = "#A7A9AB"
const colors = // Made to be bind in one because only one export is possiable
{
Maincolor,
Backgroundcolor,
Gridcolor,
}
export default colors; // exporting as default
// And in your main code where you have to include
import colors from 'path_of_the_file'
// then in styles use
style ={{backgroundColor:color.Maincolor}} // example how to use

Answer 4

I like to do something better, define a global file where you can save like Moment() time, Device Measures, etc.
global.js
const global = {
PRIMARY: '#27bcb5',
SECONDARY: '#ffffff,
DEVICE_MEASURES:{
WIDTH: Dimensions.get("window").width,
HEIGHT: Dimensions.get("window").height;
},
...
}
export default global
And then in your code:
import GLOBAL from '(directory)/global'
<View style={{ width: GLOBAL.DEVICE_MEASURES.WIDTH }}>
<Text style={{ color: GLOBAL.PRIMARY }}>
sup
</Text>
</View>
It's just better to have a global file where you can store all your app's configurations.