diff --git a/index.js b/index.js index 378a1d3..28e76fc 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,7 @@ /* @flow */ export { default as ThemeProvider } from './src/core/ThemeProvider'; +export { default as withTheme } from './src/core/withTheme'; export * as Colors from './src/styles/colors.js'; diff --git a/src/core/ThemeProvider.js b/src/core/ThemeProvider.js index e3c4e0e..3b158cb 100644 --- a/src/core/ThemeProvider.js +++ b/src/core/ThemeProvider.js @@ -7,6 +7,8 @@ import { } from 'react'; import DefaultTheme from '../styles/DefaultTheme'; +export const theme = 'react-native-paper$theme'; + export default class ThemeProvider extends Component { static propTypes = { @@ -15,12 +17,12 @@ export default class ThemeProvider extends Component { }; static childContextTypes = { - theme: PropTypes.object, + [theme]: PropTypes.object, }; getChildContext() { return { - theme: this.props.theme || DefaultTheme, + [theme]: this.props.theme || DefaultTheme, }; } diff --git a/src/core/withTheme.js b/src/core/withTheme.js new file mode 100644 index 0000000..c128784 --- /dev/null +++ b/src/core/withTheme.js @@ -0,0 +1,25 @@ +/* @flow */ + +import React, { + Component, + PropTypes, +} from 'react'; +import { theme } from './ThemeProvider'; + +export default function withTheme(Comp: ReactClass): ReactClass { + + const name = Comp.displayName || Comp.name; + + return class extends Component { + + static displayName = `Themed${name}`; + + static contextTypes = { + [theme]: PropTypes.object, + }; + + render() { + return ; + } + }; +} diff --git a/src/styles/DefaultTheme.js b/src/styles/DefaultTheme.js index 53c4b33..06b1ddc 100644 --- a/src/styles/DefaultTheme.js +++ b/src/styles/DefaultTheme.js @@ -7,7 +7,9 @@ import { } from './colors'; export default { - primaryColor: indigo500, - primaryDarkColor: indigo700, - accentColor: pinkA200, + colors: { + primary: indigo500, + primaryDark: indigo700, + accent: pinkA200, + }, };