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`] = `