CODEWITHSUNDEEP
reactjstypescriptreact-nativestyled-components
gokulsgr
gokulsgr

Reputation: 178

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

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

Upvotes: 1

Views: 1463

Answers (2)

Echo
Echo

Reputation: 631

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;

Upvotes: 0

Gleydson Rodrigues
Gleydson Rodrigues

Reputation: 55

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.

Upvotes: 3

Related Questions