Missing typings on Card component (and maybe others)

[Profex1999]

trafficstars

Description

Related to

• [ ] Components
• [ ] Demo
• [ ] Docs
• [x] Typings

Steps to reproduce

Expected behavior

This is with version 6.18.0

Actual behavior

This is with version >= 6.19

More Info

Code snippet

N/A

Screenshots/Video

See above

Environment

• React Native version: 0.69
• React Native UI Lib version: 6.20.1
• Typescript 4.4.4
• React 18.0.0

Affected platforms

None, only VSCode

• [ ] Android
• [ ] iOS
• [ ] Web

[robinclaes]

Same issue here! Downgrading to 6.18 resolves it, so its definitely a regression.

[CodingMeSwiftly]

Same issue here! Can confirm downgrade to 6.18 as a workaround. Problem is, the component type gets changed on import from React.ComponentClass<#PropsClass#, any> to React.ComponentClass<any, any>. Makes the latest version of this library completely unusable in typescript, unfortunately.

[lakardion]

Any updates on this? I am also experiencing the same issue with various components (Text, Picker) in latest version

I'm in 6.20.4

[The-White-Fang]

Seems like the problem is created by a global type ThemeComponent declared in globalTypes file. For some reason the global types are not resolving correctly and since the asBaseComponent function uses it like PROPS & ThemeComponent, the passed props are ignored as well. I tried to fix it with a PR but it seems that something is wrong with either my setup or the code (Latter one most likely) as I was unable to build (npm run build) the package and kept running into an error

Error: Command failed: tsc --p tsconfig.build.json
    at checkExecSyncError (node:child_process:861:11)
    at Object.execSync (node:child_process:932:15)
    at Object.<anonymous> (/home/abhishek/react-native-ui-lib/scripts/build.js:10:14)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:22:47 {
  status: 2,
  signal: null,
  output: [
    null,
    Buffer(292) [Uint8Array] [
      115, 114,  99,  47,  99, 111, 109, 112, 111, 110, 101, 110,
      116, 115,  47, 115, 108, 105, 100, 101, 114,  47,  95,  95,
      116, 101, 115, 116, 115,  95,  95,  47, 105, 110, 100, 101,
      120,  46, 115, 112, 101,  99,  46, 116, 115, 120,  40,  52,
       44,  50,  56,  41,  58,  32, 101, 114, 114, 111, 114,  32,
       84,  83,  50,  51,  48,  55,  58,  32,  67,  97, 110, 110,
      111, 116,  32, 102, 105, 110, 100,  32, 109, 111, 100, 117,
      108, 101,  32,  39,  46,  46,  47,  83, 108, 105, 100, 101,
      114,  46, 100, 114,
      ... 192 more items
    ],
    Buffer(0) [Uint8Array] []
  ],
  pid: 13449,
  stdout: Buffer(292) [Uint8Array] [
    115, 114,  99,  47,  99, 111, 109, 112, 111, 110, 101, 110,
    116, 115,  47, 115, 108, 105, 100, 101, 114,  47,  95,  95,
    116, 101, 115, 116, 115,  95,  95,  47, 105, 110, 100, 101,
    120,  46, 115, 112, 101,  99,  46, 116, 115, 120,  40,  52,
     44,  50,  56,  41,  58,  32, 101, 114, 114, 111, 114,  32,
     84,  83,  50,  51,  48,  55,  58,  32,  67,  97, 110, 110,
    111, 116,  32, 102, 105, 110, 100,  32, 109, 111, 100, 117,
    108, 101,  32,  39,  46,  46,  47,  83, 108, 105, 100, 101,
    114,  46, 100, 114,
    ... 192 more items
  ],
  stderr: Buffer(0) [Uint8Array] []
}

and I really don't have a clue about what's wrong here. Though npm run build:dev seems to be working just fine.

[The-White-Fang]

As a workaround to get the typings back for now I am going to the definition files for the components I am using, and adding an import to ThemeComponent.

import { ThemeComponent } from 'react-native-ui-lib/typings';

Also, note that you will need to modify the typings/globalTypes.d.ts and add an export before the ThemeComponent's definition like so

export interface ThemeComponent {
  useCustomTheme?: boolean;
}

This is not the ideal solution as you would have to do it each time you reinstall the library, but if you care about the typing you will have to bare with it until it is officially fixed.

[SchneiderOr]

Hey all! Based on the answers here i created a patch-package gist to fix the issue with latest version until a proper fix will be provided I've exported the ThemedComponent type from globals and added explicit import to it in every type that uses it. you can use patch-package to apply it in your code

It's a bit troubling that this issue is open more than half a year while the package do get updated but no one address this

[denbka]

same issue ...............

[HarunKilic]

Same issue on Button

[ronal2s]

Same issues here, waiting for the next release, using version 18 for now

[chrismerino]

Same issue

[aboozaid]

and here is a fix for fontWeight issue and types for version 7.2.4 patch-package patch

[The-White-Fang]

any update on when it will be fixed or if it is on the roadmap? @ethanshar

[medet-mattr]

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "src": ["src"],
      "src/*": ["src/*"]
    },
  },
  "include": [
    "node_modules",
    "src/**/*",
    "node_modules/react-native-ui-lib/typings/*",
  ]
}

this solves the problem

[ethanshar]

Should be resolved in our next version

[Revolt9k]

Still experience it on 7.6.0. What exactly next version?

[ethanshar]

Should be fixed in 7.7.0 Try installing snapshot tag version and see if it's working The new version should be out next week