Changing the config dynamically doesn't apply the new config

[endrits079]

Description

If the config is changing it is not reflecting on the components.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Create 2 configs.

2. Have a state to decide which config to use

3. Based on the state provide a config object: function ThemedApp({children}: {children: React.ReactNode}): JSX.Element { const [config, setConfig] = useState("blue") const themeConfig = useMemo( () => config === "blue" ? blueConfig : greenConfig , [config], ); return ( <GluestackUIProvider config={themeConfig} colorMode="light"> {children} </GluestackUIProvider> ); }

4. Have a button that changes the state (for example between green and blue ) if the green config has primary color as green and blue config primary color as blue then it is not applying it is stuck on initial ( which is blue in this case )

gluestack-ui Version

1.0.17

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

A simple code example:

import {Button} from "@gluestack-ui/themed"
import {blueConfig, greenConfig} from "./config"

function ThemedApp({children}: {children: React.ReactNode}): JSX.Element {
  const [config, setConfig] = useState("blue")
  const themeConfig = useMemo(
    () => config === "blue" ? blueConfig : greenConfig ,
    [config],
  );
  return (
    <GluestackUIProvider config={themeConfig} colorMode="light">
      {children}
     <Button onPress={()=>{
        setConfig(prev=>prev==="blue" ? "green" : "blue")
     }}>Change config</Button>
    </GluestackUIProvider>
  );
}

[ankit-tailor]

Hey @endrits079, Thanks for reporting the issue. We'll look into it.

[flodlc]

Same here. Not sure if it's related but changing descendent color takes effect only after a reload. Is there some sort of caching ? Removing a style prop sometimes doesn't takes effect.

[usedlife]

Same here. I use different config to fit different theme colors. When colorMode changes, the view is not updated:

// Be executed somewhere
export let setColorMode: React.Dispatch<React.SetStateAction<COLORMODES>>;

export const ThemeProvider = (props: PropsType): React.JSX.Element => {
  const [colorMode, _setColorMode] = useState<COLORMODES>('dark');
  setColorMode = _setColorMode;

  // use dynamic colorMode returns different color configurations  
  const config = useMemo(() => createUIConfig({ colorMode }), [colorMode]);

  return (
    <GluestackUIProvider
      colorMode={colorMode}
      config={{
        ...config,
        components: componentsConfig,
      }}>
      {props.children}
    </GluestackUIProvider>
  );
};

I can't find the answer in the source code, can someone tell me if this is fixable? @ankit-tailor

[dknight10]

Similar issue here. I'm ejecting and then making updates to the theme components (as described here https://gluestack.io/ui/docs/theme-configuration/customizing-theme) in the generated config folder, but changes aren't taking effect until I do a reload.

[endrits079]

@ankit-tailor any updates on this issue?

[rayan1810]

Hey @endrits079, after some discussion we concluded that supporting this feature would take some toll on the performance which we are not in favor of right now. Hence we have decided to pause this, until we find a solution to effectively add this feature without any performance overhead.

[rayan1810]

You can try to workaround this by using themes feature if that works for you.

[TomSwift]

As themes are baked into a given config, how should we go about dynamically adding in new themes (and switching to them) that may not have been present in the initial config or even initially shipped with the app? Our current plan was to ship (download) new themes (or full configs) as JSON and re-create them and update the provider with a new config dynamically at the user's discretion.

It seems to me that not honoring a change to a property on the provider is a pretty large fail and doesn't behave how a react component is expected to behave.