How to use custom theme in react navigation in class components

Question

I'm using react-navigation 5. I wanted to know how can I use custom theme defined colors in my class component(without the hook of useTheme). So that it changes dynamically when the theme changes.

This is my custom theme.

const DarkTheme = {
    dark: true,
    colors: {
        primary: colors.green,
        background: colors.black85,
        card: colors.black25,
        text: colors.white,
        border: colors.white,
    },
};

This is my navigator

<NavigationContainer
    ref={navigationRef}
    theme={theme === THEMES.DARK ? DarkTheme : LightTheme}>
    {authenticated ? (
        <DrawerNavigator />
    ) : (
            <AuthStackNavigator {...this.props} />
        )}
</NavigationContainer>

So how can I use those theme color keys (colors.primary) inside a class component so that it changes dynamically like in case of use effect hook without using the ternary operator and checking theme on every line?

score 1 · Answer 1 · answered Mar 09 '21 at 05:55

as per documentation you can wrap your class component in a function component to use the hook:

class MyButton extends React.Component {
  render() {
    // Get it from props
    const { theme } = this.props;
  }
}

// Wrap and export
export default function(props) {
  const theme = useTheme();

  return <MyButton {...props} theme={theme} />;
}

How to use custom theme in react navigation in class components

1 Answers1