useColorScheme

Deprecated

The useColorScheme hook from nativewind is deprecated in v5. Use useColorScheme from react-native and Appearance.setColorScheme() directly instead.

Migration

Replace the Nativewind import with the React Native equivalent:

- import { useColorScheme } from "nativewind";
+ import { useColorScheme, Appearance } from "react-native";

The v4 API returned { colorScheme, setColorScheme, toggleColorScheme }. In v5, use the React Native APIs directly:

import { useColorScheme, Appearance } from "react-native";
 
function ThemeToggle() {
  const colorScheme = useColorScheme();
 
  const setColorScheme = (scheme) => {
    Appearance.setColorScheme(scheme);
  };
 
  const toggleColorScheme = () => {
    Appearance.setColorScheme(
      Appearance.getColorScheme() === "dark" ? "light" : "dark"
    );
  };
 
  return (
    <Pressable onPress={toggleColorScheme}>
      <Text>Current: {colorScheme}</Text>
    </Pressable>
  );
}

See the Dark Mode guide for more details.

useColorScheme

Migration

On this page