[ BUG ] TypeError: react_native_css_interop_1.StyleSheet.getFlag is not a function (it is undefined), js engine: hermes

[periakteon]

Describe the bug When I want to change the theme using the ThemeToggle component, I get the following error:

TypeError: react_native_css_interop_1.StyleSheet.getFlag is not a function (it is undefined), js engine: hermes

To Reproduce Steps to reproduce the behavior:

1. Clone the starter-base app
2. Add ThemeToggle component wherever you want

Expected behavior The theme should change smoothly.

Screenshots

https://github.com/user-attachments/assets/97300852-4384-467c-87ef-6ec216d7f111

Platform:

• Type: [Emulator]
• OS: [e.g. Android]

Additional context

/app/_layout.tsx:

import "~/global.css";

import { Theme, ThemeProvider } from "@react-navigation/native";
import { Slot, SplashScreen } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { NAV_THEME } from "~/lib/constants";
import { useColorScheme } from "~/lib/useColorScheme";
import { PortalHost } from "@rn-primitives/portal";
import { useEffect, useState } from "react";
import { useFonts } from "expo-font";
import AuthProvider from "~/providers/AuthProvider";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { setAndroidNavigationBar } from "~/lib/android-navigation-bar";
import AsyncStorage from "@react-native-async-storage/async-storage";

const LIGHT_THEME: Theme = {
  dark: false,
  colors: NAV_THEME.light,
};
const DARK_THEME: Theme = {
  dark: true,
  colors: NAV_THEME.dark,
};

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from "expo-router";

export const unstable_settings = {
  initialRouteName: "/",
};

// Prevent the splash screen from auto-hiding before getting the color scheme.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = useState(false);

  const { colorScheme, setColorScheme, isDarkColorScheme } = useColorScheme();

  const [loaded, error] = useFonts({
    "Geist-Black": require("~/assets/fonts/Geist-Black.ttf"),
    "Geist-Bold": require("~/assets/fonts/Geist-Bold.ttf"),
    "Geist-Light": require("~/assets/fonts/Geist-Light.ttf"),
    "Geist-Medium": require("~/assets/fonts/Geist-Medium.ttf"),
    "Geist-Regular": require("~/assets/fonts/Geist-Regular.ttf"),
    "Geist-SemiBold": require("~/assets/fonts/Geist-SemiBold.ttf"),
    "Geist-Thin": require("~/assets/fonts/Geist-Thin.ttf"),
    "Geist-UltraBlack": require("~/assets/fonts/Geist-UltraBlack.ttf"),
    "Geist-UltraLight": require("~/assets/fonts/Geist-UltraLight.ttf"),
  });

  useEffect(() => {
    (async () => {
      const theme = await AsyncStorage.getItem("theme");
      console.log("🚀 ~ INITIAL LOADING THEME:", theme);

      if (!theme) {
        AsyncStorage.setItem("theme", colorScheme);
        setIsColorSchemeLoaded(true);
        return;
      }

      const colorTheme = theme === "dark" ? "dark" : "light";

      if (colorTheme !== colorScheme) {
        setColorScheme(colorTheme);
        setAndroidNavigationBar(colorTheme);
        setIsColorSchemeLoaded(true);
        return;
      }

      setAndroidNavigationBar(colorTheme);
      setIsColorSchemeLoaded(true);
    })().finally(() => {
      SplashScreen.hideAsync();
    });
  }, []);

  if (!isColorSchemeLoaded) {
    return null;
  }

  if (!loaded && !error) {
    return null;
  }

  return (
    <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <AuthProvider>
          <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
          <Slot />
          <PortalHost />
        </AuthProvider>
      </GestureHandlerRootView>
    </ThemeProvider>
  );
}

[techednelson]

I had a similar issue, I updated Nativewind to 4.0.36 and issue was solved. Give it a try!

[periakteon]

I had a similar issue, I updated Nativewind to 4.0.36 and issue was solved. Give it a try!

That's what I came to write! Thanks..

[shovel-kun]

For some reason this error occurs if you're on the 4.1 version of nativewind. Seems like a regression?

[uginy]

In v. 4.1.6 It works fine.