TypeScript errors?

[deklanw]

Getting this everywhere I use the styles.

[ts]
Type 'RegisteredStyle<ViewStyle | TextStyle | ImageStyle | StringifiedStyles>' is not assignable to type 'StyleProp<ViewStyle>'.
  Type 'RegisteredStyle<ViewStyle | TextStyle | ImageStyle | StringifiedStyles>' is not assignable to type 'RecursiveArray<false | ViewStyle | RegisteredStyle<ViewStyle> | null | undefined>'. [2322]
index.d.ts(2028, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<{ children?: ReactNode; }> & Readonly<ViewProps>'

[nirsky]

Hey, can you please attach some more info - tsconfig, typescript version, react-native version and usage example?

[deklanw]

Expo 31.0.2
RN (Expo fork) sdk-31.0.0
Typescript 3.2.2

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "es2015",
      "es2016",
      "es2017",
      "dom"
    ],
    "jsx": "react-native",
    "strict": true,
    "esModuleInterop": true
  }
}

Usage example: every single place where I have a style= using a ScaledSheet there is an error, even in places where no special feature is used, like:

const s = ScaledSheet.create({
  outerContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    width: Dimensions.get('window').width
  }
});

[deklanw]

In addition to the error I already posted, there is also another error appearing on a few, including the example above:

[ts]
Type 'RegisteredStyle<ViewStyle | TextStyle | ImageStyle | StringifiedStyles>' is not assignable to type 'StyleProp<ViewStyle>'.
  Type 'RegisteredStyle<ViewStyle | TextStyle | ImageStyle | StringifiedStyles>' is not assignable to type 'RecursiveArray<false | ViewStyle | RegisteredStyle<ViewStyle> | null | undefined>'.
    Property 'length' is missing in type 'Number & { __registeredStyleBrand: ViewStyle | TextStyle | ImageStyle | StringifiedStyles; }'. [2322]

[nirsky]

Thanks, I'll try to come up with a fix.
Will update in the next few days.

[nirsky]

Hey! Sorry for the long wait.
Fixed in PR #22.
Released in version 0.1.5.

I'd appreciate if you can confirm issue is resolved before I close this one.

[deklanw]

Hi,

It appears to have fixed most of the errors, but not the ones associated with Text styles. These errors remain:

Type 'RegisteredStyle<{ fontFamily: string; fontSize: string; }>' is not assignable to type 'StyleProp<TextStyle>'.
  Type 'RegisteredStyle<{ fontFamily: string; fontSize: string; }>' is not assignable to type 'RegisteredStyle<TextStyle>'.
    Type 'RegisteredStyle<{ fontFamily: string; fontSize: string; }>' is not assignable to type '{ __registeredStyleBrand: TextStyle; }'.
      Types of property '__registeredStyleBrand' are incompatible.
        Type '{ fontFamily: string; fontSize: string; }' is not assignable to type 'TextStyle'.
          Types of property 'fontSize' are incompatible.
            Type 'string' is not assignable to type 'number | undefined'.ts(2322)

Type 'RegisteredStyle<{ fontFamily: string; fontSize: string; }>' is not assignable to type 'StyleProp<TextStyle>'.
  Type 'RegisteredStyle<{ fontFamily: string; fontSize: string; }>' is not assignable to type 'RegisteredStyle<TextStyle>'.
    Type 'RegisteredStyle<{ fontFamily: string; fontSize: string; }>' is not assignable to type '{ __registeredStyleBrand: TextStyle; }'.ts(2322)

I don't see any patterns in what causes either error.

Thanks for your help!

[deklanw]

Actually, it's more than Text styles.

Type 'RegisteredStyle<{ borderBottomColor: string; borderBottomWidth: string; width: string; }>' is not assignable to type 'StyleProp<ViewStyle>'.
  Type 'RegisteredStyle<{ borderBottomColor: string; borderBottomWidth: string; width: string; }>' is not assignable to type 'RegisteredStyle<ViewStyle>'.
    Type 'RegisteredStyle<{ borderBottomColor: string; borderBottomWidth: string; width: string; }>' is not assignable to type '{ __registeredStyleBrand: ViewStyle; }'.ts(2322)

  hrStyle: {
    borderBottomColor: grey5,
    borderBottomWidth: '1@ms0.6',
    width: '100%'
  },

[nirsky]

Damn.. I'll try some more voodoo and update soon.
It basically happens every time a ScaledSheet annotation is used on a number only style (like fontSize, borderWidth..).
Solution is not trivial..
I might end up using the any approach, similar to what extended-stylesheet ended up doing:
https://github.com/vitalets/react-native-extended-stylesheet/blob/master/types/index.d.ts

[nirsky]

@deklanw - Just released version 0.1.6.
I think this time I got it! Please confirm :)

[deklanw]

Seems good now.

Thank you for your work!

[tgreco]

This is an issue now with the latest react-native