Images intermittently disappear on Android

[getaaron]

• 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

Images intermittently disappear on Android

Several issues reported in #13600 which was closed due to being stale but the issue still persists

Using RN 0.55 (can't use 0.56 due to babel 7 and jest mock incompatibilities)

Note / Possible Workaround

In my testing, this issue only occurs when importing images like:

<Image source={require('./my-icon.png')} />

But if I import via:

import myIcon from './my-icon.png';

then it works fine.

See the blog post Quick Tip: Images in React-Native on Android Not Loading for more on this.

Environment

Scanning folders for symlinks in /Users/aaronbrager/[REDACTED]/node_modules (17ms)

Environment:
OS: macOS 10.14
Node: 10.8.0
Yarn: 1.9.4
npm: 6.2.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

[skip envinfo]

Possible cause

fresco has a cache pool for decoded bitmap, with a default size determined by the available runtime memory:

https://github.com/facebook/fresco/blob/3ccf021877571cc66c1cf28ecc82788f83579ad3/imagepipeline/src/main/java/com/facebook/imagepipeline/memory/BitmapCounterProvider.java#L32-L39

When the amount of memory is insufficient it throws an exception:

https://github.com/facebook/fresco/blob/8731cca73e5a4bd44387657dacd1f4562e549854/imagepipeline/src/main/java/com/facebook/imagepipeline/memory/BasePool.java#L237-L245

When this happens, React Native eats the exception and fails silently (see line 71):

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/fresco/SystraceRequestListener.java

Lines 45 to 82 in 5c2720b

	@Override
	public void onProducerFinishWithSuccess(
	String requestId,
	String producerName,
	Map<String, String> extraMap) {
	if (!Systrace.isTracing(Systrace.TRACE_TAG_REACT_FRESCO)) {
	return;
	}
	if (mProducerID.containsKey(requestId)) {
	Pair<Integer, String> entry = mProducerID.get(requestId);
	Systrace.endAsyncSection(
	Systrace.TRACE_TAG_REACT_FRESCO,
	entry.second,
	entry.first);
	mProducerID.remove(requestId);
	}
	}
	@Override
	public void onProducerFinishWithFailure(
	String requestId,
	String producerName,
	Throwable throwable,
	Map<String, String> extraMap) {
	if (!Systrace.isTracing(Systrace.TRACE_TAG_REACT_FRESCO)) {
	return;
	}
	if (mProducerID.containsKey(requestId)) {
	Pair<Integer, String> entry = mProducerID.get(requestId);
	Systrace.endAsyncSection(
	Systrace.TRACE_TAG_REACT_FRESCO,
	entry.second,
	entry.first);
	mProducerID.remove(requestId);
	}
	}

Instead of failing silently, React Native should do something (increase memory, free resources, clear cache… not sure) to ensure that the image being rendered appears.

Initial research done by @fatfatson (see #13600 (comment))

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.56 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.

[getaaron]

@react-native-bot As noted above I can’t update, but the issue I highlighted in the RN code base still appears in the latest build

[getaaron]

@hramos is there anyone you know of who worked on the RN/fresco integration who could look at this and at least tell me if I'm onto something?

[akhilaantony111]

It doesn't work for me

[sudobrackets]

Hi folks, Anyone have idea to resolve this issue

[getaaron]

@sudobrackets did you see my workaround above?

@hramos think we could get someone from RN/Fresco to look at this?

[redthree]

Hi, I'd like to add some evidence to this issue.

I'm developing an app made with React Native that uses React Navigation to move between views. On one view I have a list of images which are local assets, called with require.

Navigating into the view with the list of images one time was fine, return to the previous view then going again to the list of images made that some of them disappear.

This is the sequence:
View 1 -> Ok
View 2 -> Ok
View 1 -> Ok
View 2 -> Fail
View 1 -> Fail

I was thinking of giving up and even started another version with Flutter, then I review the code that I wrote and found that to go back to the previous view I was doing this from the second view:

this.props.navigation.push('View1') instead of this.props.navigation.goBack()

Once I change it to goBack() the problem disappear. According to the React Navigation documentation the goBack() function hooks into the hardware back button.

On Android, React Navigation hooks in to the hardware back button and fires the goBack() function for you when the user presses it, so it behaves as the user would expect.

My problem was clearly related to the React Navigation implementation, I hope this can help to solve this issue.

This are the dependencies use in my project:

"dependencies": {
    "@sentry/browser": "^4.4.1",
    "firebase": "^5.7.0",
    "lodash": "^4.17.11",
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-native-device-info": "^0.24.3",
    "react-native-gesture-handler": "^1.0.10",
    "react-native-image-progress": "^1.1.1",
    "react-native-linear-gradient": "^2.5.3",
    "react-navigation": "^3.0.7",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1"
  }