Images won't display on certain Android devices

[ghost]

GitHub Issues in the facebook/react-native repository are used exclusively for tracking bugs in React Native. GitHub may not be the ideal place to ask questions about using React Native, but we have compiled a list of resources that should help.

Get help with your React Native app or ask code-level questions

Many members of the community use Stack Overflow to ask questions. Read through the existing questions tagged with react-native or ask your own!

Talk about best practices or propose changes to React Native

For longer-form conversations about React Native, we’ve set up a discussion forum at discuss.reactjs.org. This forum is a great place for discussion about best practices and application architecture as well as the future of React Native.

Chat with React and React Native community members

If you need an answer right away, check out the Reactiflux Discord community. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look.

---

I've been developing a mobile app using React Native and deploying it onto a Samsung Galaxy S6 Edge for testing purposes via Expo. So far, everything has worked fine and all of the images I'm using have displayed correctly.

However, when I've tried to deploy it onto other devices, certain images have failed to display. On the Huawei MediaPad, the header image (encased in an tag) fails to display and on the Samsung Galaxy S8 and the OnePlus 6, the background image (encased in an tag) fails to display.

I've attempted running a compiled APK file of the app, believing that these issues could be related to streaming the images over Wi-Fi, but to no avail. Interestingly though, the background image displayed fine across all devices until I swapped it out for a new image (as the predecessor was merely a placeholder). Both images are 4K (3840 x 2160), with the only difference being the storage size of the image. As a debugging measure, I compressed the new image in Photoshop with the strongest setting but, again, to no avail.

Below is the code I am using to render the two Images (not a complete paste of course, but I'm happy to do so on request):

<ImageBackground
        source={require('./../../assets/images/bg_portrait_dots.png')}
        style={{width: '100%', height: '100%', position: 'absolute'}}
        >
            <View style={styles.parentView}>
                <View style={styles.elementSpacer}>
                    <Image
                        source={require('./../../assets/images/iview_learning_logo.png')}
                        style={styles.headerImage}
                    />
                </View>

Below are the Stylesheet arguments which control the elements listed above:

parentView: {
    flex: 1,
    flexDirection: 'column',
    padding: 30,
    justifyContent: 'center',
},
headerImage: {
    width: null,
    resizeMode: 'contain',
    height: 120,
    position: 'relative',
},
elementSpacer: {
    flex: 1,
},

[charpeni]

Can you provide a snack that reproduce the issue? https://snack.expo.io/

[ghost]

Been trying since you left your comment to get it working in snack but keep getting silly errors from it, is there any way I can send my app to you without having to copy it all into Snack?

[charpeni]

You can extract only "bugged" images into a simple snack or maybe share a GitHub repo. Otherwise, it's hard to debug an issue without a repro and problematic images.

[react-native-bot]

Please use Stack Overflow for this type of question.