Question 281564 in React native Question posted in
The official React Native documentation can be found here.

React native – styled-component does not inherit props passed through attrs method in react-native

Recently we updated our project targeting RN072.5 with the latest version of styled-components 6.0.8

"dependencies": {
  ...,
  "react": "18.2.0",
  "react-is": "18.2.0",
  "react-native": "0.72.5",
  "styled-components": "6.0.7",
  "stylis": "^4.0.0"
},
"devDependencies": {
  ...,
  "@types/react": "^18.0.24",
  "@typescript-eslint/eslint-plugin": "^5.54.1",
  "@typescript-eslint/parser": "^5.54.1",
  "@typescript-eslint/typescript-estree": "^5.54.1",
  "babel-plugin-styled-components": "^2.1.4",
},
resolutions: {
  "styled-components": "^6"
}

given the following component, typescript recognise source and resizeMode as valid props

const BlurImage = styled.Image.attrs({
  source: blur,
  resizeMode: 'stretch'
})`
  width: 100%;
  height: 100%;
`;

but when I try to use the components, it gives me the following error

enter image description here

Property  source  is missing in type  {}  but required in type
FastOmit<FastOmit<Substitute<ImageProps, ImageProps & RefAttributes<Image>>, never>, never>
Tags:

2

Answers


  1. 0

    Waiting for a "better solution" I will post you my my quick and dirty workaround if you need to "make it work ASAP.

    I just type as "optional" my default properties. I needed to downgrade styled-components to 6.0.7 version in order to make it work.

    const BlurImage = styled(Image).attrs<{ source?: ImageSourcePropType | undefined }>({
  source: blur,
  resizeMode: 'stretch'
})`
  width: 100%;
  height: 100%;
`;

    In this way <BlurImage /> can be used without the (wrongly-typed) mandatory source.
    This is not a solution btw, because components with many properties become very long to write and type. And, if you will forget to specify it, an error will be thrown during execution, but not in TS.

    You can also type it as .attrs<Partial<ImageProps>>, but this is even more dangerous, since hides all mandatory props.

    Login or Signup to reply.
  2. 0

    This is a not specific error that occurs when you forget to pass one of the mandatory props (even if it’s mandatory only on one of the components in your inheritance chain). It doesn’t tell which one, but throws this overload error.
    Thats also the reason why .attrs<Partial<ImageProps>> helps – it makes every property optional.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search