You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We are using PlatformColor for setting all colors inside our app. But when we pass a style object to createStyleSheet, then these PlatformColor gets converted to undefined. And hence the color does not gets applied to component. This is only happening for Android and iOS, web is working fine.
After digging into code, I found the reason. It was because inside parseStyle function we are checking if we see style properties value as object, then we proceed assuming that the value is for breakpoints, which is a valid assumption as per this library objective. But, this is where PlatformColor breaks. Since, PlatformColor value is also an object, the value gets converted to undefined by getValueForBreakpoint function in breakpoints.ts.
I am not sure what is the correct way to fix it. I can think of two ways to fix it.
First, we add checks for PlatformColor and return value as it is inside parseStyle function. This is the patch that I made for myself and patching this library locally.
diff --git a/node_modules/react-native-unistyles/src/utils/styles.ts b/node_modules/react-native-unistyles/src/utils/styles.ts
index c35c333..c44b242 100644
--- a/node_modules/react-native-unistyles/src/utils/styles.ts+++ b/node_modules/react-native-unistyles/src/utils/styles.ts@@ -97,6 +97,16 @@ export const parseStyle = <T, B extends Breakpoints>(
return [key, value]
}
+ // if the value is a PlatformColor Object, we don't want to parse it+ if (value && typeof value === 'object' && value.hasOwnProperty('semantic')) {+ return [key, value]+ }++ // or on Android the property to check is resource_paths+ if (value && typeof value === 'object' && value.hasOwnProperty('resource_paths')) {+ return [key, value]+ }+
return [
key,
getValueForBreakpoint<B>(
Second, we can return the value as it is, instead of returning undefined, inside breakpoints.ts file's getValueForBreakpoint function.
Description
We are using
PlatformColor
for setting all colors inside our app. But when we pass a style object tocreateStyleSheet
, then thesePlatformColor
gets converted toundefined
. And hence the color does not gets applied to component. This is only happening for Android and iOS, web is working fine.After digging into code, I found the reason. It was because inside
parseStyle
function we are checking if we see style properties value as object, then we proceed assuming that the value is for breakpoints, which is a valid assumption as per this library objective. But, this is wherePlatformColor
breaks. Since,PlatformColor
value is also an object, the value gets converted toundefined
bygetValueForBreakpoint
function inbreakpoints.ts
.I am not sure what is the correct way to fix it. I can think of two ways to fix it.
First, we add checks for PlatformColor and return value as it is inside
parseStyle
function. This is the patch that I made for myself and patching this library locally.Second, we can return the value as it is, instead of returning
undefined
, insidebreakpoints.ts
file'sgetValueForBreakpoint
function.Steps to reproduce
Snack or a link to a repository (optional)
No response
Unistyles version
1.1.6
React Native version
0.72.6
Platforms
Android, iOS
The text was updated successfully, but these errors were encountered: