Add custom icon support to the list items &| sub items

Author: cloudx9

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>