diff --git a/exampleapp/App.js b/exampleapp/App.js
index daad2a6..5f5fcc5 100644
--- a/exampleapp/App.js
+++ b/exampleapp/App.js
@@ -11,10 +11,12 @@ import {
   ActivityIndicator,
   Dimensions,
   LayoutAnimation,
+  Image,
 } from 'react-native'
 import SectionedMultiSelect from 'react-native-sectioned-multi-select'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-const img = require('./z.jpg');
+// import Icon from 'react-native-vector-icons/MaterialIcons'
+
+const img = require('./z.jpg')
 
 // Sorry for the mess
 
@@ -22,12 +24,15 @@ const items = [
   {
     title: 'Fruits from various places around the world, if you like',
     id: 0,
-    icon: { uri: 'https://banner2.kisspng.com/20180514/wqq/kisspng-leaf-plant-green-clip-art-5af9b5b7402440.7747356215263144232627.jpg'},
-    
+    icon: {
+      uri:
+        'https://banner2.kisspng.com/20180514/wqq/kisspng-leaf-plant-green-clip-art-5af9b5b7402440.7747356215263144232627.jpg',
+    },
+
     children: [
       {
         title: 'Apple',
-        id: 10,        
+        id: 10,
       },
       {
         title: 'Strawberry and Banana and Pineapple and Pawpaw and Peach',
@@ -81,13 +86,12 @@ const items = [
         title: 'Apricot',
         id: 25,
       },
-
     ],
   },
   {
     title: 'Gèms',
     id: 1,
-    icon: "cake",
+    icon: 'cake',
     children: [
       {
         title: 'Quartz',
@@ -129,7 +133,6 @@ const items = [
         title: 'Palm',
         id: 33,
       },
-
     ],
   },
   {
@@ -137,7 +140,7 @@ const items = [
     id: 34,
   },
 ]
-console.log(items);
+console.log(items)
 
 // const items2 =
 //   [{
@@ -170,20 +173,21 @@ for (let i = 0; i < 100; i++) {
     title: `item ${i}`,
     children: [
       {
-        id: `10${i}`, title: `child 10${i}`,
+        id: `10${i}`,
+        title: `child 10${i}`,
       },
       {
-        id: `11${i}`,  title: `child 11${i}`,
+        id: `11${i}`,
+        title: `child 11${i}`,
       },
       {
-        id: `12${i}`,  title: `child 12${i}`,
+        id: `12${i}`,
+        title: `child 12${i}`,
       },
-            
     ],
   })
 }
 
-
 const styles = StyleSheet.create({
   center: {
     flex: 1,
@@ -223,59 +227,59 @@ const styles = StyleSheet.create({
   },
 })
 const accentMap = {
-  'â': 'a',
-  'Â': 'A',
-  'à': 'a',
-  'À': 'A',
-  'á': 'a',
-  'Á': 'A',
-  'ã': 'a',
-  'Ã': 'A',
-  'ê': 'e',
-  'Ê': 'E',
-  'è': 'e',
-  'È': 'E',
-  'é': 'e',
-  'É': 'E',
-  'î': 'i',
-  'Î': 'I',
-  'ì': 'i',
-  'Ì': 'I',
-  'í': 'i',
-  'Í': 'I',
-  'õ': 'o',
-  'Õ': 'O',
-  'ô': 'o',
-  'Ô': 'O',
-  'ò': 'o',
-  'Ò': 'O',
-  'ó': 'o',
-  'Ó': 'O',
-  'ü': 'u',
-  'Ü': 'U',
-  'û': 'u',
-  'Û': 'U',
-  'ú': 'u',
-  'Ú': 'U',
-  'ù': 'u',
-  'Ù': 'U',
-  'ç': 'c',
-  'Ç': 'C'
-};
+  â: 'a',
+  Â: 'A',
+  à: 'a',
+  À: 'A',
+  á: 'a',
+  Á: 'A',
+  ã: 'a',
+  Ã: 'A',
+  ê: 'e',
+  Ê: 'E',
+  è: 'e',
+  È: 'E',
+  é: 'e',
+  É: 'E',
+  î: 'i',
+  Î: 'I',
+  ì: 'i',
+  Ì: 'I',
+  í: 'i',
+  Í: 'I',
+  õ: 'o',
+  Õ: 'O',
+  ô: 'o',
+  Ô: 'O',
+  ò: 'o',
+  Ò: 'O',
+  ó: 'o',
+  Ó: 'O',
+  ü: 'u',
+  Ü: 'U',
+  û: 'u',
+  Û: 'U',
+  ú: 'u',
+  Ú: 'U',
+  ù: 'u',
+  Ù: 'U',
+  ç: 'c',
+  Ç: 'C',
+}
 const tintColor = '#174A87'
 
-const Loading = props => (
-  props.hasErrored ?
+const Loading = props =>
+  (props.hasErrored ? (
     <TouchableWithoutFeedback onPress={props.fetchCategories}>
       <View style={styles.center}>
         <Text>oops... something went wrong. Tap to reload</Text>
       </View>
     </TouchableWithoutFeedback>
-    :
+  ) : (
     <View style={styles.center}>
       <ActivityIndicator size="large" />
     </View>
-)
+  ))
 
 const Toggle = props => (
   <TouchableWithoutFeedback onPress={() => props.onPress(!props.val)} disabled={props.disabled}>
@@ -303,19 +307,95 @@ export default class App extends Component {
       selectChildren: false,
       hasErrored: false,
     }
-    this.termId = 100;
+    this.termId = 100
   }
 
-
   componentWillMount() {
-   // this.fetchCategories()
-   this.pretendToLoad()
+    // this.fetchCategories()
+    this.pretendToLoad()
   }
   componentDidMount() {
     // programatically opening the select
     // this.SectionedMultiSelect._toggleSelector();
   }
 
+  // custom icon renderer passed to iconRenderer prop
+  // see the switch for possible icon name
+  // values
+  icon = ({ name, size = 18, style }) => {
+    // flatten the styles
+    const flat = StyleSheet.flatten(style)
+    // remove out the keys that aren't accepted on View
+    const { color, fontSize, ...styles } = flat
+
+    let iconComponent
+    // the colour in the url on this site has to be a hex w/o hash
+    const iconColor = color && color.substr(0, 1) === '#' ? `${color.substr(1)}/` : ''
+
+    const Search = (
+      <Image
+        source={{ uri: `https://png.icons8.com/search/${iconColor}ios/` }}
+        style={{ width: size, height: size }}
+      />
+    )
+    const Down = (
+      <Image
+        source={{ uri: `https://png.icons8.com/arrow-down/${iconColor}ios/` }}
+        style={{ width: size, height: size }}
+      />
+    )
+    const Up = (
+      <Image
+        source={{ uri: `https://png.icons8.com/arrow-up/${iconColor}ios/` }}
+        style={{ width: size, height: size }}
+      />
+    )
+    const Close = (
+      <Image
+        source={{ uri: `https://png.icons8.com/close-button/${iconColor}ios/` }}
+        style={{ width: size, height: size }}
+      />
+    )
+
+    const Check = (
+      <Image
+        source={{ uri: `https://png.icons8.com/check-mark/${iconColor}ios/` }}
+        style={{ width: size, height: size }}
+      />
+    )
+    const Cancel = (
+      <Image
+        source={{ uri: `https://png.icons8.com/cancel/${iconColor}ios/` }}
+        style={{ width: size, height: size }}
+      />
+    )
+
+    switch (name) {
+      case 'search':
+        iconComponent = Search
+        break
+      case 'keyboard-arrow-up':
+        iconComponent = Up
+        break
+      case 'keyboard-arrow-down':
+        iconComponent = Down
+        break
+      case 'close':
+        iconComponent = Close
+        break
+      case 'check':
+        iconComponent = Check
+        break
+      case 'cancel':
+        iconComponent = Cancel
+        break
+      default:
+        iconComponent = null
+        break
+    }
+    return <View style={styles}>{iconComponent}</View>
+  }
+
   getProp = (object, key) => object && this.removerAcentos(object[key])
 
   rejectProp = (items, fn) => items.filter(fn)
@@ -328,11 +408,7 @@ export default class App extends Component {
   }
 
   // testing a custom filtering function that ignores accents
-  removerAcentos = (s) => {
-    return s.replace(/[\W\[\] ]/g, function (a) {
-      return accentMap[a] || a
-    })
-  };
+  removerAcentos = s => s.replace(/[\W\[\] ]/g, a => accentMap[a] || a)
 
   filterItems = (searchTerm, items, { subKey, displayKey, uniqueKey }) => {
     let filteredItems = []
@@ -349,8 +425,10 @@ export default class App extends Component {
         item[subKey].forEach((sub) => {
           if (regex.test(this.getProp(sub, displayKey))) {
             newItem[subKey] = [...newItem[subKey], sub]
-            newFilteredItems = this.rejectProp(filteredItems, singleItem =>
-              item[uniqueKey] !== singleItem[uniqueKey])
+            newFilteredItems = this.rejectProp(
+              filteredItems,
+              singleItem => item[uniqueKey] !== singleItem[uniqueKey],
+            )
             newFilteredItems.push(newItem)
             filteredItems = newFilteredItems
           }
@@ -379,7 +457,7 @@ export default class App extends Component {
     this.setState({
       selectedItems: this.state.currentItems,
     })
-    console.log(this.state.selectedItems);
+    console.log(this.state.selectedItems)
   }
   onSelectedItemObjectsChange = (selectedItemObjects) => {
     this.setState({ selectedItemObjects })
@@ -406,7 +484,9 @@ export default class App extends Component {
   }
   fetchCategories = () => {
     this.setState({ hasErrored: false })
-    fetch('http://www.mocky.io/v2/5a5573a22f00005c04beea49?mocky-delay=500ms', { headers: 'no-cache' })
+    fetch('http://www.mocky.io/v2/5a5573a22f00005c04beea49?mocky-delay=500ms', {
+      headers: 'no-cache',
+    })
       .then(response => response.json())
       .then((responseJson) => {
         this.setState({ cats: responseJson })
@@ -416,120 +496,134 @@ export default class App extends Component {
         throw error.message
       })
   }
-  filterDuplicates = items => items.sort().reduce((accumulator, current) => {
-    const length = accumulator.length
-    if (length === 0 || accumulator[length - 1] !== current) {
-      accumulator.push(current)
-    }
-    return accumulator
-  }, []);
-
+  filterDuplicates = items =>
+    items.sort().reduce((accumulator, current) => {
+      const length = accumulator.length
+      if (length === 0 || accumulator[length - 1] !== current) {
+        accumulator.push(current)
+      }
+      return accumulator
+    }, [])
 
-  noResults =
+  noResults = (
     <View key="a" style={styles.center}>
       <Text>Sorry! No results...</Text>
-    </View>;
+    </View>
+  )
 
   handleAddSearchTerm = () => {
-    const searchTerm = this.SectionedMultiSelect._getSearchTerm();
-    const id = this.termId += 1;
-    if ( searchTerm.length && !(this.state.items || []).some( item => item.title.includes(searchTerm) ) ) {
-      const newItem = { id: id, title: searchTerm };
-      this.setState(prevState => ({items: [...prevState.items || [], newItem]}));
+    const searchTerm = this.SectionedMultiSelect._getSearchTerm()
+    const id = (this.termId += 1)
+    if (
+      searchTerm.length &&
+      !(this.state.items || []).some(item => item.title.includes(searchTerm))
+    ) {
+      const newItem = { id, title: searchTerm }
+      this.setState(prevState => ({ items: [...(prevState.items || []), newItem] }))
       this.onSelectedItemsChange([...this.state.selectedItems, id])
       this.SectionedMultiSelect._submitSelection()
     }
   }
 
   renderSelectText = () => {
-    const { selectedItemObjects } = this.state;
-
-    return selectedItemObjects.length ?
-      `I like ${selectedItemObjects.map((item, i) => {
-        let label = `${item.title}, `
-        if (i === selectedItemObjects.length - 2) label = `${item.title} and `
-        if (i === selectedItemObjects.length - 1) label = `${item.title}.`
-        return label
-      }).join('')}`
-      :
-      'Select a fruit'
+    const { selectedItemObjects } = this.state
+
+    return selectedItemObjects.length
+      ? `I like ${selectedItemObjects
+        .map((item, i) => {
+          let label = `${item.title}, `
+          if (i === selectedItemObjects.length - 2) label = `${item.title} and `
+          if (i === selectedItemObjects.length - 1) label = `${item.title}.`
+          return label
+        })
+        .join('')}`
+      : 'Select a fruit'
   }
-searchAdornment = (searchTerm) => {
-  return(
-    searchTerm.length ?
-      <TouchableOpacity 
-        style={{ alignItems: 'center', justifyContent: 'center'}} 
+  searchAdornment = searchTerm =>
+    (searchTerm.length ? (
+      <TouchableOpacity
+        style={{ alignItems: 'center', justifyContent: 'center' }}
         onPress={this.handleAddSearchTerm}
       >
-        <View>
-          <Icon
-            size={18}
-            style={{ marginHorizontal: 15 }}
-            name="add"
-           />
+        <View style={{}}>
+          <Image
+            source={{ uri: 'https://png.icons8.com/plus' }}
+            style={{ width: 16, height: 16, marginHorizontal: 15 }}
+          />
+          {/*   <Icon size={18} style={{ marginHorizontal: 15 }} name="add" /> */}
         </View>
       </TouchableOpacity>
-    : 
-    null
-  )
-}
-  SelectOrRemoveAll = () => (
-    this.SectionedMultiSelect && 
-    <TouchableOpacity
-      style={{
-        justifyContent: 'center',
-        height: 44,
-        borderWidth: 0,
-        paddingHorizontal: 10,
-        backgroundColor: 'darkgrey',
-        alignItems: 'center',
-      }}
-      onPress={
-        this.state.selectedItems.length
-          ? this.SectionedMultiSelect._removeAllItems
-          : this.SectionedMultiSelect._selectAllItems
-      }
-    >
-      <Text style={{ color: 'white', fontWeight: 'bold' }}>
-        {this.state.selectedItems.length ? 'Remove' : 'Select'} all
-      </Text>
-    </TouchableOpacity>
-  )
+    ) : null)
+  SelectOrRemoveAll = () =>
+    this.SectionedMultiSelect && (
+      <TouchableOpacity
+        style={{
+          justifyContent: 'center',
+          height: 44,
+          borderWidth: 0,
+          paddingHorizontal: 10,
+          backgroundColor: 'darkgrey',
+          alignItems: 'center',
+        }}
+        onPress={
+          this.state.selectedItems.length
+            ? this.SectionedMultiSelect._removeAllItems
+            : this.SectionedMultiSelect._selectAllItems
+        }
+      >
+        <Text style={{ color: 'white', fontWeight: 'bold' }}>
+          {this.state.selectedItems.length ? 'Remove' : 'Select'} all
+        </Text>
+      </TouchableOpacity>
+    )
 
   onToggleSelector = (toggled) => {
-    console.log('selector is ', toggled ? 'open' : 'closed');
+    console.log('selector is ', toggled ? 'open' : 'closed')
   }
   customChipsRenderer = (props) => {
-    console.log('props', props);
+    console.log('props', props)
     return (
-      <View style={{backgroundColor: 'yellow', padding: 15,}}>
-      <Text>Selected:</Text>
+      <View style={{ backgroundColor: 'yellow', padding: 15 }}>
+        <Text>Selected:</Text>
         {props.selectedItems.map((singleSelectedItem) => {
           const item = this.SectionedMultiSelect._findItem(singleSelectedItem)
 
           if (!item || !item[props.displayKey]) return null
 
           return (
-            <View key={item[props.uniqueKey]} style={{ flex: 0,marginRight: 5, padding: 10, backgroundColor: 'orange' }}>
-              <TouchableOpacity onPress={() => { this.SectionedMultiSelect._removeItem(item) }}>
-                  <Text>{item[props.displayKey]}</Text>
+            <View
+              key={item[props.uniqueKey]}
+              style={{
+                flex: 0,
+                marginRight: 5,
+                padding: 10,
+                backgroundColor: 'orange',
+              }}
+            >
+              <TouchableOpacity
+                onPress={() => {
+                  this.SectionedMultiSelect._removeItem(item)
+                }}
+              >
+                <Text>{item[props.displayKey]}</Text>
               </TouchableOpacity>
             </View>
-            )
-        })} 
+          )
+        })}
       </View>
     )
   }
   render() {
     return (
-      <ScrollView keyboardShouldPersistTaps="always" style={{ backgroundColor: '#f8f8f8' }} contentContainerStyle={styles.container}>
-        <Text style={styles.welcome}>
-            React native sectioned multi select example.
-
-        </Text>
+      <ScrollView
+        keyboardShouldPersistTaps="always"
+        style={{ backgroundColor: '#f8f8f8' }}
+        contentContainerStyle={styles.container}
+      >
+        <Text style={styles.welcome}>React native sectioned multi select example.</Text>
         <SectionedMultiSelect
           items={this.state.items}
-          ref={SectionedMultiSelect => this.SectionedMultiSelect = SectionedMultiSelect}
+          ref={SectionedMultiSelect => (this.SectionedMultiSelect = SectionedMultiSelect)}
           uniqueKey="id"
           subKey="children"
           displayKey="title"
@@ -537,33 +631,25 @@ searchAdornment = (searchTerm) => {
           autoFocus
           modalWithTouchable
           // showCancelButton
-          headerComponent={
-            this.SelectOrRemoveAll
-          }
+          headerComponent={this.SelectOrRemoveAll}
           stickyFooterComponent={
-            <View style={{  padding: 15, }}>
-              <Text style={{textAlign: 'center'}}>Hi</Text>
+            <View style={{ padding: 15 }}>
+              <Text style={{ textAlign: 'center' }}>Hi</Text>
             </View>
           }
           // hideConfirm
           loading={this.state.loading}
           // filterItems={this.filterItems}
           // alwaysShowSelectText
-          customChipsRenderer={this.customChipsRenderer}
+          // customChipsRenderer={this.customChipsRenderer}
           chipsPosition="top"
-          searchAdornment={(searchTerm) => this.searchAdornment(searchTerm)}
+          searchAdornment={searchTerm => this.searchAdornment(searchTerm)}
           renderSelectText={this.renderSelectText}
           // noResultsComponent={this.noResults}
           loadingComponent={
-            <Loading
-              hasErrored={this.state.hasErrored}
-              fetchCategories={this.fetchCategories}
-            />
+            <Loading hasErrored={this.state.hasErrored} fetchCategories={this.fetchCategories} />
           }
-          chipRemoveIconComponent={<Icon style={{
-            fontSize: 18,
-            marginHorizontal: 6,
-          }}>cancel</Icon>}
+          iconRenderer={this.icon}
           //  cancelIconComponent={<Text style={{color:'white'}}>Cancel</Text>}
           showDropDowns={this.state.showDropDowns}
           expandDropDowns={this.state.expandDropDowns}
@@ -580,7 +666,7 @@ searchAdornment = (searchTerm) => {
           onCancel={this.onCancel}
           onConfirm={this.onConfirm}
           selectedItems={this.state.selectedItems}
-          colors={{ primary: this.state.selectedItems.length ? 'forestgreen' : 'crimson',}}
+          colors={{ primary: this.state.selectedItems.length ? 'forestgreen' : 'crimson' }}
           itemNumberOfLines={3}
           selectLabelNumberOfLines={3}
           styles={{
@@ -597,35 +683,35 @@ searchAdornment = (searchTerm) => {
             //   color: this.state.selectedItems.length ? 'black' : 'lightgrey'
             // },
             selectedSubItemText: {
-               color: 'blue',
+              color: 'blue',
             },
           }}
-           cancelIconComponent={
-            <Icon
-             size={20}
-             name="close"
-             style={{ color: 'white' }}
-           />
-           }
+          // cancelIconComponent={<Icon size={20} name="close" style={{ color: 'white' }} />}
         />
-
+        {/*
         <SectionedMultiSelect
           items={items2}
-          ref={SectionedMultiSelect2 => this.SectionedMultiSelect2 = SectionedMultiSelect2}
+          ref={SectionedMultiSelect2 => (this.SectionedMultiSelect2 = SectionedMultiSelect2)}
           uniqueKey="id"
           subKey="children"
           displayKey="title"
-         // showCancelButton
+          // showCancelButton
           // hideSelect={true}
           selectText={this.state.selectedItems2.length ? 'Select categories' : 'All categories'}
           noResultsComponent={this.noResults}
           loadingComponent={
-            <Loading
-              hasErrored={this.state.hasErrored}
-              fetchCategories={this.fetchCategories}
-            />
+            <Loading hasErrored={this.state.hasErrored} fetchCategories={this.fetchCategories} />
           }
-          //  cancelIconComponent={<Text style={{color:'white'}}>Cancel</Text>}
+          // selectToggleIconComponent={
+          //   <Icon
+          //     name="login"
+          //     style={{
+          //       fontSize: 18,
+          //       marginHorizontal: 6,
+          //     }}
+          //   />
+          // }
+          cancelIconComponent={<Text style={{ color: 'white' }}>Cancel</Text>}
           showDropDowns={this.state.showDropDowns}
           expandDropDowns={this.state.expandDropDowns}
           customLayoutAnimation={LayoutAnimation.Presets.spring}
@@ -634,6 +720,7 @@ searchAdornment = (searchTerm) => {
           showRemoveAll
           selectChildren={this.state.selectChildren}
           highlightChildren={this.state.highlightChildren}
+          // iconRenderer={Icon}
           //  hideSearch
           //  itemFontFamily={fonts.boldCondensed}
           onSelectedItemsChange={this.onSelectedItemsChange2}
@@ -644,35 +731,57 @@ searchAdornment = (searchTerm) => {
           selectedItems={this.state.selectedItems2}
           styles={{
             chipText: {
-               maxWidth: Dimensions.get('screen').width - 90,
+              maxWidth: Dimensions.get('screen').width - 90,
             },
             itemText: {
-              color: this.state.selectedItems2.length ? 'black' : 'lightgrey'
+              color: this.state.selectedItems2.length ? 'black' : 'lightgrey',
             },
             subItemText: {
-              color: this.state.selectedItems2.length ? 'black' : 'lightgrey'
+              color: this.state.selectedItems2.length ? 'black' : 'lightgrey',
             },
-          //   cancelButton: {
-          //  //   flex: 6,
-          //   },
-          //   subItem: {
-          //     paddingVertical: 15,
-          //   },
-
-           }}
+            //   cancelButton: {
+            //  //   flex: 6,
+            //   },
+            //   subItem: {
+            //     paddingVertical: 15,
+            //   },
+          }}
           // numberOfLines={1}
-        />
+        /> */}
         <View>
           <View style={styles.border}>
             <Text style={styles.heading}>Settings</Text>
           </View>
 
           <Toggle name="Single" onPress={this.onSingleToggle} val={this.state.single} />
-          <Toggle name="Read only headings" onPress={this.onReadOnlyHeadingsToggle} val={this.state.readOnlyHeadings} />
-          <Toggle name="Expand dropdowns" onPress={this.onExpandDropDownsToggle} val={this.state.expandDropDowns} disabled={!this.state.showDropDowns}/>
-          <Toggle name="Show dropdown toggles" onPress={this.onShowDropDownsToggle} val={this.state.showDropDowns} />
-          <Toggle name="Auto-highlight children" onPress={this.onHighlightChildrenToggle} val={this.state.highlightChildren} disabled={this.state.selectChildren}/>
-          <Toggle name="Auto-select children" onPress={this.onSelectChildrenToggle} val={this.state.selectChildren} disabled={this.state.highlightChildren}/>
+          <Toggle
+            name="Read only headings"
+            onPress={this.onReadOnlyHeadingsToggle}
+            val={this.state.readOnlyHeadings}
+          />
+          <Toggle
+            name="Expand dropdowns"
+            onPress={this.onExpandDropDownsToggle}
+            val={this.state.expandDropDowns}
+            disabled={!this.state.showDropDowns}
+          />
+          <Toggle
+            name="Show dropdown toggles"
+            onPress={this.onShowDropDownsToggle}
+            val={this.state.showDropDowns}
+          />
+          <Toggle
+            name="Auto-highlight children"
+            onPress={this.onHighlightChildrenToggle}
+            val={this.state.highlightChildren}
+            disabled={this.state.selectChildren}
+          />
+          <Toggle
+            name="Auto-select children"
+            onPress={this.onSelectChildrenToggle}
+            val={this.state.selectChildren}
+            disabled={this.state.highlightChildren}
+          />
 
           <TouchableWithoutFeedback onPress={() => this.SectionedMultiSelect._removeAllItems()}>
             <View style={styles.switch}>
@@ -684,4 +793,3 @@ searchAdornment = (searchTerm) => {
     )
   }
 }
-