Skip to content

[Android] Some images are not shown #17784

Description

@ozgurrgul

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

OS:  macOS Sierra 10.12.6
Node:  9.3
npm:  5.6.0
Watchman:  4.7.0
Xcode:  Xcode 9.2
Android Studio:  2

Packages: (wanted => installed)
react-native:0.52.0
react: 16.2.0

Target Platform: Android

Steps to Reproduce

When I create images with following code, they are not shown sometimes:

<Image source={LogoIcon} style={styles.logo} />

// style:
const styles = StyleSheet.create({
    logo: {
        width: size(42),
        height: size(42),
        resizeMode: 'contain',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

It's not related to it, but here is size function

function size(px) {

    let calculatedScale;

    if(isIOs()) {

        switch (getDeviceWidth()) {
            case 320: // iPhone 4, 4S, 5, 5S
                calculatedScale = 0.77;
                break;
            case 375: // iPhone 6, 6S
                calculatedScale = 0.902;
                break;
            case 414: // iPhone 6 plus, 6S plus
                calculatedScale = 1;
                break;
            default:
                calculatedScale = 1;
        }

        return Math.ceil(px * calculatedScale);
    }

    if(isAndroid()) {

        if (getDeviceWidth() <= 414) { // Android smart phones
            calculatedScale = getDeviceWidth() / 414;
        } else { // Android tablets
            calculatedScale = 1;
        }

        return Math.ceil(px * calculatedScale);
    }

    return px;
}

Expected Behavior

Images must show every time.

Actual Behavior

Images are not showing, only a transparent section. This problem occurs when I use Images in FlatList's renderItem method but sometimes all application images are not showing.

I did encounter this problem when testing with a Huawei device. I successfully tested with:

  • Iphone Emulator
  • Genymotion 4.1.1 Emulator
  • Xiaomi Mi5s

Metadata

Metadata

Assignees

No one assigned

    Labels

    Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions