The main idea for this is that by adding an iOS-only prop called enableMinificationFilter to FastImage we can switch between the default minificationFilterkCAFilterLinear and kCAFilterTrilinear, each of these gives a different look to the final image when downscaling it. E.g.
The icon on the left uses kCAFilterTrilinear and the circle on the right uses kCAFilterLinear. You can find more information about Scaling Filters here.
minificationFilter supports a variety of filters to be applied but for the sake of simplicity and based on the react native uses for their own Image component (RCTImageView) I opted for only allowing switching between kCAFilterLinear and kCAFilterTrilinear.
As reported in https://github.com/DylanVann/react-native-fast-image/issues/445 and on other issues when rendering larger images in small views using FastImage the image becomes pixilated.
The main idea for this is that by adding an iOS-only prop called
enableMinificationFilterto FastImage we can switch between the defaultminificationFilterkCAFilterLinearandkCAFilterTrilinear, each of these gives a different look to the final image when downscaling it. E.g.The icon on the left uses kCAFilterTrilinear and the circle on the right uses kCAFilterLinear. You can find more information about Scaling Filters here.
minificationFiltersupports a variety of filters to be applied but for the sake of simplicity and based on the react native uses for their own Image component (RCTImageView) I opted for only allowing switching betweenkCAFilterLinearandkCAFilterTrilinear.Here's is the patch for these changes if you need this in your project while this does not get merged
## Patch 1. Setup patch-package (More info [here](https://github.com/ds300/patch-package)) 2. Create a file called `react-native-fast-image+8.5.11.patch` under your patches folder 3. Add the code bellow to your file ```patch diff --git a/node_modules/react-native-fast-image/RNFastImage.podspec b/node_modules/react-native-fast-image/RNFastImage.podspec index db0fada..47dbd5b 100644 --- a/node_modules/react-native-fast-image/RNFastImage.podspec +++ b/node_modules/react-native-fast-image/RNFastImage.podspec @@ -16,6 +16,6 @@ Pod::Spec.new do |s| s.source_files = "ios/**/*.{h,m}" s.dependency 'React-Core' - s.dependency 'SDWebImage', '~> 5.11.1' + s.dependency 'SDWebImage', '~> 5.12.1' s.dependency 'SDWebImageWebPCoder', '~> 0.8.4' end diff --git a/node_modules/react-native-fast-image/dist/index.d.ts b/node_modules/react-native-fast-image/dist/index.d.ts index 8a91257..539aac6 100644 --- a/node_modules/react-native-fast-image/dist/index.d.ts +++ b/node_modules/react-native-fast-image/dist/index.d.ts @@ -56,6 +56,7 @@ export interface ImageStyle extends FlexStyle, TransformsStyle, ShadowStyleIOS { export interface FastImageProps extends AccessibilityProps, ViewProps { source: Source | number; resizeMode?: ResizeMode; + enableMinificationFilter?:boolean; fallback?: boolean; onLoadStart?(): void; onProgress?(event: OnProgressEvent): void; diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h index fb557cf..77e0b7d 100644 --- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h +++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h @@ -10,14 +10,14 @@ @interface FFFastImageView : SDAnimatedImageView -@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadStart; -@property (nonatomic, copy) RCTDirectEventBlock onFastImageProgress; -@property (nonatomic, copy) RCTDirectEventBlock onFastImageError; -@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoad; -@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd; -@property (nonatomic, assign) RCTResizeMode resizeMode; -@property (nonatomic, strong) FFFastImageSource *source; -@property (nonatomic, strong) UIColor *imageColor; +@property(nonatomic, copy) RCTDirectEventBlock onFastImageLoadStart; +@property(nonatomic, copy) RCTDirectEventBlock onFastImageProgress; +@property(nonatomic, copy) RCTDirectEventBlock onFastImageError; +@property(nonatomic, copy) RCTDirectEventBlock onFastImageLoad; +@property(nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd; +@property(nonatomic, assign) RCTResizeMode resizeMode; +@property(nonatomic, assign) BOOL minificationFilter; +@property(nonatomic, strong) FFFastImageSource *source; +@property(nonatomic, strong) UIColor *imageColor; @end - 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 9c0f1d3..cc1b1b9 100644 --- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m +++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m @@ -23,6 +23,18 @@ return self; } +- (void)setMinificationFilter:(BOOL)minificationFilter { + if (_minificationFilter != minificationFilter) { + _minificationFilter = minificationFilter; + + if(minificationFilter == TRUE){ + self.layer.minificationFilter = kCAFilterTrilinear; + }else{ + self.layer.minificationFilter = kCAFilterLinear; + } + } +} + - (void)setResizeMode:(RCTResizeMode)resizeMode { if (_resizeMode != resizeMode) { _resizeMode = resizeMode; diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m index a8059af..5c3a447 100644 --- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m +++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m @@ -19,6 +19,7 @@ RCT_EXPORT_VIEW_PROPERTY(onFastImageProgress, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadEnd, RCTDirectEventBlock) +RCT_REMAP_VIEW_PROPERTY(enableMinificationFilter, minificationFilter, BOOL) RCT_REMAP_VIEW_PROPERTY(tintColor, imageColor, UIColor) RCT_EXPORT_METHOD(preload:(nonnull NSArray