How to use global value in third party component properties?

[vikrantnegi]

I'm using a third party component librabry called react-native-elements it has various prebuild react native components like checkboxes, buttons etc.

I'm using one checkbox component and it has prop checkedColor which is used to basically define color of the checkmark icon when the checkbox is checked.

Now I want to use my global variable $primaryColor to used as a value in the prop like this.

<CheckBox
  checked={checkName}
  onPress={() => this.setState({ checkName: !checkName })}
  component={TouchableWithoutFeedback}
  checkedColor={styles.$primaryColor}
/>

This will not work as global variables are not available like this.

For the above code to work I'll need to define the primary color in the local scope like below.

const styles = EStyleSheet.create({
  $primaryColor: "#f06", 
});

But Now I'm not using global variables and will need to change the variable value two times if I've to change the color value in the future.

Any Idea on how can is reuse global variables for the above case?

Let me know if it's not clear on what I'm trying to ask and thanks for this awesome library.

[vitalets]

I think checkedColor={EStyleSheet.value('$primaryColor')} should do the job.

[vikrantnegi]

Wow, that works and it's so simple. Also, how can we use global variable in the inline styles like in this case below?

<View style={{
  backgroundColor: "$primaryColor"
}}>
...
</View>

[vitalets]

@vikrantnegi the similar way:

<View style={{
  backgroundColor: EStyleSheet.value('$primaryColor')
}}>
...
</View>

[vikrantnegi]

Thanks. Also, I think this should be mentioned somewhere in the documentation. Currently, it is not that much obvious. Thoughts?

[vitalets]

Agree! I would appreciate if you add this as PR =)