Why I get this ts error when I want to add custom style to my image component?-CodePudding

I want to add my own style else I want to add an css image object. But I get this err:

No overload matches this call.
  Overload 1 of 2, '(props: ImageProps | Readonly<ImageProps>): Image', gave the following error.
    Type 'false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | { ...; }' is not assignable to type 'StyleProp<ImageStyle>'.
      Type 'ViewStyle' is not assignable to type 'StyleProp<ImageStyle>'.
        Type 'ViewStyle' is not assignable to type 'ImageStyle'.
          Types of property 'overflow' are incompatible.
            Type '"visible" | "hidden" | "scroll" | undefined' is not assignable to type '"visible" | "hidden" | undefined'.
              Type '"scroll"' is not assignable to type '"visible" | "hidden" | undefined'.
  Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error.
    Type 'false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | { ...; }' is not assignable to type 'StyleProp<ImageStyle>'.ts(2769)
index.d.ts(3809, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>'
index.d.ts(3809, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>'

Code:

...
export interface IImageSlider {
  ImageStyle?: StyleProp<ViewStyle>;
}

<Image source={{uri: item.photo}} style={ImageStyle ?? s.image} resizeMode='contain' />

const s = StyleSheet.create({...})

The error comes on style={...}

What I am doing wrong ?

CodePudding user response：

You must use ImageStyle from react-native since the Image components can has props that Views doesn't

export interface IImageSlider {
  ImageStyle?: StyleProp<ImageStyle>;
}