diff --git a/docs/customization.md b/docs/customization.md index 085d8f7898..14c1e4649d 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -229,8 +229,8 @@ const theme = { ### Using the theme in your own components You may want to make use of the theming utilities in your own components. For -this you can use the `withTheme` HOC exported from this library. It adds two -props to the component it wraps - `theme` and `updateTheme`. +this you can use the `withTheme` HOC exported from this library. It adds three +props to the component it wraps - `theme`, `updateTheme` and `replaceTheme`. ```jsx import React from 'react'; @@ -238,14 +238,14 @@ import { Text } from 'react-native'; import { withTheme } from 'react-native-elements'; function MyComponent(props) { - const { theme, updateTheme } = props; + const { theme, updateTheme, replaceTheme } = props; return Yo!; } export default withTheme(MyComponent); ``` -The `updateTheme` merges the theme passed in with the current theme. +The `updateTheme` function merges the theme passed in with the current theme. ```jsx const theme = { @@ -258,6 +258,8 @@ const theme = { updateTheme({ colors: { primary: 'red' } }); ``` +The `replaceTheme` function merges the theme passed in with the default theme. + Don't want to wrap your components? You can use the `ThemeConsumer` component which uses render props! diff --git a/src/avatar/__tests__/__snapshots__/Avatar.js.snap b/src/avatar/__tests__/__snapshots__/Avatar.js.snap index bb699afa76..7da1f01cc1 100644 --- a/src/avatar/__tests__/__snapshots__/Avatar.js.snap +++ b/src/avatar/__tests__/__snapshots__/Avatar.js.snap @@ -608,6 +608,7 @@ exports[`Avatar Component renders touchable if onPress given 1`] = ` exports[`Avatar Component should apply values from theme 1`] = ` { + this.setState(() => ({ + theme: deepmerge(this.defaultTheme, theme), + })); + }; + getTheme = () => this.state.theme; render() { @@ -34,6 +41,7 @@ export default class ThemeProvider extends React.Component { value={{ theme: this.state.theme, updateTheme: this.updateTheme, + replaceTheme: this.replaceTheme, }} > {this.props.children} diff --git a/src/config/__tests__/ThemeProvider.js b/src/config/__tests__/ThemeProvider.js index 93850f17cd..49d9956187 100644 --- a/src/config/__tests__/ThemeProvider.js +++ b/src/config/__tests__/ThemeProvider.js @@ -17,7 +17,7 @@ describe('ThemeProvider', () => { expect(toJson(component)).toMatchSnapshot(); }); - it('should update theme', () => { + it('should update and replace theme', () => { const component = shallow( @@ -44,6 +44,12 @@ describe('ThemeProvider', () => { }, }, }); + + instance.replaceTheme({}); + + expect(instance.state).toEqual({ + theme, + }); }); it('should get the theme', () => { diff --git a/src/config/__tests__/__snapshots__/ThemeProvider.js.snap b/src/config/__tests__/__snapshots__/ThemeProvider.js.snap index ef2ff78c84..d77bb9d36f 100644 --- a/src/config/__tests__/__snapshots__/ThemeProvider.js.snap +++ b/src/config/__tests__/__snapshots__/ThemeProvider.js.snap @@ -4,6 +4,7 @@ exports[`ThemeProvider should work 1`] = ` { ); } - const { theme, updateTheme } = context; + const { theme, updateTheme, replaceTheme } = context; const props = { theme, updateTheme, + replaceTheme, ...deepmerge((themeKey && theme[themeKey]) || {}, rest), children, }; diff --git a/src/divider/__tests__/__snapshots__/Divider.js.snap b/src/divider/__tests__/__snapshots__/Divider.js.snap index 6f22e1f5c7..a092aadb98 100644 --- a/src/divider/__tests__/__snapshots__/Divider.js.snap +++ b/src/divider/__tests__/__snapshots__/Divider.js.snap @@ -2,6 +2,7 @@ exports[`Divider Component should apply values from theme 1`] = ` = Partial & T; export type UpdateTheme = (updates: RecursivePartial) => void; +export type ReplaceTheme = (updates: RecursivePartial) => void; + export interface ThemeProps { theme: Theme; updateTheme: UpdateTheme; + replaceTheme: ReplaceTheme; } /** @@ -2034,6 +2037,7 @@ export interface ThemeProviderProps { export class ThemeProvider extends React.Component> { updateTheme: UpdateTheme; + replaceTheme: ReplaceTheme; getTheme(): Theme; } diff --git a/src/input/__tests__/__snapshots__/Input.js.snap b/src/input/__tests__/__snapshots__/Input.js.snap index 5ff8767767..0af997d872 100644 --- a/src/input/__tests__/__snapshots__/Input.js.snap +++ b/src/input/__tests__/__snapshots__/Input.js.snap @@ -732,6 +732,7 @@ exports[`Input component should apply values from theme 1`] = `