Skip to content

Instantly share code, notes, and snippets.

@scally
Last active January 5, 2019 06:37
Show Gist options
  • Save scally/dbb7aefbebad285cdcfb89ca3b75706c to your computer and use it in GitHub Desktop.
Save scally/dbb7aefbebad285cdcfb89ca3b75706c to your computer and use it in GitHub Desktop.
React Native patch-package patch for disabling image filtering, since pixel filtering can make pixel art muddy.
patch-package
--- a/node_modules/react-native/Libraries/Image/RCTImageView.h
+++ b/node_modules/react-native/Libraries/Image/RCTImageView.h
@@ -21,6 +21,7 @@
@property (nonatomic, assign) UIImageRenderingMode renderingMode;
@property (nonatomic, copy) NSArray<RCTImageSource *> *imageSources;
@property (nonatomic, assign) CGFloat blurRadius;
+@property (nonatomic, assign) Boolean disableFiltering;
@property (nonatomic, assign) RCTResizeMode resizeMode;
@end
--- a/node_modules/react-native/Libraries/Image/RCTImageView.m
+++ b/node_modules/react-native/Libraries/Image/RCTImageView.m
@@ -124,9 +124,14 @@ - (void)updateWithImage:(UIImage *)image
image = [image resizableImageWithCapInsets:_capInsets resizingMode:UIImageResizingModeStretch];
}
- // Apply trilinear filtering to smooth out mis-sized images
- self.layer.minificationFilter = kCAFilterTrilinear;
- self.layer.magnificationFilter = kCAFilterTrilinear;
+ if (!_disableFiltering) {
+ // Apply trilinear filtering to smooth out mis-sized images
+ self.layer.minificationFilter = kCAFilterTrilinear;
+ self.layer.magnificationFilter = kCAFilterTrilinear;
+ } else {
+ self.layer.minificationFilter = kCAFilterNearest;
+ self.layer.magnificationFilter = kCAFilterNearest;
+ }
super.image = image;
}
@@ -139,6 +144,14 @@ - (void)setImage:(UIImage *)image
}
}
+- (void)setDisableFiltering:(Boolean)disableFiltering
+{
+ if (disableFiltering != _disableFiltering) {
+ _disableFiltering = disableFiltering;
+ _needsReload = YES;
+ }
+}
+
- (void)setBlurRadius:(CGFloat)blurRadius
{
if (blurRadius != _blurRadius) {
--- a/node_modules/react-native/Libraries/Image/RCTImageViewManager.m
+++ b/node_modules/react-native/Libraries/Image/RCTImageViewManager.m
@@ -30,6 +30,7 @@ - (UIView *)view
}
RCT_EXPORT_VIEW_PROPERTY(blurRadius, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(disableFiltering, BOOL)
RCT_EXPORT_VIEW_PROPERTY(capInsets, UIEdgeInsets)
RCT_REMAP_VIEW_PROPERTY(defaultSource, defaultImage, UIImage)
RCT_EXPORT_VIEW_PROPERTY(onLoadStart, RCTDirectEventBlock)
patch-package
--- a/node_modules/react-native/Libraries/Image/RCTImageView.h
+++ b/node_modules/react-native/Libraries/Image/RCTImageView.h
@@ -21,6 +21,7 @@
@property (nonatomic, assign) UIImageRenderingMode renderingMode;
@property (nonatomic, copy) NSArray<RCTImageSource *> *imageSources;
@property (nonatomic, assign) CGFloat blurRadius;
+@property (nonatomic, assign) Boolean disableFiltering;
@property (nonatomic, assign) RCTResizeMode resizeMode;
@end
--- a/node_modules/react-native/Libraries/Image/RCTImageView.m
+++ b/node_modules/react-native/Libraries/Image/RCTImageView.m
@@ -124,9 +124,15 @@ - (void)updateWithImage:(UIImage *)image
image = [image resizableImageWithCapInsets:_capInsets resizingMode:UIImageResizingModeStretch];
}
- // Apply trilinear filtering to smooth out mis-sized images
- self.layer.minificationFilter = kCAFilterTrilinear;
- self.layer.magnificationFilter = kCAFilterTrilinear;
+ if (!_disableFiltering) {
+ // Apply trilinear filtering to smooth out mis-sized images
+ self.layer.minificationFilter = kCAFilterTrilinear;
+ self.layer.magnificationFilter = kCAFilterTrilinear;
+ } else {
+
+ self.layer.minificationFilter = kCAFilterNearest;
+ self.layer.magnificationFilter = kCAFilterNearest;
+ }
super.image = image;
}
@@ -139,6 +145,14 @@ - (void)setImage:(UIImage *)image
}
}
+- (void)setDisableFiltering:(Boolean)disableFiltering
+{
+ if (disableFiltering != _disableFiltering) {
+ _disableFiltering = disableFiltering;
+ _needsReload = YES;
+ }
+}
+
- (void)setBlurRadius:(CGFloat)blurRadius
{
if (blurRadius != _blurRadius) {
--- a/node_modules/react-native/Libraries/Image/RCTImageViewManager.m
+++ b/node_modules/react-native/Libraries/Image/RCTImageViewManager.m
@@ -30,6 +30,7 @@ - (UIView *)view
}
RCT_EXPORT_VIEW_PROPERTY(blurRadius, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(disableFiltering, BOOL)
RCT_EXPORT_VIEW_PROPERTY(capInsets, UIEdgeInsets)
RCT_REMAP_VIEW_PROPERTY(defaultSource, defaultImage, UIImage)
RCT_EXPORT_VIEW_PROPERTY(onLoadStart, RCTDirectEventBlock)
@scally
Copy link
Author

scally commented Jan 2, 2019

After you have applied this patch to your RN project, you may now disable filtering for any image like so:

<Image disableFiltering={true} source={source} style={style} />

@scally
Copy link
Author

scally commented Jan 5, 2019

Included version for the latest prod release of 0.57.8 as well as the hacky hooks version of 0.57.7-hooks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment