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:

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;

`;