Enhance your design in React Native using TypeScript by updating the style based on the state

Struggling with updating the style property in React Native using TypeScript. When trying to update it from the state, an error is encountered.

const [VerifiedCheck, setIsVerifiedCheck] = useState("flex");

<View style={{display: VerifiedCheck}}>
  <Icon name={'check-circle'} size={24} color={'green'} />
</View>

The error occurs at style:

No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ display: string; }' is not assignable to type 'StyleProp<ViewStyle>'.
      Types of property 'display' are incompatible.
        Type 'string' is not assignable to type '"none" | "flex" | undefined'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ display: string; }' is not assignable to type 'StyleProp<ViewStyle>'.
      Types of property 'display' are incompatible.
        Type 'string' is not assignable to type '"none" | "flex" | undefined'.ts(2769)
index.d.ts(2522, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>’
index.d.ts(2522, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>’
typescriptreact-nativereact-native-iosreact-native-state

Answer №1

The error message states,

Type 'string' is not assignable to type 
'"none" | "flex" | undefined'.ts(2769)

There seems to be an issue in this line of code:

const [VerifiedCheck, setIsVerifiedCheck] = useState("flex");

When you define VerifiedCheck, it defaults to a string type - which is the default behavior for most cases. For instance:

const [title, setTitle] = useState("default title");

This leads typescript to interpret title as a string. To avoid this warning, you can explicitly declare the possible types like so:

const [VerifiedCheck, setIsVerifiedCheck] = useState<"none" | "flex" | undefined>("flex");

<View style={{display: VerifiedCheck}}>
  <Icon name={'check-circle'} size={24} color={'green'} />
</View>

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

Encountering "Duplicate identifier" issues when using Angular2 and TSD

I am currently in the process of migrating a project from Angular 1 to Angular 2. The project involves client and server code, with some shared components. My goal is to implement Angular 2 on the client side by following the guidelines outlined in the ng2 ...

angularjsnode.jstypescriptangulartsd

Why does 'FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory' occur with npm start including azure?

I have set up a React-Redux web application using typescript. Everything was working fine until I decided to integrate Azure by installing it using npm (npm install azure). After including it in my code like this: const Azure = import('azure') H ...

node.jsazuretypescriptwebpackwebpack-dev-server

The attribute 'set' is not found on the Set data type

An error message popped up saying: TS2339: Property 'set' does not exist on type Set<> Below is the code snippet that triggered the error: const id = 123; const a: Map<string, Set<File>> = new Map(); if (a.has(id)) { a.set ...

typescript

Is the neglected property being discarded?

First things first, let's talk about my class: class FavoriteFooBar { ... isPreferred: boolean = false; constructor() { this.isPreferred = false; } } Using a utility library called Uniquer, I arrange a list of FavoriteFooBar instances to pr ...

javascriptjsonangulartypescriptlodash

The elements within the NativeScript components are failing to show the data received from the Django API

My Django API is set up to provide a list of movies titles with their corresponding IDs. I've implemented a movie service in TypeScript that retrieves the list of movie titles and IDs using the GET operation. In my NativeScript project, I have two f ...

djangotypescriptnativescript

Subscribing to a push notification service and incorporating pipes afterward

Scenario: I have come across a scenario where I need to incorporate additional commands in a Subscription using the rxjs Observable system after it has been initiated. In this case, the application I am working on must passively monitor a push notificat ...

typescriptrxjsrxjs-pipeable-operatorsrxjs-subscriptions

Why does TypeScript combine the types of both indices when yielding a tuple?

In my generator function, I am yielding an array containing values of type [number, object]. By using a for...of loop to iterate over the function and destructuring the values with for (const [k, v] of iterator()), I noticed that the type of v is number | ...

typescriptdestructuringfor-of-loop

Strange actions observed in JavaScript addition operations

In my Angular application, I have the following TypeScript function: countTotal() { this.total = this.num1 + this.num2 } The value of num1 is 110.84 and the value of num2 is 5.54. I determined these values by watching this.num1 and this.num2 in the C ...

javascriptangulartypescriptmath

When converting a .ts file to a .js file using the webpack command, lengthy comments are automatically appended at the end of

As a backend developer, I recently delved into UI technologies and experimented with converting TypeScript files (.ts) to JavaScript files (.js) using the webpack command. While the conversion works well, the generated .js file includes lengthy comments at ...

javascriptangulartypescriptionic-frameworkwebpack

The TypeScript decorator fails to apply on the subclass

Issue As I work on my project, I encountered an error while trying to create a decorator for a class: Error: Type 'typeof Controller' is not assignable to type 'typeof MainController'. Cannot assign an abstract constructor type to ...

typescriptdecorator

Experience the magic of Angular combined with the versatile ng-image-slider; displaying a single image at a

I want to customize my ng-image-slider in my app so that only one image is displayed at a time, while also ensuring that it remains responsive. Besides adjusting the "imageSize" input and manipulating the width/height of the images, what other options do I ...

angulartypescriptresponsive

Error in NestJS: Module 'html' not found

I encountered an issue while attempting to display a basic static HTML file (no template) and I'm puzzled by the error message. Despite numerous attempts, I have been unable to resolve the error. src/modules/app.module.ts import { Module } from ' ...

node.jstypescriptexpressnestjs

Unlock hidden Google secrets within your Angular application using Google Secret Manager

Can the Google Secret Manager API be accessed with a simple API call using an API key? https://secretmanager.googleapis.com/v1/projects/*/secrets/*?key=mykey returns a 401 unauthenticated error. While the Node.js server powering the Angular app uses the c ...

angulartypescriptgoogle-secret-manager

Issues encountered when attempting to refresh page with react-router-dom

I successfully implemented a private route system in my React application using react-router-dom. However, I encountered an issue where upon reloading a page, it briefly redirects to /login before properly displaying the page. How can I resolve this unexpe ...

reactjstypescriptfirebaseroutesreact-router-dom

`Why does the npm test command in vue2 source code fail with the error "Type ... is not assignable to type ..."?`

After cloning the Vue source code from github using git clone, I proceeded to install dependencies by running yarn. However, when I ran npm test, the test failed. https://i.sstatic.net/aZXBg.png Does anyone have insight on why this error occurred and how ...

typescriptvue.js

Prisma Hack: excluding properties in type generation

EDIT hiding fields in the TypeScript definitions may pose a hidden danger: inaccessible fields during development with intellisense, but accidentally sending the full object with "hidden" fields in a response could potentially expose sensitive data. While ...

javascripttypescriptnext.jsprisma

Tips for creating a Cypress command chain that includes parameters

Looking for an expander with its caption to click on it. Successfully working: cy.get('[caption="Radio Button"] > .expander-container').click(); Want to turn this into a command. Cypress.Commands.add('findExpanderByName', ...

angulartypescriptcypress

"Retrieve the value of the component from the result by using its unique id within the Angular

this.crudService.get('user.php?mode=test') .subscribe((data:any) => { { for (var key in data) { this[key] = data[key]; } }; } ); Previously functioning on Angular 7, I am encountering an error in Angular 13 (refer to the image). ...

arraysangulartypescriptkey

Angular - Title Name Case-Based

I have a dataset in Angular that looks like this: data = [ {"id": "1", "firstname": "Test", "lastname": "Test2", "sex": "Female"}, {"id": "2", "first ...

htmlangulartypescript

Enabling Typescript to identify additional methods introduced via Object.prototype

I am hoping for typescript to detect the changes I make to Object.prototype. Ideally, I want to be able to do something like: Object.prototype.l = function (title: string) => { console.log({[title]: this}) return this } const bar = foo().l(&apos ...

javascriptnode.jstypescriptprototypejsdoc