CODEWITHSUNDEEP
reactjstypescriptreact-nativestyled-components
Alessandro Macanha
Alessandro Macanha

Reputation: 711

Type error when using styled-components/native

I'm trying to configure the styled-components for my application but I'm having a problem with the types when using the 'styled-components/native'. The type display error but it works.

tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "jsx": "react",
    "types": [
      "styled-components-react-native",
      "node",
    ],
    "plugins": [
      {
        "name": "@styled/typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "padding-horizontal",
            "padding-vertical",
            "margin-vertical",
            "margin-horizontal",
            "tint-color",
            "aspect-ratio",
            "elevation"
          ]
        }
      }
    ],
    ...
  }
}

theme.ts

import pallete from './pallete';

export const theme = {
  colors: { ...pallete },
  font: {},
};

export type ThemeType = typeof theme;

styled.d.ts

import 'styled-components/native';
import type { ThemeType } from '../theme';

declare module 'styled-components/native' {
  export interface DefaultTheme extends ThemeType {}
}

App.tsx

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme } from '@src/common/theme';

function App(): JSX.Element {
  return (
    <ThemeProvider theme={theme}>
      ...
    </ThemeProvider>
  );
}

As you can see there is no types coming from the props.

enter image description here

But if I change the import and use html tags it works. enter image description here

Upvotes: 0

Views: 22

Answers (1)

Alessandro Macanha
Alessandro Macanha

Reputation: 711

It seems that the problem was with the styled-components version, changing to @5.3.3 fixed the problem.

Upvotes: 0

Related Questions