How can I specify the type for props in React Native styled component?-CodePudding

I am using styled components in React native. I have a boolean value called isTablet.

I created a component called IdTextInput that uses the TextInput tag. At this time, I passed the isTablet boolean value called platform as props from styled-component.

However, if I do this, it works, but a type warning occurs.

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">....

So I put a boolean type in props, but it didn't work. How do I fix my code? below is my code

        const IdTextInput = styled.TextInput`

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


        const isTablet = DeviceInfo.isTablet();

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

CodePudding user response：

Add a custom prop as mentioned in the documentation.

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

interface Props {
  platform: boolean;
}

const IdTextInput = styled.TextInput<Props>`
  width: ${(props) => (props.platform ? 50 : 100)}%;
`;