useTheme
The useTheme
hook lets us access the currently active theme. You can use it in your own components to have them respond to changes in the theme.
- Static
- Dynamic
import { useTheme } from '@react-navigation/native';
function MyButton() {
const { colors } = useTheme();
return (
<TouchableOpacity style={{ backgroundColor: colors.card }}>
<Text style={{ color: colors.text }}>Button!</Text>
</TouchableOpacity>
);
}
import { useTheme } from '@react-navigation/native';
function MyButton() {
const { colors } = useTheme();
return (
<TouchableOpacity style={{ backgroundColor: colors.card }}>
<Text style={{ color: colors.text }}>Button!</Text>
</TouchableOpacity>
);
}
See theming guide for more details and usage guide around how to configure themes.
Using with class component
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} />;
}