TS errors with mixed-type ternaries in scaled sheets

[Andrew]

With the upgrade to RN 0.72.7, we're now getting TS errors when using ScaledSheet wherever we pass in ternaries where one option is a straight number and one is scaled shorthand -

fontSize: isWideScreen ? 20 : '18.5@ms',

Produces the error:

        Type '20 | "18.5@ms"' is not assignable to type 'number | undefined'.
          Type 'string' is not assignable to type 'number'.

The workaround is simply:

fontSize: isWideScreen ? '20@ms0' : '18.5@ms',

So not a huge deal, but would be nice to fix. Happy to contribute if you can point us in the right direction, as well. Really great package, and we appreciate it.

We're on the latest of react-native-size-matters, 0.42.

Later note

Upon further investigation, we're also now getting errors with this syntax, which is a little harder to resolve with the workaround above:

paddingLeft: isWideScreen ? '20%' : '24@mvs',

with the following error:

Type '"20%" | "20@mvs"' is not assignable to type 'DimensionValue | undefined'.

The workaround here is

 paddingHorizontal: isWideScreen ? ('20%' as any) : '24@mvs',

Again, not terrible, but less than ideal.

[Nir Hadassi]

Hey @meatnordrink, I'm unable to reproduce the error locally.
Using:

"react-native": "0.72.7",
"react-native-size-matters": "^0.4.2"

Is there an example project you can provide so I can try to debug?
Or maybe provide your tsconfig, that might help.

[Andrew]

@nirsky Thanks for looking into this! Huh, that's odd that you're not seeing it; it popped right up as soon as we upgraded, and we didn't change anything else...

We're using a pretty standard tsconfig -

// prettier-ignore
/* Visit https://aka.ms/tsconfig.json to read more about this file */
{
  "extends": "@tsconfig/react-native/tsconfig.json",     /* Recommended React Native TSConfig base */
  "compilerOptions": {
    "esModuleInterop": true,                              /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "jsx": "react-native",                                /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
    "baseUrl": ".",                                       /* Base directory to resolve non-absolute module names. */
    "paths": {
      "*": ["src/*"]
    },
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"],
}

Unfortunately I don't have an example project set up (we're seeing it on our live product's codebase).

[Nir Hadassi]

Unfortunately I'm still unable to reproduce. Would it be possible for you to create a small public repo replicating the issue?

[Andrew]

Thanks for continuing your investigation! I'll be honest that since we've already implemented a workaround I may not find time; and if you're not seeing it, and not hearing from anyone else, that it sounds like it may be an issue on our end. (Which I'd rather workaround than debug, honestly, given the minor nature of the workaround.)

I wanted to let you know, as my initial impression was that it was an issue with the 0.72 updates and the library itself; but if it looks like it's specific to our setup somehow, then I'm fine closing this. (If others find they have the same issue, they can always reopen it.)