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

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>
  );
}

Try on Snack

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>
  );
}

Try on Snack

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} />;
}