Adding new Icon beside <Text> tag of the list item

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`

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] && <Image source={item[iconKey]} style={[{
+             width:16,
+             marginHorizontal:10
+           }, mergedStyles.itemIconStyle ]} />}
+
             <Text
               numberOfLines={itemNumberOfLines}
               style={
@@ -198,7 +206,7 @@ class RowItem extends Component {
                 mergedStyles.itemText, this._itemSelected(item) && mergedStyles.selectedItemText
               ]}
             >
-              {item[displayKey]}
+             {item[displayKey]}
             </Text>
             {
             this._itemSelected(item) ?

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] && <Image source={item[iconKey]} style={[{
+            width: 16,
+            marginHorizontal: 10
+          }, mergedStyles.itemIconStyle]} />}
+
           <Text
             numberOfLines={itemNumberOfLines}
             style={
               [{
-                flex: 1, 
+                flex: 1,
                 color: subItem.disabled ? mergedColors.disabled : mergedColors.subText,
-              }, 
-                subItemFontFamily, 
-                mergedStyles.subItemText, 
-                (itemSelected || highlightChild) && mergedStyles.selectedSubItemText,
+              },
+                subItemFontFamily,
+              mergedStyles.subItemText,
+              (itemSelected || highlightChild) && mergedStyles.selectedSubItemText,
               ]
             }
           >
             {subItem[displayKey]}
           </Text>
           {
-          itemSelected || highlightChild ?
-            <View>
-              { selectedIconComponent ?
-                selectedIconComponent
-                :
-                <Icon
-                  name="check"
-                  style={{
-                    fontSize: 16,
-                    color: highlightChild ? mergedColors.disabled : mergedColors.success,
-                    paddingLeft: 10,
-                  }}
-                />
-              }
-            </View>
-          :
-          null
+            itemSelected || highlightChild ?
+              <View>
+                { selectedIconComponent ?
+                  selectedIconComponent
+                  :
+                  <Icon
+                    name="check"
+                    style={{
+                      fontSize: 16,
+                      color: highlightChild ? mergedColors.disabled : mergedColors.success,
+                      paddingLeft: 10,
+                    }}
+                  />
+                }
+              </View>
+              :
+              null
           }
         </TouchableOpacity>
       </View>