CODEWITHSUNDEEP
typescriptreact-nativestyled-components
Heliton Martins
Heliton Martins

Reputation: 1221

React Native Custom TextInput with additional field in Typescript

I want to build a component that takes an Icon parameter and passes all other parameters to a styled-component Input (based on TextInput). In Javascript, it's quite straightforward:

import React from 'react';
import { TextInput } from 'react-native';
import styled from 'styled-components/native';

const Input = styled.TextInput`
  color: #268596;
`;

export default ({ Icon, ...props }) => (
  <InputArea>
    <Icon fill="#268596" />
    <Input {...props} />
  </InputArea>
);

However, I want to use Typescript (in which I'm quite a beginner). I tried the following.

import React from 'react';
import { TextInputProps, TextInput } from 'react-native';
import styled from 'styled-components/native';

const Input = styled.TextInput`
  color: #268596;
`;

type InputAreaProps = {
  Icon: React.FC<React.SVGAttributes<SVGElement>>;
} & TextInputProps;

export default ({ Icon, ...props }: InputAreaProps) => (
  <InputArea>
    <Icon fill="#268596" />
    <Input {...props} />
  </InputArea>
);

I get all intellisense and autocompletion for TextInput parameters, but TypeScript isn't happy. It keeps complaining here:

    <Input {...props} />
     ^^^^^

And saying:

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<TextInputProps & RefAttributes<TextInput>, never> & Partial<Pick<TextInputProps & RefAttributes<TextInput>, never>>, "theme"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ allowFontScaling?: boolean | undefined; autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined; autoCorrect?: boolean | undefined; autoFocus?: boolean | undefined; ... 103 more ...; showSoftInputOnFocus?: boolean | undefined; }' is not assignable to type 'Omit<Omit<TextInputProps & RefAttributes<TextInput>, never> & Partial<Pick<TextInputProps & RefAttributes<TextInput>, never>>, "theme">'.
      Types of property 'style' are incompatible.
        Type 'import("/Projects/node_modules/@types/react-native/index").StyleProp<import("/Projects/node_modules/@types/react-native/index").TextStyle>' is not assignable to type 'import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").StyleProp<import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").TextStyle>'.
          Type 'TextStyle' is not assignable to type 'StyleProp<TextStyle>'.
            Type 'import("/Projects/node_modules/@types/react-native/index").TextStyle' is not assignable to type 'import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").TextStyle'.
              Types of property 'color' are incompatible.
                Type 'import("/Projects/node_modules/@types/react-native/index").ColorValue | undefined' is not assignable to type 'import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").ColorValue | undefined'.
                  Type 'unique symbol' is not assignable to type 'ColorValue | undefined'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof TextInput, DefaultTheme, {}, never, typeof TextInput>): ReactElement<StyledComponentPropsWithAs<typeof TextInput, DefaultTheme, {}, never, typeof TextInput>, string | JSXElementConstructor<...>>', gave the following error.
    Type '{ allowFontScaling?: boolean | undefined; autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined; autoCorrect?: boolean | undefined; autoFocus?: boolean | undefined; ... 103 more ...; showSoftInputOnFocus?: boolean | undefined; }' is not assignable to type 'Omit<Omit<TextInputProps & RefAttributes<TextInput>, never> & Partial<Pick<TextInputProps & RefAttributes<TextInput>, never>>, "theme">'.
      Types of property 'style' are incompatible.
        Type 'import("/Projects/node_modules/@types/react-native/index").StyleProp<import("/Projects/node_modules/@types/react-native/index").TextStyle>' is not assignable to type 'import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").StyleProp<import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").TextStyle>'

What can I do to make TypeScript happy? And where I can look to try spot these kind of things myself?

Upvotes: 3

Views: 2714

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

Can you try to wrap the TextInput in styled component instead of using dot notation. Maybe there is conflict with another TextInput somewhere.

import { TextInputProps, TextInput } from "react-native";
import styled from 'styled-components';

const Input = styled(TextInput)` // using styled()
  color: #268596;
`;

type InputAreaProps = {
    Icon: React.FC<React.SVGAttributes<SVGElement>>;
} & TextInputProps;

export default ({ Icon, ...props }: InputAreaProps) => (
  <InputArea>
    <Icon fill="#268596" />
    <Input {...props} />
  </InputArea>
);

Upvotes: 7

Related Questions