gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
1.96k stars 94 forks source link

use Eject Theme alias ts loses effect #2116

Closed Simoon-F closed 2 months ago

Simoon-F commented 2 months ago

Description

When the exported theme is introduced into theme config, the alias and class name alias TS prompts are invalid. Change back to the config in the package, and there will be a TS prompt.

CodeSandbox/Snack link

No response

Steps to reproduce

  1. Initialize new project
  2. Run as per documentation :yarn add @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0
  3. yarn add @gluestack-ui/config@latest
  4. npx gluestack-ui-scripts eject-theme

Import to app.tsx

// import { config } from "@gluestack-ui/config";
import { GluestackUIProvider } from "@gluestack-ui/themed";
import React from "react";

import { RootNavigation } from "./navigation/root-navigator";
import { config } from "./theme/gluestack-ui.config";

const App = () => {
  return (
    <GluestackUIProvider config={config}>
      <RootNavigation />
    </GluestackUIProvider>
  );
};

export default App;

Test:

image image

As can be seen in the figure, the alias is invalid and the class name cannot be prompted.


Set the theme using the config in the package:

import { config } from "@gluestack-ui/config";
import { GluestackUIProvider } from "@gluestack-ui/themed";
import React from "react";

import { RootNavigation } from "./navigation/root-navigator";
// import { config } from "./theme/gluestack-ui.config";   // <--- changed here

const App = () => {
  return (
    <GluestackUIProvider config={config}>
      <RootNavigation />
    </GluestackUIProvider>
  );
};

export default App;

image

image

I also tried to find solutions in other issues, although there are types of issues, but it did not solve the problem.

    "@gluestack-style/react": "^1.0.54",
    "@gluestack-ui/config": "^1.1.18",
    "@gluestack-ui/themed": "^1.1.22",

gluestack-ui Version

1.1.22

Platform

Other Platform

No response

Additional Information

No response

Simoon-F commented 2 months ago

I have solved.

declare module "@gluestack-style/react" {
  interface ICustomConfig extends Config {}
  interface ICustomComponents extends Components {}
}