Nativebase: Using theme variables from getTheme and connectStyle

[ekimlinger]

Question: Is it possble to have a component use the variables that are injected into:

<StyleProvider style={getTheme(material)}>
    <App>
</StyleProvider>

As far as I can tell, connectStyle only allows you to add variables to your theme, it does not allow access to existing ones.

For example if my app looks like so:

<StyleProvider style={getTheme(material)}>
    <App>
</StyleProvider>

I want to be able to pull out the brandPrimary variable from our material injected theme like so:

<App>
    <Text style={this.props.style.brandPrimary>
         Some Text
    </Text>
</App>

export const connectStyle('NativeBase.Theme', {})(App);

Anyone know if this is possible?

[dawnmist]

I am starting to suspect that the only way to do it is to stash a copy that you can access somewhere (for example in a Redux store) and then pull that copy out separately to anything in native-base.

I'd really rather that there was a way to access and pass down the variables for reuse when using connectStyle. It's not really a problem if you only use a single theme (just import the variable file wherever you need it), but if you want to support switching themes I think you'll need to save the selected theme's variables somewhere for reuse.

[ekimlinger]

So since posting this, our team has found a workaround for the current limitations, however it's not the best imo (this issue should not be closed).

In our project we created an additional component that is being exported from our theme's component folder like so:

export default variables => {
    const theme = {
        variables,
        Branding: {
            brandColor: variables.brandColor,
            accentColor: variables.accentColor,
            actionColor: variables.actionColor,

            '.brandColor': {
                color: variables.brandColor,
            },
            '.accentColor': {
                color: variables.accentColor,
            },
            '.actionColor': {
                color: variables.actionColor,
            },
        },
     ...More compnents

Now this allows us to use the Branding named component in connectStyle where the connected component will be able to use these imported colors:
connectStyle('Branding')(ComponentName)
like so:

render() {
    const color = this.props.style.brandColor;
...

We can also use tags when calling our connected component (provided you have the tags specified in the above code):
render() { return <ComponentName brandColor />

[benzman81]

Is there a solution to this? We followed the guide for a custom component, but now we want those styles to be overwritten by a variables.js file. Any hint or is this just not possible?

[cristianocca]

Also struggling with this. Connect should make the variables variable available. It would be a good idea to grab some ideas from react material-ui (web) library, they made an outstanding way to customize your theme while providing features to easily switch them.