GluestackUIProvider blocks system theme from working

[technologyconsulting]

Description

A default install of create-expo-app works. If i immediately add Gluestack I expect the system theme from the phone still to update the app.

CodeSandbox/Snack link

https://I-do-not-know-how-to-set-gluestack-up-in-a-snack

Steps to reproduce

1. create-expo-app
2. Setting system theme from phone menu works (immediately) and allow me to toggle
3. npx gluestack-ui init
4. Setting system theme from phone menu NO LONGER WORKS and only loads correctly on initial load

gluestack-ui Version

2

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

Expo 52, react-native 0.76.3, nativewind 4.0.36, tailwindcss 3.4.15,

[Viraj-10]

Hey @technologyconsulting, Can you provide a github repo?

[technologyconsulting]

Hi @Viraj-10 ,

Thanks in advance for the help.

This first link is to a basic "npx create-expo-app" where system theme changes just work.
https://github.com/technologyconsulting/project-24-52-base.git

This second link is the same project expect with the base "npx gluestack-ui init" added. Now the system theme doesn't work.
https://github.com/technologyconsulting/project-24-52-base-with-gluestack.git

[Viraj-10]

Hey @technologyconsulting, This issue seems to be coming from nativewind side. Here is related issues to track issue 1, issue2. We will try to contribute for a fix.

[marcos-credfranco]

Hello, I think I found a partial solution.
Go to the file: components\ui\gluestack-ui-provider\index.tsx and replace
useColorScheme(); from react-native by useColorScheme from nativewind.

Current Code

import { config } from './config';
import { ColorSchemeName, useColorScheme, View, ViewProps } from 'react-native';
import { OverlayProvider } from '@gluestack-ui/overlay';
import { ToastProvider } from '@gluestack-ui/toast';
import { colorScheme as colorSchemeNW } from 'nativewind';

type ModeType = 'light' | 'dark' | 'system';

const getColorSchemeName = (
  colorScheme: ColorSchemeName,
  mode: ModeType
): 'light' | 'dark' => {
  if (mode === 'system') {
    return colorScheme ?? 'light';
  }
  return mode;
};

export function GluestackUIProvider({
  mode = 'light',
  ...props
}: {
  mode?: 'light' | 'dark' | 'system';
  children?: React.ReactNode;
  style?: ViewProps['style'];
}) {
  const colorScheme = useColorScheme();

  const colorSchemeName = getColorSchemeName(colorScheme, mode);

  colorSchemeNW.set(mode);

  return (
    <View
      style={[
        config[colorSchemeName],
        // eslint-disable-next-line react-native/no-inline-styles
        { flex: 1, height: '100%', width: '100%' },
        props.style,
      ]}
    >
      <OverlayProvider>
        <ToastProvider>{props.children}</ToastProvider>
      </OverlayProvider>
    </View>
  );
}

Adjusted code

import React from "react";
import { config } from "./config";
import { ColorSchemeName, View, ViewProps } from "react-native";
import { OverlayProvider } from "@gluestack-ui/overlay";
import { ToastProvider } from "@gluestack-ui/toast";
import { colorScheme as colorSchemeNW, useColorScheme } from "nativewind";

type ModeType = "light" | "dark" | "system";

const getColorSchemeName = (
  colorScheme: ColorSchemeName,
  mode: ModeType
): "light" | "dark" => {
  if (mode === "system") {
    return colorScheme ?? "light";
  }
  return mode;
};

export function GluestackUIProvider({
  mode = "light",
  ...props
}: {
  mode?: "light" | "dark" | "system";
  children?: React.ReactNode;
  style?: ViewProps["style"];
}) {
  const colorScheme = useColorScheme();

  const colorSchemeName = getColorSchemeName(colorScheme.colorScheme, mode);

  colorSchemeNW.set(mode);

  return (
    <View
      style={[
        config[colorSchemeName],
        // eslint-disable-next-line react-native/no-inline-styles
        { flex: 1, height: "100%", width: "100%" },
        props.style,
      ]}
    >
      <OverlayProvider>
        <ToastProvider>{props.children}</ToastProvider>
      </OverlayProvider>
    </View>
  );
}
 

Remember to leave the mode parameter in GluestackUIProvider as system.

<GluestackUIProvider mode={"system"}>
      <ThemeProvider
        value={colorScheme.colorScheme === "dark" ? DarkTheme : DefaultTheme}
      >
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="+not-found" />
        </Stack>
        <StatusBar style="auto" />
      </ThemeProvider>
    </GluestackUIProvider>

darkMode in tailwind.config is set to media

Fix 1 (edited)

Add the following code in _layout.tsx (or even GluestackUIProvider location) to synchronize nativewind's colorScheme with react-native's. This way, when the app is out of focus it will not revert to the default colorScheme.

useEffect(() => {
    if (!Appearance.getColorScheme()) {
      Appearance.setColorScheme(theme.colorScheme);
      theme.setColorScheme('system');
    }
  }, [theme.colorScheme]);

[akash3gtm]

This issue is resolved in the latest version in this PR.

Closing this for now, if the issue persists please re-open the issue.