Getting access to a color in ThemeProvider React Native

Question

I have a theme like this:

export const theme = {
  red: "#CF3721",
  darkGrey: "#191919",
  white: "#fff",
  blue: "#31A9B8",
};

and a ThemeProvider:

<ThemeProvider theme={theme}>
  <Navigator />
</ThemeProvider>

How can I get access f.e. to the red color inside styles below? I tried something like this but it doesn't work well. I am using React Native.

<Component
    styles={{
            fontSize: 20,
            color: `${({ theme }) => theme.red}`,
           }}
/>

Answer 1

react-theme-provider library exports useTheme hook and withTheme HOC. You can access the theme context with one of those.

const { ThemeProvider, withTheme, useTheme } = createTheming(defaultTheme);

If you're using Functional component you can use useTheme hook.

function App() {
  const theme = useTheme();

  return (
    <Component
      styles={{
        fontSize: 20,
        color: theme.red,
      }}
    />
  );
}

If you're using Class component you can use withTheme HOC.

class App extends React.Component {
  render() {
    return (
      <Component
        styles={{
          fontSize: 20,
          color: this.props.theme.red,
        }}
      />
    );
  }
}

export default withTheme(App);

You can look for more advanced usages in the docs. https://github.com/callstack/react-theme-provider