FormidableLabs / eslint-plugin-react-native-a11y

React Native specific accessibility linting rules.
MIT License
286 stars 24 forks source link

Error with any custom components aliased as Image #92

Open FrederickEngelhardt opened 4 years ago

FrederickEngelhardt commented 4 years ago

When importing the component under an alias of Image or a named export { Image } I get the following error. Looks like the Eslint rule is looking for any component named Image and applying this rule. Is it possible to get the eslint rule to only apply to Images imported directly from react-native?

Found an element which will be inverted. Add the accessibilityIgnoresInvertColors propeslint(react-native-a11y/has-valid-accessibility-ignores-invert-colors)

Code: Image.tsx

import React from 'react'
import { Image as RNImage, ImageProps } from 'react-native'

const Image = (props: ImageProps) => (
  <RNImage accessibilityIgnoresInvertColors source={props.source} />
)

export default Image

And example area you would have an error App.tsx

import Image from 'components/Image'
const App = () => <Image source={FILE} /> // this will error saying you are not providing accessibilityIgnoresInvertColors for the image.
FrederickEngelhardt commented 4 years ago

PR incoming to add a filter to imports to verify that Image comes from react-native.

steffenkleinle commented 3 months ago

Hey, thank you for your work! Is there any chance this could still be merged/fixed? We were thinking of adding these rules to our linting, but as we are using styled-components, the rules don't really work as they should :/ Thank you!