diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 722b7c9c..0ef9a792 100644 --- 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 index c7d56163..910908c9 100644 --- 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 index 75dfc3ed..2c948fb7 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1054,15 +1054,16 @@ export function verboseStyled( 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( 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') {