How to use dynamic style class in React Native - react-native

Question

I am getting the style class from Rest Web Service.
try {
var securityTokenInBean = {
securityToken: authToken
};
fetchPost(
"monitorprobe/getAllMonitoringProbe",
"POST",
securityTokenInBean,
json => {
this.setState({
isLoading: false,
sumUp: json.sumUp,
styleClass : json.styleClass
});
this.state.isLoading = false;
},
err => {
console.log("needToCallBack: api call failed." + err);
//error(this.props.navigation,'error in needToCallBack ws call');
}
);
} catch (error) {
console.log("needToCallBack: api call failed." + error);
}
I need to use the style class in my View component. The value of styleClass is either criticalProbe,issueProbe,warningProbe,expiredProbe or okProbe
I have defined the styles for the all the classed defined in my StyleSheet.
const styles = StyleSheet.create({
criticalProbe : {
backgroundColor: 'black',
},
issueProbe : {
backgroundColor: 'red',
},
warningProbe : {
backgroundColor: 'orange',
},
expiredProbe : {
backgroundColor: 'yellow',
},
okProbe : {
backgroundColor: 'green',
}
});
How do I use the styleClass in my View Component which comes from rest service as the style class is Dynamic?
I tried with
const criticalProbeStyleClass = styleClass.criticalProbeStyleClass;
console.log(criticalProbeStyleClass);//comes as okProbe
<View style={[styles.box, styles.criticalProbeStyleClass ]}>
<Text style={styles.title}>Critical</Text>
<Text style={styles.criticalProbeStyleClass}>{sumUp.totalCriticalProbe}</Text>
</View>
But it does not work.
To verify I have tried with by hard coding style class and looks fine
<View style={[styles.box, styles.okProbe]}>
<Text style={styles.title}>Critical</Text>
<Text style={styles.criticalProbeStyleClass}>{sumUp.totalCriticalProbe}</Text>
</View>

Answer 1

If your request returning just a name for the style property;
Create a file including all your styling that you want (globalStyles.js for example) and export it. In the component you want to use import it. Then you can use the file shown like below.
const styles = StyleSheet.create({
criticalProbe : {
backgroundColor: 'black',
},
issueProbe : {
backgroundColor: 'red',
},
warningProbe : {
backgroundColor: 'orange',
},
expiredProbe : {
backgroundColor: 'yellow',
},
okProbe : {
backgroundColor: 'green',
}
});
export default styleClasses;
<View style={[styles.box, styleClasses[styleClass.criticalProbeStyleClass] ]}>
<Text style={styles.title}>Critical</Text>
<Text style={styles.criticalProbeStyleClass}>{sumUp.totalCriticalProbe}</Text>
</View>