In React Native, styled-components do not inherit props that are passed through the attrs method

Our project was recently updated to target RN072.5 and now uses 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"
}

When using the component below, TypeScript recognizes source and resizeMode as valid props

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

However, upon trying to use the components, an error is encountered:

https://i.sstatic.net/1zkPE.png

Property  source  is missing in type  {}  but required in type
FastOmit<FastOmit<Substitute<ImageProps, ImageProps & RefAttributes<Image>>, never>, never>
typescriptreact-nativestyled-components

Answer №1

While anticipating a "more effective solution," I'll share my quick and simple workaround with you if you need to "get it working quickly."

I simply marked my default properties as "optional." To get it functioning, I had to revert back to version 6.0.7 of styled-components.

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

This allows the use of <BlurImage /> without the incorrectly-typed required source. However, this is not a permanent fix, as components with numerous properties become cumbersome to write and type out. Plus, forgetting to specify the property will result in an error during execution, though not in TS.

You could also define it as 

.attrs<Partial<ImageProps>>
, but this poses even more risk, as it hides all mandatory attributes.

Answer №2

An unspecified error may arise when a mandatory prop is not passed, particularly if it is required in one of the components within the inheritance chain. The specific prop causing the error is not identified, resulting in this overload error. This is why using 

.attrs<Partial<ImageProps>>
can be beneficial as it allows for every property to be optional.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Properly Incorporating Client Libraries (TypeScript, JQuery, etc.) in Visual Studio 2019

[Updated on 16th July 2019] I'm feeling perplexed at the moment. I am diving into a .NET Core 3.x Web Application and my aim is to incorporate: jQuery TypeScript I've managed to get TypeScript up and running, but I'm facing an issue where ...

jqueryvisual-studiotypescriptclient-side

What is the best way to position Scroll near a mat row in Angular?

With over 20 records loaded into an Angular Material table, I am experiencing an issue where clicking on the last row causes the scroll position to jump to the top of the page. I would like the scroll position to be set near the clicked row instead. Is th ...

javascriptangulartypescriptuiscrollviewangular-material-table

UI thread was blocked due to withProgress being invoked from an external library function

Currently enhancing an extension that is almost finished, but facing a challenge in adding visual cues for lengthy operations. Initially suspected a missing async/await in the code, but struggling to identify the cause. The progress indicator isn't di ...

javascripttypescriptvscode-extensions

Retrieving results from PostgreSQL database using pagination technique

When I'm pagination querying my data from a PostgreSQL database, each request involves fetching the data in this manner: let lastNArticles: Article[] = await Article.findAll({ limit: +req.body.count * +req.body.page, or ...

javascripttypescriptpostgresqlexpresssequelize-typescript

Encountered an issue in Angular 2 when the property 'then' was not found on type 'Subscription'

I have been attempting to call a service from my login.ts file but I am encountering various errors. Here is the code snippet in question: login.ts import { Component } from '@angular/core'; import { Auth, User } from '@ionic/cloud-angular ...

angulartypescriptionic-frameworkionic2

Simplifying parameter types for error handling in app.use callback with Express.js and TypeScript

With some familiarity with TypeScript but a newcomer to Express.js, I aim to develop a generic error handler for my Express.js app built in TypeScript. The code snippet below is functional in JavaScript: // catch 404 and forward to error handler app.use((r ...

typescriptexpresstypes

What are the steps to releasing a React Native component on NPM?

Can you guide me through the process of creating a React Native component and uploading it to NPM? I understand that a GitHub repository is required, but what exact steps are involved? Is there a recommended folder arrangement for this? And how can I ens ...

react-nativenpm

Utilizing NextJS to efficiently route requests directly to the backend and send the responses back to the client within the

In the technology stack for my project, I am using a Next.js server for the front end and a separate back-end server to handle user data storage. When a client needs to send a request to the back end, they first make an API request to the Next.js server, ...

javascripttypescriptnext.js

The alias for the computed column is not correctly connected to the TypeORM Entity

I am currently working on extracting data from a table in a MySQL database using TypeORM for my Express.js project. In order to retrieve the data, I am utilizing the QueryBuilder. This is the implementation I have: const result = await this.repository.cr ...

mysqltypescripttypeormcalculated-columns

"Converting array into a string in TypeScript/Javascript, but unable to perform operations

After generating a string with the correct structure that includes an array, I am able to navigate through the JSON on sites like However, when attempting to access the array, it turns out that the array itself is null. Here is the scenario: Firstly, th ...

javascriptarraysjsontypescript

How to update state in React using complex objects

Within our React components, we are retrieving an object from a REST api (such as a Car), allowing users to modify it, and eventually save the changes. To streamline this process, we have developed a custom react hook for handling the state. An example im ...

javascriptreactjstypescriptreact-hooks

Using typescript, import the "anychart" library

After attempting to include the "anychart" library in my .ts file using the following import statement: import 'anychart'; I noticed that this line of code caused the entire HTML page on my local server to disappear. Here is a snippet from my ...

angulartypescriptanychart

Getting a "function is not defined" error in Angular 6 while using it within a nested function

I'm facing an issue related to typescript, where the following code is causing trouble: private loadTeams = function(){ let token = sessionStorage.getItem('token'); if(token !== undefined && token !== null && token ...

angulartypescript

Incorporating Firebase administrator into an Angular 4 project

Currently encountering an issue while trying to integrate firebase-admin into my angular project. Despite my efforts, I am unable to resolve the error that keeps popping up (refer to the screenshot below). https://i.stack.imgur.com/kdCoo.png I attempted ...

angulartypescriptfirebasefirebase-admin

Updating the checkbox status in Angular when the radio button value is changed

I need help with a feature where all the checkboxes are checked based on the value of a radio button, and vice versa when an unchecked radio button is clicked. I have tried to implement this functionality using the following code but have not been successf ...

angulartypescript

Tailor TypeScript to support various JavaScript versions

One of the advantages of TypeScript is the ability to target different versions of Javascript globally - allowing for seamless switching between transpiling ES3, ES5, or ES6. For browsers like IE that require ES3 support, it serves as the lowest common de ...

visual-studiotypescriptecmascript-6ecmascript-5ecmascript-3

The element is implicitly given an 'any' type due to the fact that a string expression cannot be used to index the following type: { "1" : { "key": string}; "2" : { "key": string};}

I have a JSON file containing IDs as keys like this: "1" : { "key": "value"}, "2" : { "key": "value"}, In my class, I import this JSON file as a data object and then use the ID passed to a method ...

typescript

Step-by-step guide to start an AngularJs application using TypeScript

I have developed an AngularJS App using TypeScript The main app where I initialize the App: module MainApp { export class App { public static Module : ng.IModule = angular.module("mainApp", []) } } And my controller: module MainApp { exp ...

javascriptangularjstypescripttypescript1.4

The FOR UPDATE clause is not functioning as intended in the SELECT query

I have been working on isolating my database to prevent multiple servers from reading or updating data in the same row. In order to achieve this, I have structured my query like so: SELECT * FROM bridge_transaction_state as bridge WHERE bridge.state IN (&a ...

mysqltypescriptnestjstypeorm

Tips for incorporating classes as a prop in material ui components

When working with material ui, I often find myself creating generic components where the styling is actually defined in a parent or grandparent component. For example: const GenericDescendant = (props: DescendantProps) => { const { classesFromAncestor ...

reactjstypescriptmaterial-uireact-proptypes