Merge pull request #535 from gluestack/release/@gluestack-style/react…

…@1.0.16 Release/@gluestack style/[email protected]
gluestack · Nov 16, 2023 · 58a2219 · 58a2219
2 parents 9207576 + 1c142df
commit 58a2219
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @gluestack-style/react
 
+## 1.0.16
+
+### Patch Changes
+
+- - Conditional as prop rerender issue fixes
+  - Provider without config issue fixes
+
 ## 1.0.15
 
 ### Patch Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -1054,15 +1054,16 @@ export function verboseStyled<P, Variants, ComCon>(
 
       const prefixedMediaQueries: any = {};
 
-      Object.keys(CONFIG?.tokens?.mediaQueries).forEach((key: any) => {
-        prefixedMediaQueries[key] = {
-          key: `@${key}`,
-          isMediaQuery: true,
-        };
-      });
+      if (CONFIG?.tokens?.mediaQueries) {
+        Object.keys(CONFIG?.tokens?.mediaQueries).forEach((key: any) => {
+          prefixedMediaQueries[key] = {
+            key: `@${key}`,
+            isMediaQuery: true,
+          };
+        });
+      }
 
       Object.assign(reservedKeys, { ...prefixedMediaQueries });
-
       // for extended components
 
       const EXTENDED_THEME =
@@ -1957,9 +1958,13 @@ export function verboseStyled<P, Variants, ComCon>(
       componentConfig
     );
 
-    const AsComp: any = React.useRef(
-      resolvedStyleProps.as || (passingProps.as as any) || undefined
-    ).current;
+    // const AsComp: any = React.useRef(
+    //   resolvedStyleProps.as || (passingProps.as as any) || undefined
+    // ).current;
+
+    const AsComp: any = React.useMemo(() => {
+      return resolvedStyleProps.as || (passingProps.as as any) || undefined;
+    }, [resolvedStyleProps.as]);
 
     let resolvedStyleMemo = [passingProps?.style, ...resolvedStyleProps?.style];
     if (Platform.OS === 'web') {