Image not showing in release build, black color image only showing (Updated)

[merbin2012]

Environment

React Native Environment Info:
System:
OS: Windows 7
CPU: x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 1.46 GB / 7.89 GB
Binaries:
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.1.0.0 AI-173.4907809

Description

It is working perfectly if I do not use images in the release build. In release build instead of images, showing only black space.

I am searching for this problem above one month and I found many answers and I tried all, but all are not working.

Tried answers

1. react-native bundle --assets-dest ./android/app/src/main/res/ --entry-file ./App.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android -dev false
2. remove all image resizing code

Reproducible Demo

`import React, { Component } from 'react';
import { Image } from 'react-native';

export default class App extends Component {
render() {
return (
<Image source={require('./a.png')} />
);
}
}`

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[radko93]

We can't help you if you won't reproduce that with latest version

[merbin2012]

@radko93 Thanks for your response
Now I have updated to the latest version and tried the same problem still found. The images are shown in "react-native run-android" command. But not showing when I run this command "react-native run-android --variant=release".

If run the following command before the run-android, it shows "error duplicate resources"
"react-native bundle --assets-dest ./android/app/src/main/res/ --entry-file ./App.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --dev false"

react-native info :
D:\cordova projects\React Native\NewApp>react-native info

React Native Environment Info:
System:
OS: Windows 7
CPU: x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 1.46 GB / 7.89 GB
Binaries:
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.1.0.0 AI-173.4907809

[radko93]

What are resources file names? Did you check that there are no duplicates? You can publish this as a GitHub repo.

[merbin2012]

The image name is backimage.png. I just started learn to React native, so I don't know much more about react native.
I just modify the default App.js file with the following code and just copy the "backimage.png" into project folder (D:\cordova projects\React Native\NewApp).

`import React, { Component } from 'react';
import { Image } from 'react-native';

export default class App extends Component {
render() {
return (
<Image source={require('./backimage.png')} style={{ width: 250, height: 160 }} />
);
}
}`

[cbjs]

same with ImageBackground

[merbin2012]

@cbjs I have solved this problem when I put the image into the folder.

[radko93]

@merbin2012 which folder?

[zhangjingzhu19930808]

@merbin2012 how did you fix it? i have the same problem...

[jeffmwells]

I am also having this problem. If i run the react-native bundle command i end up with duplicate images and it fails the assembleRelease task. I am using the absolute import approach, so my code looks like < Image source={require(“img/logo.png”)} />

using android gradle plugin @ 3.1.4 and build tools @ 27.0.3, RN 0.57.1

[cbjs]

fixed by upgrading gradle to 3.1.4 and buildToolsVersion 27.0.3

[elicwhite]

It sounds like this has been resolved with the latest versions of tools. Let us know if you still run into this on the latest release.

[DamianKRTurner]

I have just installed React Native 0.6 and am having the same issue. When running "react-native run-android" the image displays but also shows a network error message. When running "react-native run-android --variant=release", the network error doesn't display, but the image then displays as a black blob.

[xempie]

I still have the same issue. It works for some time but for some reason after a few days or a week all images disappear!

[nuKs]

Fixed this with shrinkResources set to false in build.gradle.