EAS Build: unwanted opacity for Text elements

[lilioque]

Platform: Android

Since I started building my app using EAS build, text in some of my components has become semi-transparent. Everything looks OK when I launch the app in Expo Go and everything was OK when I used 'expo build' command.

My dependencies from package.json:

"dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "expo": "^41.0.0",
    "expo-cli": "^4.4.6",
    "expo-constants": "~10.1.3",
    "expo-file-system": "~11.0.2",
    "expo-linking": "~2.2.3",
    "expo-localization": "~10.1.0",
    "expo-status-bar": "~1.0.4",
    "i18n-js": "^3.8.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-animatable": "^1.3.3",
    "react-native-elements": "^3.3.0",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.1.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.0.0",
    "react-native-web": "~0.13.12",
    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "expo-splash-screen": "~0.10.2",
    "expo-updates": "~0.5.4",
    "react-native-unimodules": "~0.13.3"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },

Example of the affected component (it appears in a parent component inside ScrollView with contentContainerStyle={styles.dialogueContainer} :

const MessageBubble = ({message, imageSource}) => {
    return (
        <Animatable.View 
            animation="fadeIn"
            duration={1500} 
            delay={0}
        >
            <View style={message.owner ? styles.messageContainer : [styles.messageContainer, styles.messageContainerPet]}>
                <Avatar 
                    rounded 
                    size='medium'
                    source={message.owner ? IMAGES['baby'] : imageSource} 
                />
                <View style={message.owner ? styles.bubble : [styles.bubble, styles.bubblePet]} accessible={false}>
                    <Text style={message.owner ? styles.bubbleText : styles.bubbleTextPet}>{message.text}</Text>
                </View>     
            </View>
        </Animatable.View>      
    );
};

Styles for that component and the parent ScrollView:

dialogueContainer: {
        paddingTop: 10,
        backgroundColor: Colors.backgroundColor
    },
    messageContainer: {
        flex: 1,
        paddingVertical: 10,
        paddingHorizontal: 15,
        flexDirection: 'row',
    },
    messageContainerPet: {
        flexDirection: 'row-reverse',
    },
    bubble: {
        marginHorizontal: 10,
        marginTop: 18,
        padding: 10,
        width: '70%',
        borderRadius: 10,
        borderTopStartRadius: 0,
        backgroundColor: Colors.neutralColorLightest,
    },
    bubblePet: {
        borderTopStartRadius: 10,
        borderTopEndRadius: 0,
        backgroundColor: Colors.neutralColorLight
    },
    bubbleText: {
        fontSize: 18
    },
    bubbleTextPet: {
        fontSize: 30
    },

What I've tried so far to fix the issue:

• remove animation
• remove some of the style properties
• remove the stylesheet altogether

Nothing helps.

Another affected component also consists of View and Text elements and uses styling. In addition, it has Linking from expo-linking.

Some other components, that use ListItem from React Native Elements and FlatList are OK.

UPD: I've attached screenshots for the app downloaded from Google Play (text on white background is semi-transparent) and launched in Expo Go.

[EvanBacon]

You can try running the app locally with expo run:android to get access to better debugging tooling.

[lilioque]

You can try running the app locally with expo run:android to get access to better debugging tooling.

Unfortunately, it throws an error ""run:android" is not an expo command -- did you mean build:android?" Earlier I tried ejecting to bare workflow and launching the app in the Android Studio emulator, text elements were normal, without opacity. I also have tried "expo start --no-dev --minify" - no issues either.

It seems that the issue only occurs in the production *.aab. I have downloaded a universal APK generated from the app bundle from Play Console and have launched it in the Android Studio emulator - yes, opacity appears, but I have no idea how to localize the issue in this case.

When I used "expo build" instead of "eas build" there was no such issue, so it is probably something that happens during the "eas build". Unfortunately, I can't return to "expo build", because my app is targeted at younger children and the Play Store rejects the build made by "expo build" because of the Facebook's Ad SDK.

[EvanBacon]

Please upgrade your copy of expo-cli, run:android and run:ios are new commands, I'd also recommend removing "expo-cli": "^4.4.6", from your project dependencies.

[lilioque]

Please upgrade your copy of expo-cli, run:android and run:ios are new commands, I'd also recommend removing "expo-cli": "^4.4.6", from your project dependencies.

Thank you!

[lilioque]

The problem happened to be because of inconsistency between text color in Expo Go and bare template on Android (https://github.com/expo/expo/issues/13118).

If someone needs a temporary solution - the problem can be fixed by explicitly assigning color property to Text elements.