I am trying to create a TouchableOpacity using styled-component in react-native and was working successfully but since i am using typescript its showing some error when using style flowDirection: 'row'
here is my code
interface IDefaultStyle { style?: object}const RootContainer = styled.TouchableOpacity((props: IDefaultStyle) => ({ flexDirection: 'row', ...props.style}))And the type error is
Argument of type '(props: IDefaultStyle) => { flexDirection: string; } | { flexDirection: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
And when i remove flexDirection and add any other style type. the error is gone.
The same issue is seen in styled-components Text when fontWeight: 'bold' is given
My package.json
{"name": "@appmaker/ui","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ." },"peerDependencies": {"react": "16.9.0","react-native": "0.61.2" },"devDependencies": {"@babel/core": "7.6.4","@babel/preset-typescript": "^7.7.2","@babel/runtime": "7.6.3","@react-native-community/eslint-config": "0.0.3","@types/jest": "^24.0.20","@types/react": "^16.9.11","@types/react-native": "^0.60.22","@types/react-test-renderer": "^16.9.1","@types/styled-components": "^4.1.20","@typescript-eslint/eslint-plugin": "^2.5.0","@typescript-eslint/parser": "^2.5.0","babel-jest": "24.9.0","babel-plugin-styled-components": "^1.10.6","jest": "24.9.0","metro-react-native-babel-preset": "0.51.1","prettier": "^1.18.2","react-test-renderer": "16.9.0","tslint": "^5.20.0","tslint-config-prettier": "^1.18.0","tslint-config-standard": "^8.0.1","tslint-eslint-rules": "^5.4.0","tslint-react": "^4.1.0","typescript": "^3.6.3","typescript-plugin-styled-components": "^1.4.3" },"jest": {"preset": "react-native","moduleFileExtensions": ["ts","tsx","js","jsx","json","node" ] },"bit": {"env": {"compiler": "bit.envs/compilers/react-typescript@3.0.27" },"componentsDefaultDirectory": "components/{name}","packageManager": "npm" },"dependencies": {"i": "^0.3.6","npm": "^6.12.0","prop-types": "^15.7.2","react-native-image-slider": "^2.0.3","react-native-image-slider-box": "^1.0.5","react-native-snap-carousel": "^3.8.3","styled-components": "^4.4.0" }}it will be greatly appreciated if someone could help me with this
Editcomponent usage
/** * ## AuthorView | SellerView * Component to show Author info * @param props */const AuthorView = (props: IProps) => { const { name, style, imageUrl, rating, subtext, onPress } = props // if imageUrl is not provided use default star icon const imageSource = imageUrl ? { uri: imageUrl } : require('../../icons/star-grey.png') return(<RootContainer onPress={onPress} style={style}><ImageViewContainer><ImageView defaultImage={imageUrl ? false : true} source={ imageSource } /></ImageViewContainer><RightContainer><Name>{name}</Name><View style={{ flexDirection: 'row' }}> {rating && <RatingView style={{ marginRight: 3 }} rating={rating} />}<SubText>{subtext}</SubText></View></RightContainer></RootContainer> )}export default AuthorView