[Android] Since 0.63.1 images won't render on Android after subsequently applying & removing tintColor

[mattijsf]

Description

Since upgrading to react-native 0.63.1 (coming from v0.62.2) there is an issue on Android when subsequently applying & removing tintColor to an <Image>. When doing this on Android the rendered images disappears while on iOS it renders in the original color as expected. See gifs below.

React Native version:

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 1.18 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.2 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /Users/mattijs/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.0, 29.0.0, 29.0.0, 29.0.2, 29.0.3
      System Images: android-21 | Intel x86 Atom_64, android-21 | Google APIs Intel x86 Atom_64, android-22 | Intel x86 Atom_64, android-24 | Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_141 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.1 => 0.63.1 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Load up an <Image> component with some image
2. Apply tintColor style e.g tintColor: "lightgrey"
3. Remove the tintColor (e.g after some arbitrary delay)

Expected Results

After step 3 I expect the image to appear without any tintColor applied and being rendered with original colors. However on Android the image is no longer visible after step 3 while on iOS it renders correctly.

Code example

export default (): JSX.Element => {
  const [applyTint, setApplyTint] = useState(false)

  useEffect(() => {
    setTimeout(() => { setApplyTint(true) }, 2500)
    setTimeout(() => { setApplyTint(false) }, 5000)
  }, [])

  return (
    <View style={{ ...StyleSheet.absoluteFillObject, backgroundColor: "grey" }}>
      <Image
        source={{
          uri:
            "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/440px-React-icon.svg.png",
        }}
        resizeMode="contain"
        style={[StyleSheet.absoluteFill, applyTint ? { tintColor: "lightgrey" } : {}]}
      />
    </View>
  )
}

Screenshot

Expected behavior: Launch > Original Logo (2.5s) > Tinted Grey Logo(2.5s) > Original Logo (2.5s)

iOS (Good)

Android (Broken)

[mattijsf]

The actual use case for this pattern is applying a tintColor for the loading / placeholder image via defaultSource after we track onLoadEnd and remove the tintColor so the source image is rendered without tinting. This worked in 0.62.2 but broke in 0.63.1 on Android.

[WadhahEssam]

Same here ✋

[mattijsf]

I've tried diffing 0.62 with 0.63 but couldn't find anything obvious that could be related to this. I hope someone within the team can have a look at this 🤞

[efstathiosntonas]

@mattijsf I think the issue relies in these changes:
f4de458#diff-470aef23c677dd2591172bcb4209a2d7

[Mayaela]

I have a similar issue and the last version of RN as well. Some of my images start not showing up on android unless I give them an explicit tint-color. The png files I use do have colors and show up correctly on ios. The image takes up the space it's supposed to but it isn't visible without an explicit tint color.

[kepop1]

We've just encountered this issue, image renders fine on first paint, then dissapears.

We found applying a tintColor explicitly works as a short term fix.

But you can also add a key prop to the image component works, forcing a re-render of the image 👍

Short term fix, but it works for what we need right now 😅

[mpareja]

The issue remains in 0.63.2.

The following is an example workaround. It forces a re-render when switching between selected and not selected, but otherwise appears to perform okay:

        {location === selected
          ? <Image source={image} key='selected' />
          : <Image source={image} style={{ tintColor: 'lightgrey' }} />}

[LogicAnalysis]

I have the same issue. It's unfortunate that this is still not resolved despite being reported so long ago.

[beqramo]

Hi, I used tintColor=false and it worked for me. just mark tintColor in defaultProps as false

[fabOnReact]

PR #29830

Unluckily I find out there is already a pr #29830 for this issue
I reviewed the pr #29830 and seems the pr would fix also this issue

---

DETAILED EXPLANATION

The issue is caused by this line of code. The class constructor will use 0 (TRANSPARENT color) if no default color is provided.

https://github.com/facebook/react-native/blob/33b600236a477ee7fc758cb1726f65bb3badcbb1/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManagersPropertyCache.java#L194-L200

The logic above changes style={{tintColor: null}} or {} in {{tintColor: 'transparent'}}.

The null value would trigger clearColorFilter on GenericDraweeView and restore the original color

Removes the image's ColorFilter.

https://github.com/facebook/react-native/blob/595b569eadbdfc57778caf055172fb20c6f9814d/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.java#L214-L215

Changing the code to trigger clearColorFilter in transparent would fix this issue, but make it impossible to use tintColorTransparent

if (tintColor == (null || 0)) { 
   view.clearColorFilter(); 
}

CLICK TO OPEN TESTS RESULTS

after 3 seconds	after 5 seconds

I'm trying to write a pr that sets the default color to background View color or maybe accept null as default and avoid changing color in that case. The pr will also fix the bug #29378 which is the same issue.

[tareqdayya]

@kepop1 I haven't tried the following, but perhaps it could work. Maybe instead of re-rendering by generating a random key every time, you can use a key from state that is generated only when the condition that makes the tintColor revert changes? Something along these lines:

`
const ImageButton: FC = (props) => {
const { disabled } = props;

const [imageKey, setImageKey] = useState();

// every time the tintColor reverts to undefined, a new imageKey is generated and the image re-renders
useEffect(() => {
if (!disabled) setImageKey(key-${Math.random() * 1000});
}, [disabled]);

return (

<Image
key={imageKey}
source={'whatever'}
style={{ tintColor: disabled ? 'grey' : undefined }}
/>

);
};
`

Cuz I noticed that the image flashes every time the component re-renders.