react-native-vector-icons - npm Package Compare versions

Comparing version 1.2.1 to 1.3.2

lib/create-icon-set.js

@@ -24,2 +24,3 @@ /**
   processColor,
+  ToolbarAndroid,
 } = React;
@@ -31,2 +32,3 @@
 var TAB_BAR_ICON_SIZE = 30;
+var TOOLBAR_ICON_SIZE = 24;
 var DEFAULT_ICON_COLOR = 'black';
@@ -46,5 +48,7 @@ var IOS7_BLUE = '#007AFF';
 
+  var IconNamePropType = React.PropTypes.oneOf(Object.keys(glyphMap));
+
   var Icon = React.createClass({
     propTypes: {
-      name: React.PropTypes.oneOf(Object.keys(glyphMap)).isRequired,
+      name: IconNamePropType.isRequired,
       size: React.PropTypes.number,
@@ -201,6 +205,6 @@ color: React.PropTypes.string,
 
-  var TabBarItem = React.createClass({
+  var TabBarItemIOS = React.createClass({
     propTypes: {
-      iconName: React.PropTypes.oneOf(Object.keys(glyphMap)).isRequired,
-      selectedIconName: React.PropTypes.oneOf(Object.keys(glyphMap)),
+      iconName: IconNamePropType.isRequired,
+      selectedIconName: IconNamePropType,
       iconSize: React.PropTypes.number,
@@ -224,3 +228,3 @@ },
     componentWillReceiveProps: function(nextProps) {
-      var keys = Object.keys(TabBarItem.propTypes);
+      var keys = Object.keys(TabBarItemIOS.propTypes);
       if(!isEqual(pick(nextProps, keys), pick(this.props, keys))) {
@@ -236,4 +240,59 @@ this.updateIconSources(nextProps);
 
+  var IconToolbarAndroid = React.createClass({
+    propTypes: {
+      navIconName: IconNamePropType,
+      overflowIconName: IconNamePropType,
+      actions: React.PropTypes.arrayOf(React.PropTypes.shape({
+        title: React.PropTypes.string.isRequired,
+        iconName: IconNamePropType,
+        iconSize: React.PropTypes.number,
+        iconColor: React.PropTypes.string,
+        show: React.PropTypes.oneOf(['always', 'ifRoom', 'never']),
+        showWithText: React.PropTypes.bool
+      })),
+      iconSize: React.PropTypes.number,
+      iconColor: React.PropTypes.string,
+    },
+
+    updateIconSources: function(props) {
+      var size = this.props.iconSize || TOOLBAR_ICON_SIZE;
+      var color = props.iconColor || props.titleColor;
+      if(props.navIconName) {
+        getImageSource(props.navIconName, size, color).then(navIcon => this.setState({ navIcon }));
+      }
+      if(props.overflowIconName) {
+        getImageSource(props.overflowIconName, size, color).then(overflowIcon => this.setState({ overflowIcon }));
+      }
+
+      Promise.all((props.actions || []).map(action => {
+        if (action.iconName) {
+          return getImageSource(action.iconName, action.iconSize || size, action.iconColor || color).then(icon => ({
+            ...action,
+            icon
+          }));
+        }
+        return Promise.resolve(action);
+      })).then(actions => this.setState({ actions }));
+    },
+
+    componentWillMount: function() {
+      this.updateIconSources(this.props);
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+      var keys = Object.keys(IconToolbarAndroid.propTypes);
+      if(!isEqual(pick(nextProps, keys), pick(this.props, keys))) {
+        this.updateIconSources(nextProps);
+      }
+    },
+
+    render: function() {
+      return <ToolbarAndroid {...this.props} {...this.state} />;
+    }
+  });
+
   Icon.Button = IconButton;
-  Icon.TabBarItem = TabBarItem;
+  Icon.TabBarItem = TabBarItemIOS;
+  Icon.TabBarItemIOS = TabBarItemIOS;
+  Icon.ToolbarAndroid = IconToolbarAndroid;
   Icon.getImageSource = getImageSource;
@@ -240,0 +299,0 @@

package.json

 {
   "name": "react-native-vector-icons",
-  "version": "1.2.1",
+  "version": "1.3.2",
   "description": "Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling. Choose from 3000+ bundled icons or use your own.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -45,3 +45,3 @@ ![Vector Icons for React Native](https://cloud.githubusercontent.com/assets/378279/12009887/33f4ae1c-ac8d-11e5-8666-7a87458753ee.png)
 * Browse to `node_modules/react-native-vector-icons` and select the folder `Fonts` (or just the ones you want). **Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder**.
-* Edit `Info.plist` and add a property called **Fonts provided by application** (if you haven't added one already) and type in the files you just added. It will look something like this:
+* Edit `Info.plist` and add a property called **Fonts provided by application** (or `UIAppFonts` if Xcode won't autocomplete/not using Xcode) and type in the files you just added. It will look something like this:
 
@@ -74,5 +74,5 @@ ![XCode screenshot](https://cloud.githubusercontent.com/assets/378279/12421498/2db1f93a-be88-11e5-89c8-2e563ba6251a.png)
 
-##### Integrating library for `getImageSource` support
+##### Integrating library for `getImageSource` and `ToolbarAndroid` support
 
-These steps are optional and only needed if you want to use the `Icon.getImageSource` function. 
+These steps are optional and only needed if you want to use the `Icon.getImageSource` function or using custom icons in the `Icon.ToolbarAndroid` component. 
 
@@ -101,4 +101,4 @@ * Edit `android/settings.gradle` to look like this (without the +):
     compile fileTree(dir: 'libs', include: ['*.jar'])
-    compile 'com.android.support:appcompat-v7:23.0.0'
-    compile 'com.facebook.react:react-native:0.16.+'
+    compile "com.android.support:appcompat-v7:23.0.1"
+    compile "com.facebook.react:react-native:+"  // From node_modules
   + compile project(':react-native-vector-icons')
@@ -159,4 +159,6 @@ }
 
-By combining some of these you can create for example: 
+NOTE: On android `Text` doesn't currently support `border*` styles, to circumvent this simply wrap your `Icon` with a `View`.  
 
+By combining some of these you can create for example : 
+
 ![type](https://cloud.githubusercontent.com/assets/378279/7667570/33817554-fc0d-11e4-9ad7-4eb60139cfb7.png)
@@ -209,3 +211,3 @@ ![star](https://cloud.githubusercontent.com/assets/378279/7667569/3010dd7e-fc0d-11e4-9696-cb721fe8e98d.png)
 
-Simply use `Icon.TabBarItem` instead of `TabBarIOS.Item`. This is an extended component that works exactly the same but with three additional properties: 
+Simply use `Icon.TabBarItemIOS` instead of `TabBarIOS.Item`. This is an extended component that works exactly the same but with three additional properties: 
 
@@ -240,2 +242,16 @@ | Prop | Description | Default |
 
+## Usage with [ToolbarAndroid](http://facebook.github.io/react-native/docs/toolbarandroid.html)
+
+Simply use `Icon.ToolbarAndroid` instead of `React.ToolbarAndroid`, this is composition of the underlying `ToolbarAndroid` component that works the same but any `*icon` property also takes `*iconName`: 
+
+| Prop | Description | Default |
+|---|---|---|
+|**`navIconName`**|Name of the navigation icon (similar to `ToolbarAndroid` `navIcon`)|*None*|
+|**`overflowIconName`**|Name of the overflow icon (similar to `ToolbarAndroid` `overflowIcon`). |*none*|
+|**`actions`**|Possible actions on the toolbar as part of the action menu, takes the additional arguments `iconName`, `iconColor` and `iconSize`. |*none*|
+|**`iconSize`**|Size of the icons. |`24`|
+|**`iconColor`**|Color of the icons. |`black`|
+
+For example usage see `Examples/IconExplorer/index.android.js`or the examples section below. Don't forget to import and link to this project as described above if you are going to use the ToolbarAndroid integration. 
+
 ## Custom Fonts
@@ -292,3 +308,3 @@
 
-### TabBar
+### TabBarIOS
 Full example in `TabBarExample` project in `Examples/TabBarExample` folder. 
@@ -322,2 +338,27 @@
 
+### ToolbarAndroid
+
+```js
+var React = require('react-native');
+var Icon = require('react-native-vector-icons/Ionicons');
+
+var ToolbarView = React.createClass({
+  render: function() {
+    return (
+      <Icon.ToolbarAndroid>
+        title="Home"
+        titleColor="white"
+        navIconName="android-arrow-back"
+        onIconClicked={this.props.navigator.pop}
+        actions={[
+          { title: 'Settings', iconName: 'gear-a', iconSize: 30, show: 'always' },
+          { title: 'Follow me on Twitter', iconName: 'social-twitter', iconColor: "#4099FF", show: 'ifRoom' },
+        ]}
+        overflowIconName="more"
+      />
+    );
+  }
+};
+```
+
 ### Inline Icons
@@ -324,0 +365,0 @@ ```js

No alert changes

Improved metrics

Total package byte prevSize

833132

increased by0.47%

Lines of code

4007

increased by1.31%

Number of lines in readme file

429

increased by10.57%

No dependency changes