diff --git a/README.md b/README.md
index 061896c..41cb8f5 100644
--- a/README.md
+++ b/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';
+
+ 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')}
+>
+ swipeout demo
+
+
+```
+
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
```
diff --git a/package.json b/package.json
index 7a8e33a..1cd58e2 100644
--- a/package.json
+++ b/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",
diff --git a/src/Swipeout.js b/src/Swipeout.js
index 016d2d8..daf08b9 100644
--- a/src/Swipeout.js
+++ b/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 = (
+ {
+ iconName && (
+
+ )
+ }
{button.text}