How can I get active theme variables in my custom component?

[mehmet-erim]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [x] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [x] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

[bouchezb]

Hi,

I had the same problem and i solved it by exporting theme variables in a wrapper module which provides my base stylesheet. Before that i started the theme ejection process described here https://docs.nativebase.io/Customize.html#theaming-nb-headref

export { default as ThemeVariables } from '../native-base-theme/variables/material'

then i use these variables in my components

import { ThemeVariables } from 'path/to/wrapper/module'

<Ionicons  name={'md-star'} color={ThemeVariables.brandWarning} size={35}  />

It works, but I don't think this is the right way to do it. Documentations are not really clear on this point. If someone knows a more elegant way to do this, I'll be happy to learn.

Regards.

Edit:

Also, take a look at these issues https://github.com/GeekyAnts/NativeBase/issues/2425 https://github.com/GeekyAnts/NativeBase/issues/1543

[hanykumar]

Hi @mehmet-erim, as mentioned in the documentation https://docs.nativebase.io/Customize.html#theaming-nb-headref, you can use material as variable.

import React, { Component } from 'react'; import { Container, Content, Text, StyleProvider } from 'native-base'; import getTheme from './native-base-theme/components'; import material from './native-base-theme/variables/material'; ​export default class ThemeExample extends Component { render() { return ( <StyleProvider style={getTheme(material)}> <Container> <Content> <Button style={{backgroundColor: material.brandWarning}}> <Text>Click</Text> </Button> </Content> </Container> </StyleProvider> ); } }

[hanykumar]

Hi @mehmet-erim, latest version of Native base has been released. The issues should be fixed now. Native Base 2.13.12