Error with type definitions using styled-components

Viewed 852

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;

`;
1 Answers

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.

Related