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.

Willamina

Answer 1

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

Willamina

Answer 2

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"
    ]
  },
  // ...
}

Nonchalance

The only solution that worked here! If even adding this lines to tsconfig.json not solve, just reload vscode window if using. – Amadeus

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 – Gallbladder

Answer 3

install

npm install --save @types/styled-components

Insensate

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. – Willamina

Answer 4

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.

Zackzackariah

In my case the packages were already part of the project, but I was still getting the error; reloading the window fixed it. VS Code is just quirky about recognizing existing types/packages sometimes. – Candida