DylanVann / react-native-fast-image

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

New Architecture support #985

Open elencho opened 1 year ago

elencho commented 1 year ago

Describe the bug A clear and concise description of what the bug is. "FastImageView" doesn't support fabric

To Reproduce Steps to reproduce the behavior if possible, or a link to a reproduction repo:

  1. just add fastImage component to new architecture

Expected behavior PLS add new archcitecture support

Screenshots If applicable, add screenshots to help explain your problem.

Dependency versions

Note: if these are not the latest versions of each I recommend updating as extra effort will not be taken to be backwards compatible, and updating might resolving your issue.

suman379 commented 1 year ago

Facing the same problem.

React native version : 0.71.4 React version : 18.2.0 React native Fastimage version : 8.6.3

bytemtek commented 1 year ago

Same +1

norbusonam commented 1 year ago

Me too. Found this PR but it doesn't look like anyone has considered it yet: https://github.com/DylanVann/react-native-fast-image/pull/951

kr-yeon commented 1 year ago

+1 why he doesn't look this PR #951 ? @DylanVann

lchenfox commented 1 year ago

Please publish a new version if you are free, thank you. @DylanVann

DreamakerDimas commented 1 year ago

+1 Will be great to have Fabric support

tomgreco commented 1 year ago

@DylanVann please stay on top of this or look for more maintainers 🙏

pietro-marrone-dka commented 1 year ago

@DylanVann fabric support would be great

baronha commented 1 year ago

@DylanVann any update?

tomgreco commented 1 year ago

@DylanVann hand over the repo to someone else who will maintain it since you've disappeared!

waqas19921 commented 12 months ago

I think this lib can now be used using the interop layer as discussed here https://github.com/reactwg/react-native-new-architecture/discussions/135

lchenfox commented 11 months ago

So, has this repo already been completely abandoned now? it's not been updated for a long time. 😅💔

griffinbaker12 commented 11 months ago

used to be the best react native img lib :( expo image is up and coming but not as good as fast image in some use cases

mrshahzeb7 commented 10 months ago

I was also facing this you can use the "New Renderer Interop Layer" The interop layer is shipped with React Native 0.72

Just add component name like this in react-native.config.js

module.exports = { project:{ android: { unstable_reactLegacyComponentNames: [ "ComponentName" ] }, ios: { unstable_reactLegacyComponentNames: [ "ComponentName" ] } }, };

"The interop layer is a feature that lets you reuse legacy Native Components in New Architecture apps"

Read More https://github.com/reactwg/react-native-new-architecture/discussions/135

istvan-szilagyi commented 9 months ago

@mrshahzeb7 ComponentName in this case is "FastImageView" right? After adding it it's all good on Android, but it crashes on iOS at this line (in file LegacyViewManagerInteropComponentDescriptor.m):

Class viewManagerClass = getViewManagerFromComponentName(componentName); assert(viewManagerClass);

Looks like it cannot find the view manager class.

Any ideea what's wrong?

This is my react-native.config.js file:

module.exports = { assets: ['./src/assets/fonts/'], project: { android: { unstable_reactLegacyComponentNames: [ 'BVLinearGradient', 'FastImageView', ], }, ios: { unstable_reactLegacyComponentNames: [ 'BVLinearGradient', 'FastImageView', ], }, }, };

PS: I needed it for react-native-linear-gradient component as well, that's working fine on both platforms.

mrshahzeb7 commented 9 months ago

@mrshahzeb7 ComponentName in this case is "FastImageView" right? After adding it it's all good on Android, but it crashes on iOS at this line (in file LegacyViewManagerInteropComponentDescriptor.m):

Class viewManagerClass = getViewManagerFromComponentName(componentName); assert(viewManagerClass);

Looks like it cannot find the view manager class.

Any ideea what's wrong?

This is my react-native.config.js file:

module.exports = { assets: ['./src/assets/fonts/'], project: { android: { unstable_reactLegacyComponentNames: [ 'BVLinearGradient', 'FastImageView', ], }, ios: { unstable_reactLegacyComponentNames: [ 'BVLinearGradient', 'FastImageView', ], }, }, };

PS: I needed it for react-native-linear-gradient component as well, that's working fine on both platforms.

I Just added in the android not IOS!

my react-native.config.js module.exports = { project: { ios: {}, android: { unstable_reactLegacyComponentNames: ["FastImageView", "BVLinearGradient"], }, }, assets: ["./app/assets/fonts"], }

istvan-szilagyi commented 9 months ago

@mrshahzeb7 But that way on iOS they don't get rendered, just seeing those red boxes telling it's not supporting Fabric yet. You're just building your app for Android?

mrshahzeb7 commented 9 months ago

@mrshahzeb7 But that way on iOS they don't get rendered, just seeing those red boxes telling it's not supporting Fabric yet. You're just building your app for Android?

Yes i am using using both platform and it working fine for me

Now I have to recheck whether the new arch is enabled or not on ios 🤔

But i didn't get any issues in ios

I have added a script "pod-install" in package.json and in that i have added "RCT_NEW_ARCH_ENABLEB=1"

Please note I created project from scratch with new Arch enabled

istvan-szilagyi commented 9 months ago

Then I have to say that you are not on new arch on iOS, if you enable it (and yes I did it in the same way as you with adding it to pod install script):

"pod-install": "cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install && cd ..",

But I'm seeing same red boxes for gradient and fast image views (just as it was for Android initially). Adding BVLinearGradient fixes the gradient views, but adding FastImageView makes the app crash (on iOS)

If you run the app locally, after the bundle is loaded from metro you should see in logs "fabric":true if you're on the new arch

nguyenduythuc commented 9 months ago

Then I have to say that you are not on new arch on iOS, if you enable it (and yes I did it in the same way as you with adding it to pod install script):

"pod-install": "cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install && cd ..",

But I'm seeing same red boxes for gradient and fast image views (just as it was for Android initially). Adding BVLinearGradient fixes the gradient views, but adding FastImageView makes the app crash (on iOS)

If you run the app locally, after the bundle is loaded from metro you should see in logs "fabric":true if you're on the new arch

Same on me, any solutions? :(

vanhoutk commented 5 months ago

@mrshahzeb7 ComponentName in this case is "FastImageView" right? After adding it it's all good on Android, but it crashes on iOS at this line (in file LegacyViewManagerInteropComponentDescriptor.m):

Class viewManagerClass = getViewManagerFromComponentName(componentName); assert(viewManagerClass);

Looks like it cannot find the view manager class.

Any ideea what's wrong?

This is my react-native.config.js file:

module.exports = { assets: ['./src/assets/fonts/'], project: { android: { unstable_reactLegacyComponentNames: [ 'BVLinearGradient', 'FastImageView', ], }, ios: { unstable_reactLegacyComponentNames: [ 'BVLinearGradient', 'FastImageView', ], }, }, };

PS: I needed it for react-native-linear-gradient component as well, that's working fine on both platforms.

Getting the same issue, would love to know if anyone has a patch to sort this / can identify the issue

001bufanbin commented 3 months ago

Step 1: Inside react-native.config.js just like under module.exports = { project: { android: {}, ios: { unstable_reactLegacyComponentNames: [ "FastImageView" ], }, }, }; Step 2: Rename FFFastImageView to RCTFastImageView; RCTFastImageViewManager to RCTFastImageViewManager Step 3: Add [self reloadImage]; to the setSource and setDefaultSource methods in RCTFastImageView.m file. Step 4: Re-run pod install (with RCT_NEW_ARCH_ENABLED=1) This way, you can use this library under the new architecture. I hope this helps you.