What is the best way to define the type for props in styled components for React Native?

Working with styled components in React Native, I've implemented a boolean value named isTablet. This value is then passed as a prop called platform to the IdTextInput component, which utilizes the TextInput tag.

Though this setup functions correctly, it triggers a type warning:

Property 'platform' does not exist on type 'ThemedStyledProps<TextInputProps & RefAttributes<TextInput>, DefaultTheme>'
 No overload matches this call.
Overload 1 of 2, '(props: Omit<Omit<TextInputProps & RefAttributes<TextInput>, never> & Partial<Pick<TextInputProps & RefAttributes<TextInput>, never>>, "theme">....

I attempted to resolve this by defining a boolean type in props, but this approach failed. How should I go about fixing this issue?

const IdTextInput = styled.TextInput`

        width: ${(props) =>
                props.platform ? 50 : 100}%;
        `;


const isTablet = DeviceInfo.isTablet();

return (
    <IdTextInput
    platform={isTablet}
    />
)

Answer №1

Follow the instructions in the documentation to include a custom prop.

https://styled-components.com/docs/api#using-custom-props

interface Props {
  device: string;
}

const CustomButton = styled.button<Props>`
  width: ${(props) => (props.device === 'mobile' ? 50 : 100)}%;
`;

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

What is the best way to implement an onClick event listener in a TypeScript React application?

Is there a way to properly add an onClick event listener to a div element in my code snippet below? useEffect(() => { if (ref.current === null) { return; } const handleClick = (el: HTMLDivElement, e: MouseEvent) = ...

Incorporating Styled Components in an NPM Package

I'm facing a dilemma and I'm not sure if it's my own issue, a problem with the library, or simply not possible in general (although it should be). Here's what I'm trying to accomplish: I've utilized Material UI to create a "L ...

New approach in Typescript: Enhancement of child class with additional Event Listener overloads

One of my classes is structured like this: interface A extends EventEmitter{ on(event: "eventA", listener: () => void): this; } There is another class defined as follows: interface B extends A{ on(event: "eventB", listener: ...

Typescript with Mongoose: I am currently attempting to separate schema, methods, and statics into different files. However, I am facing an issue where the types are set to '

Currently, I am in the process of breaking down my single-file Mongoose schemas with statics and methods. I stumbled upon a helpful tutorial for organizing this structure: here. As someone new to TypeScript, I am already experiencing the benefits it brings ...

Guidance on transferring information from a parent component to an Angular Material table child component

Currently, I am implementing an angular material table with sorting functionality. You can view the example here: Table Sorting Example I intend to transform this into a reusable component so that in the parent component, all I have to do is pass the colu ...

Utilize the input parameter within the form

In my dialog, there is a form component to which I pass a User object. The intention is to prepopulate the form fields with values from this object when the form is opened after passing the object via a click event. Additionally, upon constructing the form ...

What are the Typescript object types where the keys are functions that take a single generic argument consistently?

Explaining this concept in English is quite challenging, but here's what I'm aiming for: const operations = { store: (input: T): T => { return input; }, discard: (input: T): void => { console.log(input); } } In both fun ...

Incorporate a JavaScript library into a personalized JavaScript file that is utilized within my Angular2 project

Integrating Machine Learning into my Angular2 project using the "synaptic.js" JavaScript library is my goal. After executing the command npm install synaptic --save I intend to execute a custom javascript file (myJsFile.js): function myFunction() { v ...

Newest version of Angular cli encounters issues when trying to initiate a new application in Windows

Attempting to create a new Angular app on my Windows 10 machine using the command ng new myapp (cli version 9.0.1) with Angular v9 and Node version v12.15.0. I have already tried several solutions from Stack Overflow, including: Uninstalling Angular CLI ...

Using TypeScript and controllerAs with $rootScope

I am currently developing an application using Angular 1 and Typescript. Here is the code snippet for my Login Controller: module TheHub { /** * Controller for the login page. */ export class LoginController { static $inject = [ ...

I'm attempting to transfer information from a "blog" to "blogs", but encountering a hiccup in the process

I encountered the following issue: **Error1:** Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe? **Error2:** this ...

Having issues with ngx-Bootstrap 4 dropdown and navbar functionality in Angular 7

I've been attempting to integrate Bootstrap 4 into my Angular 7 project, but I'm facing issues where the styles seem to be overridden by Bootstrap styles. The navigation bar and dropdown box also don't seem to function properly. To add Boot ...

Integrate child component properties within the parent component

Looking to create a wrapper component that selects specific props from an inner component and includes additional custom props. The issue is that using pick will generate a type rather than an interface, limiting the ability to add more keys. How can I wor ...

Higher-Order Component integrated with HTMLElement

Check out this complex code snippet I created: export type AdvancedHoverElementProps<TElement extends HTMLElement> = React.HTMLProps<TElement> & { hoverDuration: number, onHoverChanged: (isHovering: boolean) => void }; export ...

Tips on accessing fields for union types that are passed to a function in TypeScript

I'm currently diving into the world of TypeScript, teaching myself by putting my newfound knowledge into practice. Below is the code I'm working on, but I've hit a roadblock trying to access the fields of the type passed to the function. C ...

Ways to access file attributes and transfer a file in ionic 4?

I am facing an issue while attempting to transfer a file from my mobile device to Google bucket using Ionic 4. Although I can successfully upload the file, I am struggling to extract its properties from the file object. Below is the method I am using: as ...

Saving a group of selected checkboxes as an array in Ionic: a step-by-step guide

I am working on a simple form with checkboxes and I need to send only the checked boxes to TypeScript. However, when I attempt to save the data by clicking the save button, I encounter an error message {test: undefined} Below is the form layout: <ion-c ...

What is the process for initiating a Fargate task once a database instance has been successfully provisioned using AWS CDK

I am currently working on an AWS CDK stack that involves creating a Fargate task (using ApplicationLoadBalancedFargateService) from a docker container. The container houses a web application that needs to connect to a database. Upon deploying the CDK stack ...

Authentication with Angular 4 and Firebase 2

I'm having some difficulty learning how to authenticate users using Angular and Firebase. When I run the Angular app using ng serve in the terminal, I keep getting this ERROR message: ERROR in /Users/.../Desktop/angular/fireauth/node_modules/angul ...

Displaying DjangoCKEditor within a React CKEditor

Is it possible to display the RichTextField from Django CKEditor using CKEditor from ckeditor5-react? In my understanding, we can manually render a Django field as long as the name and id match the form field. However, I am unsure how to reproduce Django ...