Could not find a declaration file for module 'styled-components/native'

Question

If you add styled-components to your React Native project, there's a sub-directory for the native components specifically:

import styled from 'styled-components/native`;

export const Container = styled.View`
  ...
`;

If you try to do this in a React Native TypeScript project, you'll run into the following typings error:

Could not find a declaration file for module 'styled-components/native'.

The typical approach to resolving this would be to install the @types/styled-components module in your dev dependencies, however this does not resolve the issue.

TheScrappyDev · Accepted Answer · 2022-08-10T21:40:38.900

45

https://github.com/styled-components/styled-components/issues/2099#issuecomment-749776524

The styled-components/native types moved to @types/styled-components-react-native.

So, to resolve:

npm install --save-dev @types/styled-components-react-native

or

yarn add -D @types/styled-components-react-native

edited Aug 10 '22 at 21:40

answered Jun 20 '22 at 16:52

TheScrappyDev

4,375
2
21
25

score 45 · Answer 2 · answered Aug 03 '22 at 11:35

45

If anybody has @types/styled-components-react-native installed and still gets the error maybe it helps the trick as described at https://github.com/styled-components/styled-components/issues/2370. For me it helped to add the types to tsconfig.json file:

{
  "extends": "some/tsconfig.base",
  "compilerOptions": {
    // ...
    "types": [
      "jest",
      "cypress",
      "@testing-library/cypress",
      "@types/styled-components-react-native"
    ]
  },
  // ...
}

answered Aug 03 '22 at 11:35

Mišo

2,327
1
23
25

3

The only solution that worked here! If even adding this lines to ```tsconfig.json``` not solve, just reload vscode window if using. – fellyp.santos Aug 15 '22 at 03:54
When I do this, I get errors on all my styled-components that accept children. `Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes` – SeanMC Oct 21 '22 at 01:53
Works for me as well! – Sonny Recio Jun 23 '23 at 09:25

score 3 · Answer 3 · answered Mar 25 '23 at 06:29

3

install

npm install --save @types/styled-components

answered Mar 25 '23 at 06:29

Gouranga Satapathy

308
2
4

You probably don't want to add the `--save` flag, since it will save it to your `dependencies` instead of `devDependencies`. The difference being that `devDependencies` are not used in production. Since TypeScript is not used at runtime you won't any `@types` in production. – TheScrappyDev Apr 13 '23 at 18:25

score 0 · Answer 4 · answered May 30 '23 at 10:28

I was facing the same error:

To remove this error you can install @types/styled-components using the below command.

npm install --save @types/styled-components

If still your error persists, then you can below the VS code using below steps:

Run Ctrl+Shift+P -or- ⌘+shift+P

Then type: Developer: Reload Window and press enter. Your error would be auto-resolved.

Could not find a declaration file for module 'styled-components/native'

4 Answers4

Linked