DylanVann / react-native-fast-image

🚩 FastImage, performant React Native image component.
MIT License
8.09k stars 1.47k forks source link

[Android] Add support for Bridgeless Mode - 0.74 #1032

Open cortinico opened 3 months ago

cortinico commented 3 months ago

The problem

I've been trying react-native-fast-image against 0.74 RC with Bridgeless mode and the library doens't work well on Android. The reason is that the library is usign RCTEventEmitter which is deprecated. I'm moving over to use the EventDispatcher.

Test Plan

Before (NewArch-Bridgeless) After (OldArch) After (NewArch-Bridge) After (NewArch-Bridgeless)
before oldarch newarch bridgeless
cortinico commented 3 months ago

@DylanVann friendly ping to get this merged. Anything else I can help with?

cortinico commented 3 months ago

Please let me know if I can help somehow @DylanVann 👍

angelo-hub commented 2 months ago

@cortinico Dylann hasn't updated this repo in over 2 years, would highly recommend publishing your fork via npm

cortinico commented 2 months ago

@cortinico Dylann hasn't updated this repo in over 2 years, would highly recommend publishing your fork via npm

I'm not going to fork this sorry. If folks are interested in using react-native-fast-image, they can fork it by themselves or apply my patch via patch package.

qnrjs42 commented 2 months ago

@cortinico I have Error.

how can i fix it?

"react": "18.2.0",
"react-native": "0.73.6",
"react-native-fast-image": "^8.6.3",
// /node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java

@@ -14,14 +14,19 @@ import androidx.annotation.NonNull;

 import com.bumptech.glide.Glide;
 import com.bumptech.glide.RequestManager;
+import com.dylanvann.fastimage.events.FastImageProgressEvent;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
+import com.facebook.react.uimanager.common.ViewUtil;
+import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;

 import java.util.List;
@@ -117,13 +122,17 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
         List<FastImageViewWithUrl> viewsForKey = VIEWS_FOR_URLS.get(key);
         if (viewsForKey != null) {
             for (FastImageViewWithUrl view : viewsForKey) {
-                WritableMap event = new WritableNativeMap();
-                event.putInt("loaded", (int) bytesRead);
-                event.putInt("total", (int) expectedLength);
-                ThemedReactContext context = (ThemedReactContext) view.getContext();
-                RCTEventEmitter eventEmitter = context.getJSModule(RCTEventEmitter.class);
-                int viewId = view.getId();
-                eventEmitter.receiveEvent(viewId, REACT_ON_PROGRESS_EVENT, event);
+                ReactContext context = getReactApplicationContext();
+                EventDispatcher dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.getId());
+                FastImageProgressEvent event = new FastImageProgressEvent(
+                        ViewUtil.NO_SURFACE_ID,
+                        view.getId(),
+                        (int) bytesRead,
+                        (int) expectedLength);
+
+                if (dispatcher != null) {
+                    dispatcher.dispatchEvent(event);
+                }
             }
         }
     }
Note: [2] Wrote GeneratedAppGlideModule with: [com.bumptech.glide.integration.okhttp3.OkHttpLibraryGlideModule, com.dylanvann.fastimage.FastImageOkHttpProgressGlideModule]
/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java:125: error: cannot find symbol ReactContext context = getReactApplicationContext(); ^ symbol: method getReactApplicationContext() location: class FastImageViewManager
1 error FAILURE: Build failed with an exception. * What went wrong:
Execution failed for task ':react-native-fast-image:compileDebugJavaWithJavac'.
cortinico commented 2 months ago

Well it seems like that this library is unmaintained as @DylanVann is unresponsive after various attempts to try to contact them.

Alternative for the community are:

  1. If you're on Expo, use expo-image which offers the same capability https://docs.expo.dev/versions/latest/sdk/image/
  2. Switch back to use React Native's Image component which fully works on New Architecture
  3. (Not Recommended) Attempt to use patch-package on react-native-fast-image with this PR to let it work on Bridgeless/NewArchitecture. The gotchas here is that you'll still be relying on a unmaintained library which we don't reccomend.