[react-native only] Added Icon capability

README.md

@@ -38,7 +38,7 @@ tnpm run rn-start
 - local: http://localhost:8000/examples/
 - online: http://react-component.github.io/swipeout/
 
-## Usage
+## Normal usage
 
 ```js
 import Swipeout from 'rc-swipeout';
@@ -67,6 +67,39 @@ import 'rc-swipeout/assets/index.less';
 
 ```
 
+## Usage with text and Icon [React Native only for the moment]
+
+```js
+import Swipeout from 'rc-swipeout/lib';
+import 'rc-swipeout/assets/index.less';
+
+<Swipeout
+  left={[
+    {
+      text: 'reply',
+      onPress:() => console.log('reply'),
+      style: { backgroundColor: 'orange', color: 'white' },
+      icon: {
+        name: 'clock-o',
+        size: 30
+      }
+    }
+  ]}
+  right={[
+    {
+      text: 'delete',
+      onPress:() => console.log('delete'),
+      style: { backgroundColor: 'red', color: 'white' }
+    }
+  ]}
+  onOpen={() => console.log('open')}
+  onClose={() => console.log('close')}
+>
+  <div style={{height: 44}}> swipeout demo </div>
+</Swipeout>
+
+```
+
 For the React Native version, use the following import statement.
 
 ```js
@@ -93,9 +126,24 @@ import Swipeout from 'rc-swipeout/lib'
 | name        | description                   | type   | default    |
 |-------------|------------------------|--------|------------|
 | text       | button text     | String | `Click` |
+| icon       | icon props      | Object | undefined |
 | style       | button style     | Object | `` |
 | onPress       | button press function      | Function | `function() {}` |
 
+### icon props [React Native only for the moment]
+
+| name        | description                   | type   | default    |
+|-------------|------------------------|--------|------------|
+| name       | font-awesome name without `fa fa-`     | String | undefined |
+| color       | icon props      | String | `black` |
+| style       | icon style     | Object | `` |
+| size       | icon size     | number | 15 |
+
+### Pay attention
+This package depends on the beautiful [Vector Icons for React Native](https://github.com/oblador/react-native-vector-icons).
+
+After installing NavbarNative, in order to have **icons working**, please follow instructions about [HOW TO INSTALL AND LINK VECTOR ICONS](https://github.com/oblador/react-native-vector-icons) in your project.
+
 ## Test Case
 
 ```

package.json

@@ -43,7 +43,8 @@
     "babel-runtime": "6.x",
     "object.omit": "~2.0.0",
     "react-hammerjs": "^0.5.0",
-    "react-native-swipe-out": "~2.0.12"
+    "react-native-swipe-out": "~2.0.12",
+    "react-native-vector-icons": "^4.0.0"
   },
   "devDependencies": {
     "expect.js": "0.3.x",

src/Swipeout.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { View, Text } from 'react-native';
 import Swipe from 'react-native-swipe-out';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import splitObject from './util/splitObject';
 
 class Swipeout extends React.Component {
@@ -35,12 +36,30 @@ class Swipeout extends React.Component {
   renderCustomButton(button) {
     const buttonStyle = button.style || {};
     const bgColor = buttonStyle.backgroundColor || 'transparent';
+    const icon = button.icon || undefined;
+    const iconStyle = icon && icon.style || {};
+    // TODO: support Ionicons, MaterialIcons etc
+    // const iconType = icon && icon.type || 'FontAwesome';
+    const iconName = icon && icon.name;
+    const iconSize = icon && icon.size || 15;
+    const iconColor = icon && icon.color || iconStyle.color || 'black';
+
     const Component = (
       <View
         style={{
           flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: bgColor,
         }}
       >
+      {
+        iconName && (
+          <Icon
+            name={iconName}
+            color={iconColor}
+            style={iconStyle}
+            size={iconSize}
+          />
+        )
+      }
         <Text style={[button.style, { textAlign: 'center' }]}>
           {button.text}
         </Text>