getImageSource() implementation for FontAwesome 5

RNVectorIconsManager/RNVectorIconsManager.h

@@ -19,4 +19,13 @@
 
 @interface RNVectorIconsManager : NSObject <RCTBridgeModule>
 
+- (NSString *)hexStringFromColor:(UIColor *)color;
+- (NSString *)generateFilePath:(NSString *)glyph withFontName:(NSString *)fontName
+                                                 withFontSize:(CGFloat)fontSize
+                                                 withColor:(UIColor *)color
+                                                 withExtraIdentifier:(NSString *)identifier;
+- (BOOL)createAndSaveGlyphImage:(NSString *)glyph withFont:(UIFont *)font
+                                                  withFilePath:(NSString *)filePath
+                                                  withColor:(UIColor *)color;
+
 @end

RNVectorIconsManager/RNVectorIconsManager.m

@@ -29,7 +29,8 @@ @implementation RNVectorIconsManager
 @synthesize bridge = _bridge;
 RCT_EXPORT_MODULE();
 
-- (NSString *)hexStringFromColor:(UIColor *)color {
+- (NSString *)hexStringFromColor:(UIColor *)color
+{
   const CGFloat *components = CGColorGetComponents(color.CGColor);
 
   CGFloat r = components[0];
@@ -42,19 +43,28 @@ - (NSString *)hexStringFromColor:(UIColor *)color {
           lroundf(b * 255)];
 }
 
-
-RCT_EXPORT_METHOD(getImageForFont:(NSString*)fontName withGlyph:(NSString*)glyph withFontSize:(CGFloat)fontSize withColor:(UIColor *)color callback:(RCTResponseSenderBlock)callback){
+- (NSString *)generateFilePath:(NSString *)glyph withFontName:(NSString *)fontName
+                                                 withFontSize:(CGFloat)fontSize
+                                                 withColor:(UIColor *)color
+                                                 withExtraIdentifier:(NSString *)identifier
+{
   CGFloat screenScale = RCTScreenScale();
-
   NSString *hexColor = [self hexStringFromColor:color];
+  NSString *fileName = [NSString stringWithFormat:@"tmp/RNVectorIcons_%@_%@_%hu_%.f%@@%.fx.png",
+                                                  identifier, fontName,
+                                                  [glyph characterAtIndex:0],
+                                                  fontSize, hexColor, screenScale];
+
+  return [NSHomeDirectory() stringByAppendingPathComponent:fileName];
+}
 
-  NSString *fileName = [NSString stringWithFormat:@"tmp/RNVectorIcons_%@_%hu_%.f%@@%.fx.png", fontName, [glyph characterAtIndex:0], fontSize, hexColor, screenScale];
-  NSString *filePath = [NSHomeDirectory() stringByAppendingPathComponent:fileName];
-
+- (BOOL)createAndSaveGlyphImage:(NSString *)glyph withFont:(UIFont *)font
+                                                  withFilePath:(NSString *)filePath
+                                                  withColor:(UIColor *)color
+{
   if(![[NSFileManager defaultManager] fileExistsAtPath:filePath]) {
     // No cached icon exists, we need to create it and persist to disk
 
-    UIFont *font = [UIFont fontWithName:fontName size:fontSize];
     NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:glyph attributes:@{NSFontAttributeName: font, NSForegroundColorAttributeName: color}];
 
     CGSize iconSize = [attributedString size];
@@ -65,11 +75,73 @@ - (NSString *)hexStringFromColor:(UIColor *)color {
     UIGraphicsEndImageContext();
 
     NSData *imageData = UIImagePNGRepresentation(iconImage);
-    BOOL success = [imageData writeToFile:filePath atomically:YES];
-    if(!success) {
-      return callback(@[@"Failed to write rendered icon image"]);
+    return [imageData writeToFile:filePath atomically:YES];
+  }
+
+  return YES;
+}
+
+RCT_EXPORT_METHOD(getImageForFont:(NSString *)fontName
+                  withGlyph:(NSString *)glyph
+                  withFontSize:(CGFloat)fontSize
+                  withColor:(UIColor *)color
+                  callback:(RCTResponseSenderBlock)callback)
+{
+  UIFont *font = [UIFont fontWithName:fontName size:fontSize];
+  NSString *filePath = [self generateFilePath:glyph withFontName:fontName
+                                                    withFontSize:fontSize
+                                                    withColor:color
+                                                    withExtraIdentifier:@""];
+
+  BOOL success = [self createAndSaveGlyphImage:glyph withFont:font
+                                                     withFilePath:filePath
+                                                     withColor:color];
+
+  if(!success) {
+    return callback(@[@"Failed to write rendered icon image"]);
+  }
+
+  callback(@[[NSNull null], filePath]);
+}
+
+RCT_EXPORT_METHOD(getImageForFontAwesome5:(NSString *)fontFamily
+                  withGlyph:(NSString *)glyph
+                  withFontSize:(CGFloat)fontSize
+                  withFontStyle:(NSInteger)style
+                  withColor:(UIColor *)color
+                  callback:(RCTResponseSenderBlock)callback)
+{
+  NSNumber *fontWeight = [NSNumber numberWithDouble:UIFontWeightRegular];
+  if (style == 1)
+    fontWeight = [NSNumber numberWithDouble:UIFontWeightUltraLight];
+  else if (style == 2)
+    fontWeight = [NSNumber numberWithDouble:UIFontWeightBold];
+
+  NSString *identifier = [NSString stringWithFormat:@"FA5.%ld", (long)style];
+  NSString *filePath = [self generateFilePath:glyph withFontName:fontFamily
+                                                    withFontSize:fontSize
+                                                    withColor:color
+                                                    withExtraIdentifier: identifier];
+
+  UIFont *font = [UIFont fontWithName:fontFamily size:fontSize];
+  for (NSString *fontString in [UIFont fontNamesForFamilyName:fontFamily]) {
+    UIFont *testFont = [UIFont fontWithName:fontString size:fontSize];
+    NSDictionary *traits = [testFont.fontDescriptor objectForKey:UIFontDescriptorTraitsAttribute];
+    NSNumber *testFontWeight = traits[UIFontWeightTrait];
+
+    if (testFontWeight.doubleValue == fontWeight.doubleValue) {
+      font = testFont;
+      break;
     }
   }
+
+  BOOL success = [self createAndSaveGlyphImage:glyph withFont:font
+                                                     withFilePath:filePath
+                                                     withColor:color];
+  if(!success) {
+    return callback(@[@"Failed to write rendered icon image"]);
+  }
+
   callback(@[[NSNull null], filePath]);
 }
 

lib/create-icon-set-from-fontawesome5.js

@@ -1,10 +1,12 @@
 import React, { PureComponent } from 'react';
 
-import { Platform } from 'react-native';
+import { PixelRatio, Platform, processColor } from 'react-native';
 
 import PropTypes from 'prop-types';
 
 import createIconSet, {
+  DEFAULT_ICON_COLOR,
+  DEFAULT_ICON_SIZE,
   ensureNativeModuleAvailable,
   NativeIconAPI,
 } from '../lib/create-icon-set';
@@ -40,7 +42,11 @@ export function createFA5iconSet(glyphMap, proVersion = false) {
   const LightSet = proVersion
     ? createFA5iconSubset('Light', '100')
     : RegularSet;
-  const BrandsSet = createFA5iconSubset('Brands', '400', 'Font Awesome 5 Brands');
+  const BrandsSet = createFA5iconSubset(
+    'Brands',
+    '400',
+    'Font Awesome 5 Brands'
+  );
 
   function selectIconSet(props) {
     const { brand, light, solid } = props;
@@ -94,5 +100,66 @@ export function createFA5iconSet(glyphMap, proVersion = false) {
     iconSet => iconSet.ToolbarAndroid
   );
 
+  const imageSourceCache = {};
+
+  function getImageSource(
+    name,
+    size = DEFAULT_ICON_SIZE,
+    color = DEFAULT_ICON_COLOR,
+    type = FA5Type.regular
+  ) {
+    if (Platform.OS === 'ios' && type !== FA5Type.brand) {
+      let glyph = glyphMap[name] || '?';
+      if (typeof glyph === 'number') {
+        glyph = String.fromCharCode(glyph);
+      }
+
+      const processedColor = processColor(color);
+      const cacheKey = `${glyph}:${size}:${processedColor}:${type}`;
+      const scale = PixelRatio.get();
+
+      return new Promise((resolve, reject) => {
+        const cached = imageSourceCache[cacheKey];
+        if (typeof cached !== 'undefined') {
+          if (!cached || cached instanceof Error) {
+            reject(cached);
+          } else {
+            resolve({ uri: cached, scale });
+          }
+        } else {
+          NativeIconAPI.getImageForFontAwesome5(
+            familyName,
+            glyph,
+            size,
+            type,
+            processedColor,
+            (err, image) => {
+              const error = typeof err === 'string' ? new Error(err) : err;
+              imageSourceCache[cacheKey] = image || error || false;
+              if (!error && image) {
+                resolve({ uri: image, scale });
+              } else {
+                reject(error);
+              }
+            }
+          );
+        }
+      });
+    }
+
+    switch (type) {
+      case FA5Type.brand:
+        return BrandsSet.getImageSource(name, size, color);
+      case FA5Type.light:
+        return LightSet.getImageSource(name, size, color);
+      case FA5Type.solid:
+        return SolidSet.getImageSource(name, size, color);
+      default:
+        return RegularSet.getImageSource(name, size, color);
+    }
+  }
+
+  FA5icon.getImageSource = getImageSource;
+
   return FA5icon;
 }