FormidableLabs / eslint-plugin-react-native-a11y

React Native specific accessibility linting rules.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error with any custom components aliased as Image

FrederickEngelhardt opened this issue · comments

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.

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