use and access style variable in react native - react-native

Question

I just started with react-native and i'm fiddling with the styles. I want to use something i always do when working with Sass and that's creating a global configuration file with variables i can use throughout the Sass files. In Sass i would do the following:
style.scss
#import 'config/_config';
#import 'base/_base';
Then in _config.scss i would put something like $fontColor: 'red'; and then in _base.scss something like this:
p{
color: $fontColor
}
When i compile the sass files to a single css i get the expected
p{
color: 'red';
}
Now i'm trying the same in react-native, but i can't get it to work. The closest i get with a 'result' (meaning: no error, but no result either) is this:
My file App.js contains the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>My first app</Text>
</View>
);
}
}
const styles = require('./style/Style.js');
style/Style.js looks like this
import React from 'react';
import { StyleSheet } from 'react-native';
import s from './config/Variables.js';
module.exports = StyleSheet.create({
container: {
flex: 1,
backgroundColor: s.backColor,
alignItems: 'center',
justifyContent: 'center',
},
});
and style/config/Variables.js like
import { StyleSheet } from 'react-native';
const backColor = '#4F5B66';
I've also tried const styles = { backColor: '#4F5B66'};, but that didn't work either.
How can i make this work?

Answer 1

I solved it by defining the variables without const so Variables.js becomes
import { StyleSheet } from 'react-native';
backColor = '#4F5B66';