diff --git a/README.md b/README.md
index e14ba7e..c71f17e 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,7 @@ const items = [
{
name: "Fruits",
id: 0,
+ icon: "https://images.vexels.com/media/users/3/147164/isolated/preview/6bf92415c7b2651f512aa0db5a3e1aba-red-apple-icon-fruit-by-vexels.png"
children: [{
name: "Apple",
id: 10,
@@ -59,6 +60,7 @@ const items = [
{
name: "Gems",
id: 1,
+ icon: "https://cdn4.iconfinder.com/data/icons/free-crystal-icons/512/Gemstone.png"
children: [{
name: "Quartz",
id: 20,
@@ -76,6 +78,7 @@ const items = [
{
name: "Plants",
id: 2,
+ icon: "https://banner2.kisspng.com/20180514/wqq/kisspng-leaf-plant-green-clip-art-5af9b5b7402440.7747356215263144232627.jpg"
children: [{
name: "Mother In Law\'s Tongue",
id: 30,
@@ -111,6 +114,7 @@ export default class App extends Component {
items={items}
uniqueKey='id'
subKey='children'
+ iconKey='key'
selectText='Choose some things...'
showDropDowns={true}
readOnlyHeadings={true}
@@ -155,16 +159,17 @@ Props, there are lots.
### Main
| Prop | Default | type | Desc |
| ------------- |------------- | ----- |----- |
-|items | | array |the items |
+|items | | array |the items |
|uniqueKey | 'id' | string |the unique key for your items |
-|subKey | 'sub' | string |the array of sub items within items |
-|displayKey | 'name' | string |the key for the display name / title of the item |
+|subKey | 'sub' | string |the array of sub items within items |
+|displayKey | 'name' | string |the key for the display name / title of the item |
+|iconKey | 'icon' | string |the key for the display icon / bitmap of the item |
|selectedItems | [] | array |the selected items |
-|onSelectedItemsChange | | function |function that runs when an item is toggled|
-|onSelectedItemObjectsChange | | function |function that returns the selected items as their original objects instead of an array of ids |
-|onCancel | | function |function that runs when the cancel button is pressed |
-|onConfirm | | function |function that runs when the confirm button is pressed |
-|onToggleSelector | | function |callback function that runs when the selector is toggled. receives a boolean for the open/close state of the modal |
+|onSelectedItemsChange | | function |function that runs when an item is toggled|
+|onSelectedItemObjectsChange | | function |function that returns the selected items as their original objects instead of an array of ids |
+|onCancel | | function |function that runs when the cancel button is pressed |
+|onConfirm | | function |function that runs when the confirm button is pressed |
+|onToggleSelector | | function |callback function that runs when the selector is toggled. receives a boolean for the open/close state of the modal |
### Options
@@ -275,3 +280,4 @@ These are the styles you can change:
`button`
`confirmText`
`cancelButton`
+ `itemIconStyle`
\ No newline at end of file
diff --git a/lib/components/RowItem.js b/lib/components/RowItem.js
index 36f9faa..a6a0a64 100644
--- a/lib/components/RowItem.js
+++ b/lib/components/RowItem.js
@@ -8,7 +8,8 @@ import {
UIManager,
LayoutAnimation,
FlatList,
- StyleSheet
+ StyleSheet,
+ Image
} from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'
import RowSubItem from './RowSubItem'
@@ -163,6 +164,7 @@ class RowItem extends Component {
itemNumberOfLines,
displayKey,
selectedItems,
+ iconKey
} = this.props
const hasDropDown = item[subKey] && item[subKey].length > 0 && showDropDowns
@@ -187,6 +189,12 @@ class RowItem extends Component {
paddingVertical: 6,
}, mergedStyles.item, this._itemSelected(item) && mergedStyles.selectedItem]}
>
+
+ {iconKey && item[iconKey] && }
+
- {item[displayKey]}
+ {item[displayKey]}
{
this._itemSelected(item) ?
diff --git a/lib/components/RowSubItem.js b/lib/components/RowSubItem.js
index d428c7c..faa6fb1 100644
--- a/lib/components/RowSubItem.js
+++ b/lib/components/RowSubItem.js
@@ -55,6 +55,7 @@ class RowSubItem extends Component {
highlightedChildren,
itemNumberOfLines,
displayKey,
+ iconKey
} = this.props
const highlightChild = !selectChildren && highlightedChildren.includes(subItem[uniqueKey])
@@ -80,39 +81,44 @@ class RowSubItem extends Component {
paddingVertical: 6,
}, mergedStyles.subItem, (itemSelected || highlightChild) && mergedStyles.selectedItem]}
>
+ {iconKey && item[iconKey] && }
+
{subItem[displayKey]}
{
- itemSelected || highlightChild ?
-
- { selectedIconComponent ?
- selectedIconComponent
- :
-
- }
-
- :
- null
+ itemSelected || highlightChild ?
+
+ { selectedIconComponent ?
+ selectedIconComponent
+ :
+
+ }
+
+ :
+ null
}