React-native: Text alpha broken in 0.57.2 on Android

[mjmasn]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

  React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
      CPU: x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
      Memory: 709.84 MB / 15.54 GB
      Shell: 4.3.48 - /bin/bash
    Binaries:
      Node: 8.11.0 - ~/.nvm/versions/node/v8.11.0/bin/node
      Yarn: 1.10.1 - /usr/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3
        API Levels: 16, 19, 22, 23, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4907809
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.2 => 0.57.2 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-create-library: 3.1.2
      react-native-git-upgrade: 0.2.7

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.

This is a regression, previously text with colour containing an alpha value would be displayed correctly, now it looks (visually) like the alpha was blended on a dark or black background.

e.g. View with a blue background and rgba(255,255,255,0.2) text on it - the text would display as a light blue. Now it displays as a shade of dark grey (or lighter grey depending on alpha value).

0.57.1 | 0.57.2
---|---
|

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

https://github.com/mjmasn/TextAlpha0571 (0.57.1 - working)
https://github.com/mjmasn/TextAlpha0572 (0.57.2 - broken)

[kelset]

Uhm this is a weird one 🤔

Do you have any idea which commit of the ones cherry picked (you can check the commit history here) could have caused this?

The only one that seem somewhat related is https://github.com/facebook/react-native/commit/65e4e674fca7127fd7800ae011cab449561f475b

But I'm not sure why it should affect your code.

[mjmasn]

@kelset that was my first thought but gut feeling now is it could be https://github.com/facebook/react-native/commit/b7ba2255df109b9cb8999d0e1584bc2b95a4e07c (which would be a shame as that's a great method for overlaying text on images without a 'scrim'). I'm wondering if maybe a shadow with 0 radius is always displaying under the text even if one is not specified?

I will try to get set up for building from source soon so I can be a bit more helpful in these situations :smile:

[kelset]

ah nice catch, it could very well be!
Can you try to revert the change locally and let me know if it fixes it?

[mjmasn]

@kelset actually yeah, setting textShadowColor: '#2222ee', in styles.welcome seems to fix the problem, so I guess that's a decent workaround for now, just set textShadowColor to backgroundColor value.

[idk-whatever]

It seems like that commit causes text shadows to be enabled by default. (ReactBaseTextShadowNode.java#L261).

Can't you disable them by setting textShadowRadius: 0 in the style instead of setting the textShadowColor?

[mjmasn]

@idk-whatever yep that works and is a much easier workaround, thanks :+1:

[mjmasn]

Worth mentioning that _all_ text now looks slightly bloated even without the alpha, I guess the shadow is peeking out around the edges slightly...

[kelset]

Uhm understood - @yungsters should we consider reverting the cherry pick in 0.57.3? I feel like potentially the fix is easy so not sure which approach should be better 🤔

[yungsters]

@kelsey One of our beloved release engineers at Facebook used to say… if you’re going to be around to fix it, do whatever you want.

Let’s fix forward if the fix is easy. :)

[Batistleman]

Any workarounds for this? For the moment, all texts are blurry in our app.

[mjmasn]

@Batistleman you need to add textShadowRadius: 0 to the styles on any <Text /> node (and <Icon /> if you're using react-native-vector-icons as that uses <Text /> under the hood).

Bit of a pain if you have a large app... For a slightly quicker way we ended up creating two new components, also called Text and Icon then in the render function for those is just render a RN Text or RNVI Icon with textShadowRadius: 0. We then had to update every import {Text} from 'react-native' to point to the new component, but at least we didn't have to update every single style or use of <Text /> in every file...

Off the top of my head something like this should work:

// Text.js
import react from 'react';
import {Text} from 'react-native';

export default function Text(props) {
  const {style} = props;
  return <Text {...props} style={[{textShadowRadius: 0}, ...(Array.isArray(style) ? style : [style])]} />;
}

[daimashenjing]

"react-native": "0.57.3",
升级成0.57.3之后所有文字变成粗体了 显得很臃肿

[xanderberkein]

Bumped into this as well.

Temporary workaround is to put following snippet in the constructor of your main App.js:

if (Platform.OS === 'android') {
  const oldRender = Text.render;
  Text.render = function render(...args) {
    const origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
      style: [{ textShadowRadius: 0 }, origin.props.style],
    });
  };
}

This will put { textShadowRadius: 0 } on all Text components rendered in your app, removing their shadow.

[kelset]

I think that this commit that landed 3 days ago may be the solution https://github.com/facebook/react-native/commit/fd78eee11b71799aa7fa57bbd70d59c6c642c3b3

Can anyone confirm that? I'll try to have it in 0.57.8.

[lukasgeiter]

@kelset It's fixed for me in v0.57.8

[kelset]

Awesome :) closing :)