Support for iOS 17 - Githubissues

frankfka commented 11 months ago

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 commented 10 months ago

🆙

numsu commented 10 months ago

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 commented 9 months ago

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 commented 9 months ago

Thank you, you save for me a day

tldkhang commented 9 months ago

Thank you 🫶

AdamGerthel commented 9 months ago

This seems like a highly critical issue

aman32767 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

@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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 8 months ago

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 commented 8 months ago

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 react-native-fast-image2@8.3.11, too. Method hasn't changed and is easily patchable with this code. Thanks for sharing!

Ganapati1999 commented 7 months ago

@numsu

thank you so much this solved my issue

joeljerushan commented 4 months ago

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

numsu commented 4 months ago

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

vishal6969 commented 1 month ago

Thank you so much vro 🥹

Nazim-hasan commented 1 month ago

How to use this. In my project? Can anyone assist me?

t0ma5h commented 3 weeks ago

Just use expo-image.

DylanVann / react-native-fast-image

Support for iOS 17 #1002