Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta Para iniciantes
  • Algo errado?
#543 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 3 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
78/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
react-native, typescript
Domínio
developer-experience, mobile

Direção de pesquisa

Comece pela entrada types do pacote e siga suas reexportações por ./runtime e ./web; compare essas declarações com runtime.native.d.ts. Execute npx tsc no reproducer vinculado para confirmar a falha. O trabalho estará concluído quando ambas as chamadas do hook aceitarem o nome da variável e o tipo do resultado corresponder ao comportamento documentado dos valores nativos.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
166
Forks
45
Merge médio
13d 14h
PRs com merge (30d)
1

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de nativewind/react-native-css

Todas as issues de nativewind/react-native-css

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.