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;`;