Search code examples
javascripttypescriptreact-nativestyled-components

Error with type definitions using styled-components

I'm using styled-components in a react native project. I'm using typescript too, I installed the package and also installed the type definitions but this error is being displayed:

enter image description here

This is causing me an error as properties are not being returned. Does anyone have any idea how to solve?

Here below my package.json and my component.

"dependencies": {
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.2",
    "expo": "~41.0.1",
    "expo-splash-screen": "~0.10.2",
    "expo-updates": "~0.5.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "~2.1.0",
    "react-native-screens": "~3.0.0",
    "react-native-unimodules": "~0.13.3",
    "react-native-web": "~0.13.12",
    "styled-components": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@types/styled-components": "^5.1.12",
    "babel-preset-expo": "~8.3.0",
    "jest-expo": "~41.0.0",
    "typescript": "~4.0.0"
  },

import styled from 'styled-components/native';
import { RectButton } from 'react-native-gesture-handler';

export const Container = styled.View`
  padding: 0 30px;
`;

export const SearchContent = styled.View`
  width: 100%;
  flex-direction: row;
  align-items: center;
`;

export const Input = styled.TextInput`
  width: 100%;
  flex: 1;
  height: 36px;
  border: 1px solid #000;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  padding: 12px;
`;

export const Button = styled(RectButton)`
  background-color: #ff9000;

  align-items: center;
  justify-content: center;
  width: 50px;
  height: 36px;

  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

`;
Solution

  • Add the styled component type for react native by installing

    npm install @types/styled-components-react-native
// or 
yarn add @types/styled-components-react-native

    For configuration details, you can read their guideline.