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}