fix: resolve component theme on first render

packages/react/src/StyledProvider.tsx

@@ -6,7 +6,6 @@ import type { COLORMODES } from './types';
 import { platformSpecificSpaceUnits } from './utils';
 import { createGlobalStylesWeb } from './createGlobalStylesWeb';
 import { createGlobalStyles } from './createGlobalStyles';
-import { resolveComponentThemes } from './createConfig';
 type Config = any;
 let colorModeSet = false;
 
@@ -96,13 +95,8 @@ export const StyledProvider: React.FC<{
     config?.globalStyle && createGlobalStyles(config.globalStyle);
 
   const contextValue = React.useMemo(() => {
-    const resolvedComponents = resolveComponentThemes(
-      {},
-      currentConfig.components
-    );
-
     return {
-      config: { ...currentConfig, components: resolvedComponents },
+      config: currentConfig,
       globalStyle: globalStyleMap,
       animationDriverData,
       setAnimationDriverData,

packages/react/src/createConfig.ts

@@ -49,7 +49,6 @@ export function getInstalledComponents() {
 }
 
 export const createComponents = <T>(components: T): T => {
-  // const ret = setGlobalComponentsStore(resolveComponentThemes({}, components));
   return components;
 };
 
@@ -115,6 +114,29 @@ const resolveThemes = (config: any) => {
   return newConfig;
 };
 
+export const resolveComponentTheme = (config: any, componentTheme: any) => {
+  const configWithPropertyTokenMap = config;
+
+  let resolvedTheme = componentTheme;
+  const component = componentTheme;
+
+  if (
+    Object.keys(component?.BUILD_TIME_PARAMS ?? {}).length === 0 &&
+    component.theme
+  ) {
+    resolvedTheme = resolveTheme(
+      component.theme,
+      configWithPropertyTokenMap,
+      component?.componentConfig
+    );
+  } else {
+    GluestackStyleSheet.update(component.BUILD_TIME_PARAMS?.orderedResolved);
+    resolvedTheme = component;
+  }
+
+  return resolvedTheme;
+};
+
 export const resolveComponentThemes = (config: any, components: any) => {
   let newComponents: any = {};
   const configWithPropertyTokenMap = {

packages/react/src/styled.tsx

@@ -44,7 +44,7 @@ import { stableHash } from './stableHash';
 import { DeclarationType, GluestackStyleSheet } from './style-sheet';
 import { CSSPropertiesMap } from './core/styled-system';
 import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap';
-import { getInstalledPlugins, getInstalledComponents } from './createConfig';
+import { resolveComponentTheme } from './createConfig';
 
 const styledSystemProps = { ...CSSPropertiesMap };
 
@@ -1047,12 +1047,12 @@ export function verboseStyled<P, Variants, ComCon>(
       if (EXTENDED_THEME) {
         // RUN Middlewares
 
-        theme = deepMerge(theme, EXTENDED_THEME?.theme);
-        //@ts-ignore
-        // theme.baseStyle.props = deepMerge(
-        //   theme.defaultProps,
-        //   EXTENDED_THEME?.theme?.baseStyle.props
-        // );
+        const resolvedComponentExtendedTheme = resolveComponentTheme(
+          CONFIG,
+          EXTENDED_THEME
+        );
+
+        theme = deepMerge(theme, resolvedComponentExtendedTheme.theme);
 
         // @ts-ignore
         Object.assign(themeDefaultProps, theme?.baseStyle?.props);
@@ -1068,9 +1068,12 @@ export function verboseStyled<P, Variants, ComCon>(
           );
         } else {
           // Merge of Extended Config Style ID's with Component Style ID's
-          deepMergeArray(styleIds, EXTENDED_THEME?.verbosedStyleIds);
+          deepMergeArray(
+            styleIds,
+            resolvedComponentExtendedTheme?.verbosedStyleIds
+          );
           const extendedStylesToBeInjected = GluestackStyleSheet.resolve(
-            EXTENDED_THEME?.styledIds,
+            resolvedComponentExtendedTheme?.styledIds,
             CONFIG,
             componentExtendedConfig
           );
@@ -1974,18 +1977,17 @@ export function styled<P, Variants, ComCon>(
   // const DEBUG =
   //   process.env.NODE_ENV === 'development' && DEBUG_TAG ? false : false;
 
-  const componentName = componentStyleConfig?.componentName;
-  const extendedThemeConfig = getInstalledComponents()[componentName];
+  // const componentName = componentStyleConfig?.componentName;
   // const componentExtendedTheme = extendedThemeConfig?.theme;
-  const componentExtended_build_time_params =
-    extendedThemeConfig?.BUILD_TIME_PARAMS;
-  let mergedBuildTimeParams: any;
+  // const componentExtended_build_time_params =
+  //   extendedThemeConfig?.BUILD_TIME_PARAMS;
+  // let mergedBuildTimeParams: any;
 
   if (BUILD_TIME_PARAMS) {
-    mergedBuildTimeParams = deepMergeArray(
-      { ...BUILD_TIME_PARAMS },
-      { ...componentExtended_build_time_params }
-    );
+    // mergedBuildTimeParams = deepMergeArray(
+    //   { ...BUILD_TIME_PARAMS },
+    //   { ...componentExtended_build_time_params }
+    // );
   }
 
   // let styledObj = { ...theme };
@@ -2022,7 +2024,7 @@ export function styled<P, Variants, ComCon>(
     sxConvertedObject,
     componentStyleConfig,
     ExtendedConfig,
-    mergedBuildTimeParams
+    BUILD_TIME_PARAMS
   );
 
   // @ts-ignore