Getting "Types of property 'accessibilityRole' are incompatible" error

Question

Am getting typescript error when i extend th TextProps from react-native and pass it to the Text component created by styled-component

  Overload 1 of 2, '(props: Omit<Omit<ActivityIndicatorProps & RefAttributes<ActivityIndicator> & { styles?: string | undefined; }, never> & Partial<...>, "theme"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ styles?: string | undefined; animating?: boolean | undefined; color: ColorValue; hidesWhenStopped?: boolean | undefined; size?: number | "small" | "large" | undefined; ... 52 more ...; accessibilityIgnoresInvertColors?: boolean | undefined; }' is not assignable to type 'Omit<Omit<ActivityIndicatorProps & RefAttributes<ActivityIndicator> & { styles?: string | undefined; }, never> & Partial<...>, "theme">'.
  Types of property 'accessibilityRole' are incompatible.

rn-snippet

import styled from 'styled-components/native';

import { TextProps as RNTextProps } from 'react-native';

interface TextProps extends RNTextProps {
}

const TextStyled = styled.Text``;

const Text = (props:TextProps) => {
    const { children, ...rest } = props;
    return (
        <TextStyled {...rest}>
            {children}
        </TextStyled>
    );
};

export default Text;

and packages.json

"react-native": "0.67.1",
"@types/react-native": "^0.66.15",
"styled-components": "^5.3.3",
"@types/styled-components-react-native": "^5.1.3",

Thanks in Advance

Answer 1

I'm solving it like this nowadays:

import styled from 'styled-components/native';
 
import { TextProps as RNTextProps, Text as RNText } from 'react-native';

interface TextProps extends RNTextProps {
}

const TextStyled = styled(RNText)``;

const Text = (props:TextProps) => {
    const { children, ...rest } = props;
    return (
        <TextStyled {...rest}>
            {children}
        </TextStyled>
    );
};

export default Text;

I think this is not the ideal solution but it works.

Answer 2

In addition to Gleydson's answer, you can also add the angle brackets after the wrapper if you plan on passing props that will conditionally render some styles.

interface ICustomProps extends RNTextProps {
    error?: boolean;
    // other props
}

const TextStyled = styled(RNText)<ICustomProps>`
    color: ${({error}) => error ? 'red':'black'}
`

// This pattern is slightly different but I tested works the same
const Text: FC<ICustomProps> = ({children, ...rest}) => {
    return (
        <TextStyled >
            {children}
        </TextStyled>
    )
}

export default Text;