accessibilityIgnoresInvertColors behaves the opposite way this plugin expects it to

[Victor Akinyemi]

From the React Native documentation:

Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.

But from this plugin's documentation:

true: colors of everything in this view will not be inverted when color inversion is enabled
false: the default value (unless the view is nested inside a view with accessibilityIgnoresInvertColors={true}). Colors in everything contained in this view may be inverted

Which is actually the reverse of how the prop works. The prop is false by default, so adding the prop as enforced by this rule would actually cause <Image> to be inverted.

I was curious as to whether this was a result of a breaking change in how the prop works across react-native versions, but I went back as far as v0.40, and the behaviour is the same. So it should be safe to update the plugin.

[JP]

hey @tehlordvortex thanks for opening this issue!

this can be a confusing prop so I spun up a quick Expo Snack to illustrate the behaviour..

accessibilityIgnoresInvertColors only has an effect if you are using Smart Invert. it has no effect when used with Classic Invert.

import React from 'react';
import { Image } from 'react-native';

const DisplayAnImage = () => {
  return (
    <Image
      source={require('@expo/snack-static/react-native-logo.png')}
      accessibilityIgnoresInvertColors={true}
    />
  );
}

export default DisplayAnImage;

• screen is a white background
• image is a PNG with a black background

accessibilityIgnoresInvertColors={true}	accessibilityIgnoresInvertColors={false}

so here you can see behaviour in line with the Apple docs for the property...

Setting the property to true prevents the system from inverting the colors of the view

it looks like the React Native docs just got mixed up, and they put "false" when they meant to put "true" 😅

However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false true so that these specific views won't have their colors inverted.