Set a dynamic background colors based on themes in react native - node.js

Question

I'm attempting a theme type system, where i can create themes as json files, and then style my app based on it. For the most part all of it works except 2 parts for some reason,
Text Color
Background Colors
So everything else is styled correctly, but the backgroundColor and text colors just wont for some reason. I have checked multiple times over that the theme's values are available, console.log prints them fine too. There's no error message, and other styling from the theme works fine.
Here's where i load in the themes
const themes = {
DEFAULT: require('./../assets/themes/default.json')
};
let theme = {};
function loadDefaultTheme() {
parseTheme(themes.DEFAULT);
}
function parseTheme(json) {
theme.name = json.name;
theme.backgroundColor = json.backgroundColor;
theme.navBackgroundColor = json.navBackgroundColor;
theme.blueColor = json.blueColor;
theme.redColor = json.redColor;
theme.darkBlueColor = json.darkBlueColor;
theme.placeholderColor = json.placeholderColor;
theme.buttonTextColor = json.buttonTextColor;
theme.textColor = json.textColor;
theme.iconColor = json.iconColor;
theme.iconActiveColor = json.iconActiveColor;
theme.navTextColor = json.navTextColor;
theme.navActiveTextColor = json.navActiveTextColor;
}
module.exports = {
themes: themes,
theme: theme,
loadDefaultTheme: loadDefaultTheme,
parseTheme: parseTheme
};
Here's my styling
const welcomeStyles = StyleSheet.create({
background: {
flex: 1,
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT
},
logo: {
width: '50%',
height: '50%',
alignSelf: 'center'
},
text: {
color: ThemeParser.theme.textColor,
alignSelf: 'center',
fontFamily: 'Arial',
},
appNameText: {
fontWeight: 'bold',
fontSize: 30,
marginTop: -60
},
descText: {
fontSize: 22
},
loginView: {
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT * 0.6,
backgroundColor: ThemeParser.theme.backgroundColor,
borderTopColor: '#FE5656', borderTopWidth: 4,
paddingTop: 25
}
});
Finally, my theme:
{
"name": "Default",
"backgroundColor": "#1D1D1D",
"navBackgroundColor": "#343434",
"blueColor": "#05b7ed",
"redColor": "#FF5757",
"darkBlueColor": "#047A9E",
"placeholderColor": "#545454",
"buttonTextColor": "white",
"textColor": "white",
"iconColor": "#047A9E",
"iconActiveColor": "#05B7ED",
"navTextColor": "#C1C1C1",
"navActiveTextColor": "white"
}
I have this bit elsewhere but this works for some reason...
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.redColor}]} />
Edit: Components which the styles are not being applied. They work fine when i statically type a color like 'white' or '#1d1d1d'
<View style={styles.loginStyles.loginView}>
<Input
placeholder='Token'
placeholderTextColor={ThemeParser.theme.placeholderColor}
returnKeyType='done'
inputStyle={styles.loginStyles.token}
leftIcon={<Ionicons name='md-key' size={32} color={ThemeParser.theme.blueColor} />}
onChangeText={text => this.setState({token: text})}
/>
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.blueColor, borderRightColor: 'black', borderRightWidth: 4}]} onPress={() => AniListAuth.getALCode()}>
<Text style={global.globalStyles.buttonText}>Get Code</Text>
</TouchableOpacity>
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.redColor}]} onPress={() => AniListAuth.login(this.state.token)}>
<Text style={global.globalStyles.buttonText}>Sign In</Text>
</TouchableOpacity>
</View>
</View>
The background color for the TouchableOpacity seems to work fine, but not for the View background color or Text color
Edit2: Here's a snack of the project thus far if my code above isn't as clear... http://snack.expo.io/Hk1_2AOtr

Answer 1

Check out the working snack.
This is because you are exporting the theme object before you are parsing it.
Your theme object is empty when you are exporting but you are parsing and adding properties to your object after it is exported which means you are calling themeParser.loadDefaultTheme() later in your code, by the time the empty theme object has already been exported.
It would be better if you use your themes object in your ThemeParser.js file:
const themes = {
DEFAULT: require('./../assets/themes/default.json')
};
module.exports = {
themes: themes,
theme: theme,
loadDefaultTheme: loadDefaultTheme,
parseTheme: parseTheme
};
and use it in GlobalStyles like so:
buttonText: {
color: ThemeParser.themes.DEFAULT.textColor,
fontWeight: 'bold',
fontSize: 20
}
And in WelcomeStyles like so:
text: {
color: ThemeParser.themes.DEFAULT.textColor,
alignSelf: 'center',
fontFamily: 'Arial',
},
loginView: {
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT * 0.6,
backgroundColor: ThemeParser.themes.DEFAULT.backgroundColor,
borderTopColor: '#FE5656', borderTopWidth: 4,
paddingTop: 25
},
You can make the checks according to your needs when you want to load the themes object or theme object.