react-native-nano-icons 0.1.4 → 0.1.6

package/ios/NanoIconView.mm

@@ -7,30 +7,41 @@
 
 using namespace facebook::react;
 
-// Drawing canvas that can be shifted outside the Yoga frame.
-@interface NanoIconDrawingView : UIView
-@property (nonatomic, copy) void (^drawBlock)(CGContextRef, CGRect);
+// Forward-declare so the layer subclass can call the drawing method.
+@interface NanoIconView ()
+- (void)_drawIconInContext:(CGContextRef)context bounds:(CGRect)bounds;
 @end
 
-@implementation NanoIconDrawingView
-- (instancetype)initWithFrame:(CGRect)frame {
-    if (self = [super initWithFrame:frame]) {
-        self.opaque = NO;
-        self.backgroundColor = [UIColor clearColor];
-        self.userInteractionEnabled = NO;
-    }
-    return self;
-}
-- (void)drawRect:(CGRect)rect {
-    if (self.drawBlock) {
-        CGContextRef ctx = UIGraphicsGetCurrentContext();
-        if (ctx) self.drawBlock(ctx, self.bounds);
-    }
+// Lightweight sublayer for inline-in-Text icons. Provides a shifted pixel
+// buffer so the icon can overflow the Yoga frame without a full UIView.
+@interface NanoIconDrawingLayer : CALayer
+@property (nonatomic, weak) NanoIconView *owner;
+@end
+
+@implementation NanoIconDrawingLayer
+- (void)drawInContext:(CGContextRef)ctx {
+  [self.owner _drawIconInContext:ctx bounds:self.bounds];
 }
 @end
 
+// Process-wide CTFontRef cache keyed by (fontFamily, fontSize).
+// Avoids 1000× CTFontCreateWithName for identical (family, size) combos.
+static CTFontRef NanoIconGetCachedFont(NSString *family, CGFloat size) {
+  static NSMutableDictionary *cache;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{ cache = [NSMutableDictionary new]; });
+
+  NSString *key = [NSString stringWithFormat:@"%@:%.1f", family, size];
+  id existing = cache[key];
+  if (existing) return (__bridge CTFontRef)existing;
+
+  CTFontRef font = CTFontCreateWithName((__bridge CFStringRef)family, size, NULL);
+  if (font) cache[key] = (__bridge id)font;
+  return font;
+}
+
 @implementation NanoIconView {
-  CTFontRef _font;
+  CTFontRef _font;   // borrowed from static cache — do NOT CFRelease
   NSString *_fontFamily;
   CGFloat _fontSize;
   std::vector<CGGlyph> _glyphs;
@@ -39,7 +50,19 @@ using namespace facebook::react;
   CGFloat _fitScale;
   CGPoint _baselinePosition;
   BOOL _metricsValid;
-  NanoIconDrawingView *_drawingView;
+
+  // Inline-in-Text detection — resolved once on first layout, cached until reparenting.
+  // Standalone icons (vast majority) skip the superview walk entirely after detection.
+  BOOL _inlineDetected;
+  BOOL _isInlineInText;
+  UIView * __weak _paragraphView;
+  CGFloat _cachedBaselineOffset;
+  BOOL _baselineOffsetValid;
+
+  // Drawing sublayer for inline icons — provides a shifted pixel buffer so the
+  // icon can overflow the Yoga frame. Lighter than a UIView (no responder chain,
+  // hit testing, or accessibility). Standalone icons draw directly via drawRect:.
+  CALayer *_drawingLayer;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame {
@@ -49,16 +72,12 @@ using namespace facebook::react;
     self.opaque = NO;
     self.backgroundColor = [UIColor clearColor];
     self.clipsToBounds = NO;
+    self.contentMode = UIViewContentModeRedraw;
 
     _fitScale = 1.0;
     _baselinePosition = CGPointZero;
 
-    _drawingView = [[NanoIconDrawingView alloc] initWithFrame:self.bounds];
-    __weak __typeof(self) weakSelf = self;
-    _drawingView.drawBlock = ^(CGContextRef context, CGRect bounds) {
-      [weakSelf _drawIconInContext:context bounds:bounds];
-    };
-    [self addSubview:_drawingView];
+    // _drawingLayer is created lazily only when inline in Text
   }
   return self;
 }
@@ -87,23 +106,47 @@ using namespace facebook::react;
   _metricsValid = YES;
 }
 
-// Distance from this view's bottom edge to the parent text baseline.
-// Returns 0 when standalone or when the icon is taller than the text line.
-- (CGFloat)_inlineBaselineOffset {
+// Detect whether this icon is inline inside a <Text> component and, if so,
+// compute the baseline offset in a single pass. Deferred to first layout
+// (not didMoveToSuperview) because Fabric may assemble the hierarchy bottom-up.
+// For standalone icons this completes in 1-3 class name checks with no
+// ObjC runtime method resolution or attributed string reads.
+- (void)_detectAndCacheInlineState {
+  _inlineDetected = YES;
+  _isInlineInText = NO;
+  _paragraphView = nil;
+  _cachedBaselineOffset = 0;
+  _baselineOffsetValid = YES;
+
+  // RCTParagraphComponentView is the immediate or near-immediate parent
+  // when the icon is inside <Text>. Three levels covers all known layouts.
   UIView *current = self.superview;
-  NSAttributedString *attrStr = nil;
-  while (current) {
-    if ([current respondsToSelector:@selector(attributedText)]) {
-      attrStr = [current performSelector:@selector(attributedText)];
-      if (attrStr.length > 0) break;
+  UIView *target = nil;
+  for (int i = 0; i < 3 && current; i++) {
+    if ([NSStringFromClass([current class]) isEqualToString:@"RCTParagraphComponentView"]) {
+      target = current;
+      break;
     }
     current = current.superview;
   }
-  if (!attrStr) return 0;
+
+  if (!target) return;
+
+  NSAttributedString *attrStr = nil;
+  if ([target respondsToSelector:@selector(attributedText)]) {
+    attrStr = [target performSelector:@selector(attributedText)];
+  }
+  if (!attrStr || attrStr.length == 0) return;
 
   UIFont *f = [attrStr attribute:NSFontAttributeName atIndex:0 effectiveRange:nil];
-  if (!f) return 0;
+  if (!f) return;
+
+  _isInlineInText = YES;
+  _paragraphView = target;
 
+  // Derive the distance from this view's bottom edge to the text baseline.
+  // Respects custom RN lineHeight (mapped to NSParagraphStyle.maximumLineHeight)
+  // and any baseline offset applied by Fabric's text layout.
   NSParagraphStyle *style = [attrStr attribute:NSParagraphStyleAttributeName
                                        atIndex:0 effectiveRange:nil];
   CGFloat lineHeight = (style && style.maximumLineHeight > 0)
@@ -117,22 +160,79 @@ using namespace facebook::react;
   CGFloat posInLine = fmod(frameBottom, lineHeight);
   if (posInLine < 0.01) posInLine = lineHeight;
 
-  return MAX(0, posInLine - baselineFromLineTop);
+  _cachedBaselineOffset = MAX(0, posInLine - baselineFromLineTop);
+}
+
+// Lazily create the drawing sublayer for inline-in-Text icons.
+// The sublayer's frame is shifted upward so the icon overflows the Yoga box.
+- (void)_ensureDrawingLayer {
+  if (_drawingLayer) return;
+  NanoIconDrawingLayer *layer = [NanoIconDrawingLayer layer];
+  layer.owner = self;
+  layer.opaque = NO;
+  layer.contentsScale = [UIScreen mainScreen].scale;
+  [self.layer addSublayer:layer];
+  _drawingLayer = layer;
+}
+
+// Re-detect inline state when the view moves to a new parent.
+- (void)didMoveToSuperview {
+  [super didMoveToSuperview];
+  _inlineDetected = NO;
+  _baselineOffsetValid = NO;
+}
+
+// Invalidate cached offset when size changes (text relayout).
+- (void)setBounds:(CGRect)bounds {
+  if (!CGSizeEqualToSize(self.bounds.size, bounds.size)) {
+    _baselineOffsetValid = NO;
+  }
+  [super setBounds:bounds];
 }
 
 #pragma mark - Layout
 
+// Standalone: no work beyond metrics validation (drawing via drawRect: on self).
+// Inline: position the drawing sublayer with the cached baseline offset,
+// recomputing only when bounds change or the view is reparented.
 - (void)layoutSubviews {
   [super layoutSubviews];
   if (!_metricsValid) [self _updateMetrics];
 
-  CGFloat offset = [self _inlineBaselineOffset];
-  _drawingView.frame = CGRectMake(0, -offset,
-                                  self.bounds.size.width, self.bounds.size.height);
+  if (!_inlineDetected) {
+    [self _detectAndCacheInlineState];
+  }
+
+  if (_isInlineInText) {
+    if (!_baselineOffsetValid) {
+      [self _detectAndCacheInlineState];
+    }
+    BOOL created = !_drawingLayer;
+    [self _ensureDrawingLayer];
+    CGRect newFrame = CGRectMake(0, -_cachedBaselineOffset,
+                                 self.bounds.size.width, self.bounds.size.height);
+    if (!CGRectEqualToRect(_drawingLayer.frame, newFrame)) {
+      [CATransaction begin];
+      [CATransaction setDisableActions:YES];
+      _drawingLayer.frame = newFrame;
+      [CATransaction commit];
+    }
+    // First layout after inline detection: the layer missed the initial
+    // setNeedsDisplay from updateProps (which targeted self before detection).
+    if (created) [_drawingLayer setNeedsDisplay];
+  }
+  // standalone: draws directly via drawRect: on self
 }
 
 #pragma mark - Drawing
 
+// Standalone icons draw directly in this view's drawRect:.
+- (void)drawRect:(CGRect)rect {
+  if (_isInlineInText) return; // inline icons draw via _drawingLayer
+  CGContextRef ctx = UIGraphicsGetCurrentContext();
+  if (ctx) [self _drawIconInContext:ctx bounds:self.bounds];
+}
+
 // Render multi-color icons by drawing each color layer glyph at the same
 // position. Layers stack via painter's order to compose the final icon.
 - (void)_drawIconInContext:(CGContextRef)context bounds:(CGRect)bounds {
@@ -229,10 +329,9 @@ using namespace facebook::react;
 
   if (oldViewProps.fontFamily != newViewProps.fontFamily ||
       oldViewProps.fontSize  != newViewProps.fontSize) {
-    if (_font) { CFRelease(_font); _font = NULL; }
     _fontFamily = [NSString stringWithUTF8String:newViewProps.fontFamily.c_str()];
     _fontSize = newViewProps.fontSize;
-    _font = CTFontCreateWithName((__bridge CFStringRef)_fontFamily, _fontSize, NULL);
+    _font = NanoIconGetCachedFont(_fontFamily, _fontSize);
     _metricsValid = NO;
     fontChanged = YES;
     needsRedraw = YES;
@@ -271,11 +370,17 @@ using namespace facebook::react;
   }
 
   [super updateProps:props oldProps:oldProps];
-  if (needsRedraw) [_drawingView setNeedsDisplay];
+  if (needsRedraw) {
+    if (_isInlineInText && _drawingLayer) {
+      [_drawingLayer setNeedsDisplay];
+    } else {
+      [self setNeedsDisplay];
+    }
+  }
 }
 
 - (void)dealloc {
-  if (_font) CFRelease(_font);
+  // _font is borrowed from static cache — do not release
   [self _releaseCachedColors];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nano-icons",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Use any svg as font. High-performance, build-time icon font generation and rendering for React Native & Expo.",
   "react-native": "src/index.ts",
   "source": "src/index.ts",