How to call hook in class component in React Native? - react-native

Question

Tech used
React Native Appearance, Typescript & Redux Rematch.
Problem
I am attempting to pass my customized theme colours into a class component. I also understand that hooks cannot be used/called within a class component and only a functional component. The reason why I am using a class component is because of Redux Rematch. Is there a way for me to get my colours from the hook listed below into my class component?
This is how I am building my theme:
index.tsx
const palette = {
colourTextDark: "#ffffff",
colourTextLight: "#000000",
};
export const colors = {
colourText: palette.colourTextLight,
};
export const themedColors = {
default: {
...colors,
},
light: {
...colors,
},
dark: {
...colors,
colourText: palette.colourTextDark,
},
};
hooks.tsx
import { useColorScheme } from "react-native-appearance";
import { themedColors } from "./";
export const useTheme = () => {
const theme = useColorScheme();
const colors = theme ? themedColors[theme] : themedColors.default;
return {
colors,
theme,
};
};
Ideally I would want to use it like so:
import { useTheme } from "../../theme/hooks";
...
class Example extends React.Component<Props> {
render() {
// This doesn't work
const { colors } = useTheme();
return (
<Text style={{ color: colors.colourText }}>Please help :)</Text>
)
}
}
How would I be able to do this? Thanks in advance :)

Answer 1

You could create a high order component like this:
const themeHOC = (Component) => {
return (WrappedComponent = (props) => {
const { colors } = useTheme();
return <Component {...props} colors={colors} />;
});
};
And use it like this:
themeHOC(<Example />)

Answer 2

This worked for me.
componentDidMount() {
(async () => {
const theme = useColorScheme() === "dark" ? styles.dark : styles.light;
this.setState({ theme });
})();
this.sendEmail();
}