Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

`useNativeVariable("--x")` fails to type-check in a React Native app: the package types it `() => never`

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#543 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
78/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react-native, typescript
Bereich
developer-experience, mobile

Rechercherichtung

Beginne mit dem types-Eintrag des Pakets und verfolge seine Re-Exports über ./runtime und ./web; vergleiche diese Deklarationen mit runtime.native.d.ts. Führe npx tsc im verknüpften Reproducer aus, um den Fehler zu bestätigen. Fertig ist die Arbeit, wenn beide Hook-Aufrufe den Variablennamen akzeptieren und ihr Ergebnistyp dem dokumentierten Verhalten nativer Werte entspricht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

useNativeVariable and useUnstableNativeVariable read a CSS variable's resolved value on native, and the declaration a React Native app is checked against takes no argument: the package's types entry re-exports ./runtime, which re-exports ./web, whose stub is declared () => never (dist/typescript/module/src/web/api.d.ts). TypeScript does not follow the .native suffix a bundler does, so it never reaches runtime.native.d.ts, whose declaration is useNativeVariable(name: string): any.

Library version

main at 2421ea7 (0.0.0-nightly.2421ea7)

Environment info
System:
  OS: Windows 11 10.0.26300
  CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          "
  Memory: 161.91 GB / 255.67 GB
Binaries:
  Node:
    version: 26.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 12.2.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "33"
      - "35"
      - "35"
      - "35"
      - "36"
      - "37"
    Build Tools:
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-26 | Google APIs Intel x86_64 Atom
      - android-28 | Google APIs Intel x86_64 Atom
      - android-29 | Google APIs Intel x86_64 Atom
      - android-30 | Google APIs Intel x86_64 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-32 | Google APIs Intel x86_64 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
      - android-36.1 | Google Play Intel x86_64 Atom
      - android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
      - android-37.0 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-262.9437.185.2621.16467767
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.20.1
    path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.3.1
    wanted: 19.3.1
  react-native:
    installed: 0.88.1
    wanted: 0.88.1
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found
Steps to reproduce
  1. Clone the reproducer, a React Native app's three files on the nightly build of main, and install: 
    git clone https://github.com/YevheniiKotyrlo/react-native-css-native-variable-types
cd react-native-css-native-variable-types
npm install
  2. Run npx tsc.

index.ts:

import { useNativeVariable, useUnstableNativeVariable } from "react-native-css";

export function useFontSans(): string {
  const fromStable = useNativeVariable("--font-sans");
  const fromUnstable = useUnstableNativeVariable("--font-sans");
  return String(fromStable ?? fromUnstable);
}

package.json:

{
  "name": "react-native-css-native-variable-types",
  "private": true,
  "type": "module",
  "dependencies": {
    "react": "19.3.1",
    "react-native": "0.88.1",
    "react-native-css": "0.0.0-nightly.2421ea7"
  },
  "devDependencies": {
    "@types/react": "19.3.0",
    "typescript": "7.0.2"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "module": "preserve",
    "jsx": "react-jsx",
    "target": "es2022",
    "noEmit": true
  },
  "files": ["index.ts"]
}

Expected: both calls type-check, and the value is typed, string | undefined or what resolveValue can answer, rather than any.

Actual: both calls fail with TS2554, because the declaration TypeScript reads takes no argument. npx tsc in the reproducer at 9f2f65d, Windows 11, Node 26.12.1, TypeScript 7.0.2, React Native 0.88.1:

index.ts(4,40): error TS2554: Expected 0 arguments, but got 1.
index.ts(5,50): error TS2554: Expected 0 arguments, but got 1.
Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css-native-variable-types

Vorherrschende Sprache
TypeScript
Sterne
166
Forks
45
Ø Merge
13 T. 14 Std.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus nativewind/react-native-css

Alle Issues in nativewind/react-native-css

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.