Support for iOS 17

[frankfka]

Starting in iOS 17, will UIGraphicsBeginImageContext will no longer be available. Both react-native-fast-image as well as the SDWebImage dependency uses this. Is anyone looking at making this package iOS 17 compatible?

[Vorob-Astronaut]

🆙

[numsu]

Deprecated doesn't necessarily mean not available.

I made changes regarding this to my fork in this commit: https://github.com/muntius/react-native-fast-image/commit/fc2b8acd97f07989e312f5cbd61d2e541fda3611

This repo seems dead.

[shuzhiweb]

I encountered this issue while running the iOS17 phone on Xcode15, and I would like to know if it is related to it，“UIGraphicsBeginImageContext() failed to allocate CGBitampContext: size={0, 0}, scale=3.000000, bitmapInfo=0x2002. Use UIGraphicsImageRenderer to avoid this assert.”

[yedi97]

Deprecated doesn't necessarily mean not available.

I made changes regarding this to my fork in this commit: muntius@fc2b8ac

This repo seems dead.

Thank you, you save for me a day

[tldkhang]

Deprecated doesn't necessarily mean not available.

I made changes regarding this to my fork in this commit: muntius@fc2b8ac

This repo seems dead.

Thank you 🫶

[AdamGerthel]

This seems like a highly critical issue

[aman32767]

This PR will fix the issue, This PR addresses an issue related to graphics context allocation in the FFFastImageViewManager. The previous implementation was using older graphics context handling methods which could lead to potential errors. This PR updates the code to use the newer UIGraphicsImageRenderer API to prevent any context allocation problems.

https://github.com/DylanVann/react-native-fast-image/pull/1007

[ucheNkadiCode]

I am getting this error, but I am not using this package at all. Do you know if this issue might be originating from any where else?

"dependencies": {
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@notifee/react-native": "^7.7.1",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/cli-platform-android": "^9.3.1",
    "@react-native-community/netinfo": "9.3.0",
    "@react-native-community/slider": "^4.4.2",
    "@react-native-firebase/analytics": "^14.12.0",
    "@react-native-firebase/app": "^14.12.0",
    "@react-native-firebase/auth": "^14.12.0",
    "@react-native-firebase/crashlytics": "^14.12.0",
    "@react-native-firebase/database": "^14.12.0",
    "@react-native-google-signin/google-signin": "^9.0.0",
    "@react-native-picker/picker": "^2.1.0",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/elements": "^1.3.17",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@react-navigation/stack": "^6.3.16",
    "@sayem314/react-native-keep-awake": "^1.1.0",
    "@types/lodash": "^4.14.176",
    "@types/react-native-background-timer": "^2.0.0",
    "chalk": "^4.1.2",
    "date-fns": "^2.25.0",
    "global": "^4.4.0",
    "patch-package": "^6.5.0",
    "react": "18.2.0",
    "react-dom": "18.0.0",
    "react-hook-form": "^7.40.0",
    "react-native": "^0.72.4",
    "react-native-background-timer": "^2.4.1",
    "react-native-device-info": "^10.3.0",
    "react-native-draggable-flatlist": "^4.0.1",
    "react-native-extended-stylesheet": "^0.12.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-get-random-values": "~1.8.0",
    "react-native-haptic-feedback": "^2.0.3",
    "react-native-in-app-review": "^4.2.1",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-modal": "^13.0.0",
    "react-native-navigation-bar-color": "^2.0.2",
    "react-native-pager-view": "^6.2.0",
    "react-native-paper": "^5.7.2",
    "react-native-purchases": "^6.2.3",
    "react-native-reanimated": "^3.5.4",
    "react-native-safe-area-context": "^4.5.2",
    "react-native-screens": "^3.20.0",
    "react-native-sound": "^0.11.2",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^13.9.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-video": "^6.0.0-alpha.6",
    "react-native-web": "~0.18.7",
    "react-native-wheely": "^0.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/preset-env": "^7.21.5",
    "@babel/runtime": "^7.21.5",
    "@react-native-community/eslint-config": "^3.2.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.69.20",
    "@types/react-native-video": "^5.0.14",
    "@types/react-test-renderer": "^18.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro": "^0.77.0",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.7.1",
    "react-native-flipper-performance-plugin": "^0.4.0",
    "react-native-svg-transformer": "^1.0.0",
    "typescript": "^4.8.4"
  },

[AdamGerthel]

I am getting this error, but I am not using this package at all. Do you know if this issue might be originating from any where else?

No but you can probably figure it out by looking into when the error is triggered, and which components are being loaded on that screen. It's very likely that it's caused by a package that uses images - so maybe react-native-video (thumbnails)? You can try removing parts of your app's code until the error disappears to figure out the cause.

[ucheNkadiCode]

Thank you for your help! I went ahead and searched throughout all my nodepackages for UIGraphicsBeginImageContext and found it was React Native Linear Gradient

[hk-skit]

Deprecated doesn't necessarily mean not available.

I made changes regarding this to my fork in this commit: muntius@fc2b8ac

This repo seems dead.

@numsu Than you for the fix. Is your fork available on npm/yarn? Or do I have to use github url and manually bundle it?

[AdamGerthel]

Deprecated doesn't necessarily mean not available. I made changes regarding this to my fork in this commit: muntius@fc2b8ac This repo seems dead.

@numsu Than you for the fix. Is your fork available on npm/yarn? Or do I have to use github url and manually bundle it?

You can actually use patch-package to implement this pr without switching package.

I've attached the patch as a file. Simply add patch-package and set it up, then add my patch file to /patches folder in your root project, and then run yarn (or npm install) and the patch should be applied. Here's the file: react-native-fast-image+8.5.11.patch

if the patch doesn't apply cleanly (I think I'm using an older version of this package) then simply perform the patch yourself in the package and generate the patch file (see patch-package for instructions).

[patrickmwatson]

Deprecated doesn't necessarily mean not available. I made changes regarding this to my fork in this commit: muntius@fc2b8ac This repo seems dead.

@numsu Than you for the fix. Is your fork available on npm/yarn? Or do I have to use github url and manually bundle it?

Yea, I recommend patch-package, just be aware that @AdamGerthel created his patch using react-native-fast-image 8.5.11 so if you are using the latest, "react-native-fast-image": "^8.6.3" at the time of this post, you'll probably want to create your own patch just to be safe.

[manoj-makkuboy]

Created a patch with the latest version "react-native-fast-image": "^8.6.3"

diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
index f710081..aead3e6 100644
--- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
+++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
@@ -73,11 +73,11 @@ - (void) setImageColor: (UIColor*)imageColor {
 
 - (UIImage*) makeImage: (UIImage*)image withTint: (UIColor*)color {
     UIImage* newImage = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
-    UIGraphicsBeginImageContextWithOptions(image.size, NO, newImage.scale);
-    [color set];
-    [newImage drawInRect: CGRectMake(0, 0, image.size.width, newImage.size.height)];
-    newImage = UIGraphicsGetImageFromCurrentImageContext();
-    UIGraphicsEndImageContext();
+     UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:image.size];
+     newImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
+      [color setFill];
+     [newImage drawInRect:CGRectMake(0, 0, image.size.width, newImage.size.height)];
+   }];
     return newImage;
 }

react-native-fast-image+8.6.3.patch

[zehratok]

I was encountering the error Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'UIGraphicsBeginImageContext() failed to allocate CGBitampContext: size={0, 16}, scale=3.000000, bitmapInfo=0x2002. Use UIGraphicsImageRenderer to avoid this assert.' and based on your answers, I understood that the issue was related to the need for updating the 'react-native-linear-gradient' package. Thank you

[arnekolja]

Created a patch with the latest version "react-native-fast-image": "^8.6.3"

diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
index f710081..aead3e6 100644
--- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
+++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
@@ -73,11 +73,11 @@ - (void) setImageColor: (UIColor*)imageColor {
 
 - (UIImage*) makeImage: (UIImage*)image withTint: (UIColor*)color {
     UIImage* newImage = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
-    UIGraphicsBeginImageContextWithOptions(image.size, NO, newImage.scale);
-    [color set];
-    [newImage drawInRect: CGRectMake(0, 0, image.size.width, newImage.size.height)];
-    newImage = UIGraphicsGetImageFromCurrentImageContext();
-    UIGraphicsEndImageContext();
+     UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:image.size];
+     newImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
+      [color setFill];
+     [newImage drawInRect:CGRectMake(0, 0, image.size.width, newImage.size.height)];
+   }];
     return newImage;
 }

react-native-fast-image+8.6.3.patch

Works with [email protected], too. Method hasn't changed and is easily patchable with this code. Thanks for sharing!

[Ganapati1999]

@numsu

Deprecated doesn't necessarily mean not available.

I made changes regarding this to my fork in this commit: muntius@fc2b8ac

This repo seems dead.

thank you so much this solved my issue

[joeljerushan]

Deprecated doesn't necessarily mean not available.

I made changes regarding this to my fork in this commit: muntius@fc2b8ac

This repo seems dead.

for past 6 months im doing this every time i clear pod files and node_modules is there any permanent solution for this ?

[numsu]

Deprecated doesn't necessarily mean not available.

I made changes regarding this to my fork in this commit: muntius@fc2b8ac

This repo seems dead.

for past 6 months im doing this every time i clear pod files and node_modules is there any permanent solution for this ?

Either use patch-package (see comments). Or optionally you can fork the project and include it as a submodule in yours with the fix.