Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Error with type definitions using styled-components

$
0
0

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

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>