- Published on
- ·4 min read
React Native - TS7016 ：Could not find a declaration file for module 'styled-components/native'
I apologize in advance for any awkward expressions in English. 🙏
English is not my native language, and I have relied on ChatGPT's assistance to proceed with the translation.
Error Message
While developing React Native (TypeScript) using the import styled from 'styled-components/native'; statement, you may encounter the following error message (when using IntelliJ):
TS7016: Could not find a declaration file for module 'styled-components/native'. '..../node_modules/styled-components/native/dist/styled-components.native.cjs.js' implicitly has an 'any' type.
Checking Installation Status
I searched and found recommendations to install the @types/styled-components-react-native module, but I had already installed all the related modules.
For your reference, here is what I had installed regarding styled-components:
npm install styled-components
npm install --save-dev @types/styled-components @types/styled-components-react-native
The configured package.json was as follows:
{
"name": "com.example.sample",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"react": "18.2.0",
"react-native": "0.71.8",
"react-native-safe-area-context": "^4.5.3",
"react-native-screens": "^3.20.0",
"styled-components": "^5.3.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.2.0",
"@tsconfig/react-native": "^2.0.3",
"@types/jest": "^29.5.1",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"@types/styled-components": "^5.1.26",
"@types/styled-components-react-native": "^5.2.1",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.9",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "^4.9.5"
},
"jest": {
"preset": "react-native"
}
}
Even though it is installed, it is not being recognized.
This issue persists even after restarting the IDE and even after removing the node_modules folder and running npm install again.
Solution
I resolved the issue by adding the compilerOptions to the tsconfig.json file.
(It should ideally be included automatically during installation, but whether it needs manual configuration or not, I'm not sure about the underlying cause.)
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"types": ["react-native", "jest", "styled-components-react-native"]
}
}
In the existing code, there was only an extends configuration.
After adding the compilerOptions as shown above, the error disappeared.
Additionally, if you check the @tsconfig/react-native/tsconfig.json file that the extends is referring to, you can see that the types section is missing styled-components-react-native as follows:
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "React Native",
"_version": "2.0.3",
"compilerOptions": {
"types": ["react-native", "jest"],
... ommitted ...
}
... ommitted ...
}
Conclusion
Configuration issues can have various causes, and this solution may not be applicable in all cases.
I'm leaving this information here in case it might be helpful to others who find themselves in a similar situation.