Typescript React-native 样式组件中的类型问题

Question

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

Edit component 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

Answer 1

flexDirection: 'row' as const

This solved the issue for me.

Answer 2

change

const RootContainer = styled.TouchableOpacity((props: IDefaultStyle)
=> ({   flexDirection: 'row',   ...props.style }))

to

const RootContainer = styled.TouchableOpacity<IDefaultStyle>`  
    flexDirection: row;
    ${...props.style}
`