jpudysz / react-native-unistyles

Level up your React Native StyleSheet

Home Page:https://unistyl.es

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Invalid module name in augmentation, module react-native-unistyles cannot be found.

6lackcoral opened this issue · comments

Description

Hi,

I followed the set up process to use unistyles with Expo (with dev client) and when I try to override the library types I get the following errors (see comment bellow) :

export const lightTheme = {
	colors: {
		typography: "#000000",
		background: "#ffffff",
	},
	margins: {
		sm: 2,
		md: 4,
		lg: 8,
		xl: 12,
	},
} as const;

export const darkTheme = {
	colors: {
		typography: "#ffffff",
		background: "#000000",
	},
	margins: {
		sm: 2,
		md: 4,
		lg: 8,
		xl: 12,
	},
} as const;

export const breakpoints = {
	xs: 0,
	sm: 576,
	md: 768,
	lg: 992,
	xl: 1200,
	superLarge: 2000,
	tvLike: 4000,
} as const;

// if you defined breakpoints
type AppBreakpoints = typeof breakpoints;

// if you defined themes
type AppThemes = {
	light: typeof lightTheme;
	dark: typeof darkTheme;
};

// override library types
declare module "react-native-unistyles" { // TS2664: Invalid module name in augmentation, module react-native-unistyles cannot be found.
	export interface UnistylesBreakpoints extends AppBreakpoints {} // An interface declaring no members is equivalent to its supertype.
	export interface UnistylesThemes extends AppThemes {} // An interface declaring no members is equivalent to its supertype.
}

(About the question "Which architecture do you use?", I don't know how how to check which one I use.)

Steps to reproduce

  1. npx expo install react-native-unistyles@next
  2. Follow the set up guide up to 3.4 Call UnistylesRegistry
  3. Run the app

Snack or a link to a repository (optional)

No response

Unistyles version

2.0.0-rc.4

React Native version

0.72.6

Platforms

iOS

Engine

Hermes

Architecture

Fabric (new)

Never mind, I should have scrolled a little bit to see the full example. I had to add the following :

UnistylesRegistry
  .addBreakpoints(breakpoints)
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
  })
  .addConfig({
    adaptiveThemes: true
  })

For future reference, if someone still gets the An interface declaring no members is equivalent to its supertype error, you have configure eslint not-empty interface, or noEmptyInterface if you biomejs.

Thank you for your work!

I will add it to the docs. Thanks for the report @appliquant !