react-native: Text alpha broken in 0.57.2 on Android

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
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)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 16 (6 by maintainers)

Commits related to this issue

Workaround for facebook/react-native#21507 https://github.com/facebook/react-native/issues/21507 — committed to mjmasn/react-native-vector-icons by mjmasn 6 years ago

Most upvoted comments

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.

kelset on Nov 29, 2018

@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. 😃

yungsters on Oct 5, 2018

@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])]} />;
}

mjmasn on Oct 12, 2018

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

lukasgeiter on Dec 14, 2018

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.

xanderberkein on Nov 28, 2018

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

mjmasn on Oct 5, 2018