reactjs - Import types two different project

Question

I have a project which includes two sub projects. Web for web(react), native for RN. I have common styles for components, then I created interfaces. Developer could write web or native style codes. The following interface has buttonStyle. buttonStyle React.CSSProperties type for Web, ViewStyle type for RN. My issue is I cannot import these interface from common interface. I have to import these interfaces two project. It causes code duplicate. How can I import these interfaces from common file.

question from:https://stackoverflow.com/questions/65949998/import-types-two-different-project

Answer 1

In order to have a common style that applied to both the web and the native versions you need to make sure that it passes the type checks for both types. What you have now requires that buttonStyle is assignable to React.CSSProperties or ViewStyle. You need to require that it is assignable to both in order to use that style on a View and a button. Just switch your | (which is a union) to & (which is an intersection).

export interface IButtonStyle extends INavigationStyle {
    buttonStyle: React.CSSProperties & ViewStyle;
}