import { withTheme } from '@uhg-abyss/mobile';

This function takes a component and returns a higher order component with the current theme passed into the child.

Usage

withTheme has one argument: the component to be wrapped. This sample code will show the difference. The first component will not have the theme passed to it, while the second will.

() => {
  const UnwrappedComponent = (props) => {
    return <Text>{JSON.stringify(props, null, 4)}</Text>;
  };

  const WrappedComponent = withTheme(UnwrappedComponent);

  return (
    <React.Fragment>
      <Text>
        Here are the props of a component not wrapped with the withTheme
        function
      </Text>
      <UnwrappedComponent />
      <Layout.Space space={16} />
      <Text>
        Here are the props of a component that *are* wrapped with the withTheme
        function
      </Text>
      <WrappedComponent />
    </React.Fragment>
  );
};