- upgrading RNVectorIcons

- Font family lookup hot fix

Author: prscms

Example/package.json

@@ -7,15 +7,15 @@
     "test": "jest"
   },
   "dependencies": {
-    "react": "16.4.1",
-    "react-native": "0.56.0",
+    "react": "16.3.1",
+    "react-native": "0.55.3",
     "react-native-notification-banner": "../"
   },
   "devDependencies": {
-    "babel-jest": "23.4.0",
-    "babel-preset-react-native": "^5",
-    "jest": "23.4.1",
-    "react-test-renderer": "16.4.1"
+    "babel-jest": "22.1.0",
+    "babel-preset-react-native": "4.0.0",
+    "jest": "22.1.4",
+    "react-test-renderer": "16.2.0"
   },
   "jest": {
     "preset": "react-native"

android/src/main/java/ui/notificationbanner/RNNotificationBannerModule.java

@@ -134,42 +134,42 @@ public void onHide() {
   }
 
 
-  @TargetApi(21)
+  @TargetApi(21) 
   private Drawable generateVectorIcon(ReadableMap icon) {
     StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
     StrictMode.setThreadPolicy(policy);
-
+ 
     String family = icon.getString("family");
     String name = icon.getString("name");
     String glyph = icon.getString("glyph");
     String color = icon.getString("color");
     int size = icon.getInt("size");
-
+ 
     if (name != null && name.length() > 0 && name.contains(".")) {
       Resources resources = getReactApplicationContext().getResources();
       name = name.substring(0, name.lastIndexOf("."));
-
+ 
       final int resourceId = resources.getIdentifier(name, "drawable", getReactApplicationContext().getPackageName());
       return getReactApplicationContext().getDrawable(resourceId);
-    }
-
+    } 
+ 
     float scale = getReactApplicationContext().getResources().getDisplayMetrics().density;
     String scaleSuffix = "@" + (scale == (int) scale ? Integer.toString((int) scale) : Float.toString(scale)) + "x";
     int fontSize = Math.round(size * scale);
-
+ 
     Typeface typeface = ReactFontManager.getInstance().getTypeface(family, 0, getReactApplicationContext().getAssets());
     Paint paint = new Paint();
     paint.setTypeface(typeface);
     paint.setColor(Color.parseColor(color));
-    paint.setTextSize(size);
+    paint.setTextSize(fontSize);
     paint.setAntiAlias(true);
     Rect textBounds = new Rect();
     paint.getTextBounds(glyph, 0, glyph.length(), textBounds);
-
+ 
     Bitmap bitmap = Bitmap.createBitmap(textBounds.width(), textBounds.height(), Bitmap.Config.ARGB_8888);
     Canvas canvas = new Canvas(bitmap);
     canvas.drawText(glyph, -textBounds.left, -textBounds.top, paint);
-
+ 
     return new BitmapDrawable(getReactApplicationContext().getResources(), bitmap);
   }
 }

js/RNNotificationBanner.js

@@ -103,8 +103,8 @@ class NotificationBanner extends PureComponent {
       if (props.icon && props.icon.props) {
         let icon = props.icon.props;
 
-        let glyph = RNVectorHelper.Resolve(icon.family, icon.name);
-        props.icon = Object.assign({}, icon, { glyph: glyph });
+        let vectorIcon = RNVectorHelper.Resolve(icon.family, icon.name);
+        props.icon = Object.assign({}, icon, vectorIcon);
       }
     } else {
       props.icon = undefined;

js/RNVectorHelper.js

@@ -10,88 +10,126 @@ import OcticonsGlyphMap from "react-native-vector-icons/glyphmaps/Octicons.json"
 import SimpleLineIconsGlyphMap from "react-native-vector-icons/glyphmaps/SimpleLineIcons.json";
 import ZocialGlyphMap from "react-native-vector-icons/glyphmaps/Zocial.json";
 
+import { Platform } from "react-native";
+
 class RNVectorHelper {
   static Resolve(family, name) {
-    let glyph;
+    let glyph, fontFamily;
 
     switch (family) {
       case "Entypo":
         glyph = EntypoGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
+        fontFamily = "Entypo";
 
-        return glyph;
+        return { glyph: glyph, family: fontFamily };
       case "EvilIcons":
         glyph = EvilIconsGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
+        fontFamily = "EvilIcons";
 
-        return glyph;
+        return { glyph: glyph, family: fontFamily };
       case "Feather":
         glyph = FeatherGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
+        fontFamily = "Feather";
 
-        return glyph;
+        return { glyph: glyph, family: fontFamily };
       case "FontAwesome":
         glyph = FontAwesomeGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
+        fontFamily = "FontAwesome";
 
-        return glyph;
+        return { glyph: glyph, family: fontFamily };
       case "Foundation":
         glyph = FoundationGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
 
-        return glyph;
+        if (Platform.OS === "ios") {
+          fontFamily = "fontcustom";
+        } else {
+          fontFamily = "Foundation";
+        }
+
+        return { glyph: glyph, family: fontFamily };
       case "Ionicons":
         glyph = IoniconsGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
+        fontFamily = "Ionicons";
 
-        return glyph;
+        return { glyph: glyph, family: fontFamily };
       case "MaterialCommunityIcons":
         glyph = MaterialCommunityIconsGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
 
-        return glyph;
+        if (Platform.OS === "ios") {
+          fontFamily = "Material Design Icons";
+        } else {
+          fontFamily = "MaterialCommunityIcons";
+        }
+
+        return { glyph: glyph, family: fontFamily };
       case "MaterialIcons":
         glyph = MaterialIconsGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
 
-        return glyph;
+        if (Platform.OS === "ios") {
+          fontFamily = "Material Icons";
+        } else {
+          fontFamily = "MaterialIcons";
+        }
+
+        return { glyph: glyph, family: fontFamily };
       case "Octicons":
         glyph = OcticonsGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
+        fontFamily = "Octicons";
 
-        return glyph;
+        return { glyph: glyph, family: fontFamily };
       case "SimpleLineIcons":
         glyph = SimpleLineIconsGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
 
-        return glyph;
+        if (Platform.OS === "ios") {
+          fontFamily = "simple-line-icons";
+        } else {
+          fontFamily = "SimpleLineIcons";
+        }
+
+        return { glyph: glyph, family: fontFamily };
       case "Zocial":
         glyph = ZocialGlyphMap[name];
         if (typeof glyph === "number") {
           glyph = String.fromCharCode(glyph);
         }
 
-        return glyph;
+        if (Platform.OS === "ios") {
+          fontFamily = "zocial";
+        } else {
+          fontFamily = "Zocial";
+        }
+
+        return { glyph: glyph, family: fontFamily };
     }
   }
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-native-notification-banner",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "ReactNative: Native Notification Banner",
-  "main": "RNNotificationBanner.js",
+  "main": "js/RNNotificationBanner.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/prscX/react-native-notification-banner.git"