Skip to main content

ThemeManager

Use ThemeManager to set default global behavior for your app.

setComponentTheme#

Set default props for a component by passing an object or a callback (for dynamic, runtime default props) The default value will be overridden if a prop is being passed to the component instance (see setComponentForcedTheme for that).

  • ThemeManager.setComponentTheme(componentName, defaultPropsObject);
  • ThemeManager.setComponentTheme(componentName, componentProps => newDefaultPropsObject);

Example

import {ThemeManager} from 'react-native-ui-lib';
ThemeManager.setComponentTheme('Text', {    text70: true, // will set the text70 typography modifier prop to be true by default    grey10: true, // will set the grey10 color modifier prop to be true by default });

ThemeManager.setComponentTheme('Button', (props, context) => {
  return {    // this will apply a different backgroundColor    // depending on whether the Button has an outline or not    backgroundColor: props.outline ? 'black' : 'green',  };});

setComponentForcedTheme#

Same as setComponentTheme, but can't be overridden by props passed to the component.

Example

ThemeManager.setComponentForcedTheme('Card', (props, context) => {  return {    containerStyle: [styles.defaultContainerStyle, props.containerStyle]  };});