Wrong styles type provided by useStyles which has stylesheet with Platfrom.select(...)

[Madhusudan Sapkota]

Description

The platform-specific style property gets defaulted to ColorValue when we use Platform.select({ android: {...}, ios: {...}, ... }) inside stylesheet.

Steps to reproduce

1. Create stylesheet using Platform API

const stylesheet = createStyleSheet({
  toastContainer: {
    opacity: 1,
    minHeight: 60,
    ...Platform.select({
      ios: {
        shadowRadius: 12,
        shadowOpacity: 0.1,
        shadowOffset: { width: 0, height: 1 },
        shadowColor: "black",
      },
      android: {
        elevation: 1,
      },
      default: {},
    }),
  },
});

2. Use the styles in any View component

const { styles, theme } = useStyles(stylesheet);

<View style={styles.toastContainer} />

3. All the later platform styles type will be defaulted to ColorValue, here elevation type is defaulted to ColorValue.

Snack or a link to a repository (optional)

No response

Unistyles version

2.0.0

React Native version

0.73.2

Platforms

Android, iOS, React Native Web

Engine

Hermes

Architecture

Paper (old)

[Jacek Pudysz]

Thank you for the report. I know where the issue is, it's about Unistyles TypeScript types.

I will patch it as soon as possible, but it will most likely be next week due to my vacation.

[Jacek Pudysz]

What's your TypeScript version? I'm getting different results running your example:

Type:

(property) toastContainer: {
    shadowRadius: number;
    shadowOpacity: number;
    shadowOffset: {
        width: number;
        height: number;
    };
    shadowColor: string;
    elevation?: undefined;
    opacity: number;
    minHeight: number;
} | {
    elevation: number;
    ... 5 more ...;
    minHeight: number;
} | {
    ...;
}

I'm running your example in Unistyles example folder with Unistyles 2.0.2 and TS version set to 5.3.3

[Madhusudan Sapkota]

@jpudysz I'm not sure if it's my project specific, currently, I'm also using the h Unistyles 2.0.2 and TS version set to 5.3.3.
Here are the dependencies that I'm currently using.

Edit: I also tested the same code in a new project, and the issue does not exist. Maybe it's due to the project configurations, will investigate further and let you know.

[Jacek Pudysz]

Oh, thanks for the edit!
To be honest, I don't know why you have a different output. It should be exactly the same for everyone.

I will be waiting for your reply about this issue as I'm intrigued 🤔

[Madhusudan Sapkota]

@jpudysz Finally! After comparing every part with the new project, able to solve the issue. Not sure why it was caused.
I did added the compilerOptions i.e "strict": true, in tsconfig.json ✨ its working.

[Jacek Pudysz]

Thanks for the hint!

If someone will encounter it again I will mention it in the docs 💪