iOS 14 Image not loading

[tomacotuna]

Been using this project from some time in my Side Project, but I noticed recently that on the latest version of iOS 14 the images fail to load and you are left with a black screen, you can still swipe between images and close it with gestures, even save to gallery all works fine. But they just don't get displayed.

[Caundy]

Pretty sure there's an issue template in which you should list all the packages' versions and environment, but on the off-chance that you recently switched to building with xcode12+, don't run the latest version of react-native and none of the images display, regardless of whether shown in rn-image-viewer or displayed out of it, you might want to check this issue out: facebook/react-native#29990

[tomacotuna]

Sorry for not using a template, wasn't given the option to do such.

Here is the list of my packages:

    "@react-native-community/async-storage": "^1.9.0",
    "@react-native-community/blur": "^3.4.1",
    "@react-native-community/cameraroll": "1.4.0",
    "@react-native-community/datetimepicker": "^2.4.2",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "^5.7.0",
    "@react-native-community/segmented-control": "^2.1.0",
    "@react-navigation/bottom-tabs": "^5.7.0",
    "@react-navigation/compat": "^5.2.0",
    "@react-navigation/material-top-tabs": "^5.2.13",
    "@react-navigation/native": "^5.7.0",
    "@react-navigation/native-stack": "^5.0.5",
    "@react-navigation/stack": "5.7.0",
    "@reduxjs/toolkit": "^1.3.4",
    "@rnhooks/async-storage": "^0.0.1",
    "@sentry/react-native": "^1.3.7",
    "@styled-system/theme-get": "^5.1.2",
    "@types/lodash": "^4.14.149",
    "@types/react-redux": "^7.1.7",
    "@types/styled-system": "^5.1.6",
    "apisauce": "1.0.3",
    "babel-plugin-idx": "^2.4.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-styled-components": "^1.10.7",
    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
    "dayjs": "^1.8.20",
    "i18n-js": "^3.0.11",
    "idx": "^2.5.6",
    "lodash": "^4.17.15",
    "lottie-ios": "3.1.3",
    "lottie-react-native": "^3.4.0",
    "nodeless-trakt": "https://github.com/caitlinelfring/nodeless-trakt.git",
    "polished": "^3.4.4",
    "ramda": "0.26.1",
    "react": "16.13.1",
    "react-native": "0.63.0",
    "react-native-chart-kit": "^5.6.0",
    "react-native-color-wheel": "^0.1.7",
    "react-native-console-time-polyfill": "^1.2.1",
    "react-native-context-menu-view": "^1.1.2",
    "react-native-device-info": "^7.2.1",
    "react-native-elements": "^1.2.7",
    "react-native-fast-image": "^8.1.5",
    "react-native-flash-message": "^0.1.15",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-haptic-feedback": "^1.9.0",
    "react-native-image-header-scroll-view": "^0.10.3",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-inappbrowser-reborn": "^3.4.0",
    "react-native-keychain": "3.1.3",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^1.4.0",
    "react-native-modal-datetime-picker": "8.9.3",
    "react-native-openanything": "^0.0.6",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "3.1.1",
    "react-native-screens": "^2.9.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-tab-view": "^2.13.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-youtube": "^2.0.1",
    "react-navigation": "4.4.0",
    "react-spring": "^8.0.27",
    "reanimated-bottom-sheet": "^1.0.0-alpha.19",
    "recyclerlistview": "^2.0.12",
    "yarn": "^1.22.4"

I am indeed using the latest Xcode version, and RN 0.63 so not the latest one. That being said I am not sure if the issue link you gave is the cause of this issues, since all the other Images in my app work. But will have a deeper look into that issue once home.

UPDATE: in the meantime it seems like I was able to make the Image appear by rendering them using a custom React Element with renderImage

[hzw0407]

Modify node_ React native / libraries / image / rctuiimageviewanimals. M file in modules

if(_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
}else {
[super displayLayer:layer];
}

[Yandamuri]

@hzw0407 we have to do this on every npm install, right!. any permanent solution?

[bkensey]

@Yandamuri You can look into using patch-package to apply manual changes to your node modules automatically during postinstall after every npm install.

[Yandamuri]

@bkensey Thank you for your suggestion