Fully working TabBarIOS support.

lib/create-icon-set.js

@@ -9,6 +9,7 @@ var {
   View,
   Text,
   StyleSheet,
+  TabBarIOS,
 } = React;
 var NativeModules = require('NativeModules');
 var RNVectorIconsManager = NativeModules.RNVectorIconsManager;
@@ -18,6 +19,8 @@ var flattenStyle = require('flattenStyle');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 var TextStylePropTypes = require('TextStylePropTypes');
 
+var DEFAULT_ICON_SIZE = 12;
+var TAB_BAR_ICON_SIZE = 30;
 
 function createIconSet(glyphMap, fontFamily) {
   var styles = StyleSheet.create({
@@ -58,7 +61,7 @@ function createIconSet(glyphMap, fontFamily) {
         Object.keys(TextStylePropTypes)
       );
 
-      var size = this.props.size || textStyle.fontSize || 12;
+      var size = this.props.size || textStyle.fontSize || DEFAULT_ICON_SIZE;
       textStyle.fontSize    = size;
       textStyle.lineHeight  = size;
       textStyle.height      = size;
@@ -75,27 +78,66 @@ function createIconSet(glyphMap, fontFamily) {
       );
     }
   });
-  Icon.getImageSource = function(name, size, callback) {
+
+  var imageSourceCache = {};
+
+  var getImageSource = function(name, size, callback) {
     invariant(RNVectorIconsManager, 'RNVectorIconsManager not available, did you add the library to your project and link with libRNVectorIcons.a?');
 
     var glyph = glyphMap[name] || '?';
     if(typeof glyph === 'number') {
       glyph = String.fromCharCode(glyph);
     }
+    size = size || DEFAULT_ICON_SIZE;
+
+    var cacheKey = glyph + ':' + size;
 
     return new Promise((resolve, reject) => {
-      RNVectorIconsManager.getImageForFont(fontFamily, glyph, size || 12, function(err, image) {
-        callback && callback(err, image);
+      if(imageSourceCache[cacheKey]) {
+        return resolve({ uri: imageSourceCache[cacheKey] });
+      }
+      RNVectorIconsManager.getImageForFont(fontFamily, glyph, size, function(err, image) {
+        var result;
+        if(!err && image) {
+          imageSourceCache[cacheKey] = image;
+          result = { uri: image };
+        }
+        callback && callback(err, result);
         if (err) {
           reject(err);
         } else {
-          resolve(image);
+          resolve(result);
         }
       });
     });
-
   };
 
+
+  var TabBarItem = React.createClass({
+    getInitialState: function() {
+      return {
+        icon: false,
+        selectedIcon: false,
+      };
+    },
+
+    componentDidMount: function() {
+      var size = this.props.iconSize || TAB_BAR_ICON_SIZE;
+      if(this.props.iconName) {
+        getImageSource(this.props.iconName, size).then((image) => this.setState({ icon: image }));
+      }
+      if(this.props.selectedIconName) {
+        getImageSource(this.props.selectedIconName, size).then((image) => this.setState({ selectedIcon: image }));
+      }
+    },
+
+    render: function() {
+      return <TabBarIOS.Item {...this.props} {...this.state} />;
+    }
+  });
+
+  Icon.TabBarItem = TabBarItem;
+
   return Icon;
 };