When I put selectToggle: {backgroundColor: 'red'}
the selectToggle disappear, and just appear chips

<SectionedMultiSelect
items={menuTags}
uniqueKey='id'
subKey='children'
selectText={I18n.t('add_meals')}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={ selectedMenuTags }
readOnlyHeadings={true}
showDropDowns={true}
expandDropDowns={true}
showCancelButton={true}
colors={{
chipColor: color.greenDark,
primary: selectedMenuTags.length? color.aqua : color.grayLight
}}
styles={{
chipText: styles.chip_text,
selectToggle: {backgroundColor: 'red'}
}}
onConfirm={this.handleSaveTags} />

I am very interested in your component, but I need some more functionality such as onConfirm in dev-branch.
So I was glad if I could add custom header component above searchBar.
May I know when changes about onConfirm will in master-branch?

On Android, when I click on anything in the menu, I get this:
TypeError: TypeError: undefined is not a function (evaluating '_iterator[typeof Symbol === "function" ? Symbol.iterator : "@@iterator"]()')

Tried this fix as suggested elsewhere, didn't fix it:

import MultiSelect from 'react-native-multiple-select';
import 'core-js/es6/map'
import 'core-js/es6/symbol'
import 'core-js/fn/symbol/iterator'

I'm just using the example with no changes and getting this problem.

Hello,
I have a weird issue.
When i select one specific children in the list , an other section parent was selected...
Anyway, why a parent section can be selected ?

I will try to investigate more.

Thanks.

Anyway to make it to not need all of these icons. I have font awesome and that is enough for me but it won't run unless I also have MaterialIcons, etc.

Is it possible to define which attribute is shown in the list.

Eg: A displayAttribute='title' prop

If not, do you accept a PR for this?

In Android device it is working and displaying bell but in ios it is not displaying view.please help me

Hi i just assign a dynamic list to items and found that warning

The sectioned-multi-select works perfectly for me. How can I add a cancel button for this? Now there is only "Confirm" button. Please advice.

it would be awesome if creatable functionality is there if an option searched for is not found. I want to add tags and create them dynamically for one app.

I can't see the select toggle button on iOS only, but Android is working well.
I think It seems like a flex issue.
Let me fix and gonna PR for it.

Seems like reloading of the app either in emulator mode or actual device does not close the modal. This occurs if the modal was already open prior to reloading app. The modal then becomes unresponsive and cannot be interacted with.

Anyone else having this problem?

Hi, I have adapted this library successfully previously but it started show an error like:

If dismiss the error, it show scissor (refer below)

Hi all,
How can i limit selection item. for example i want user can only select 5 item.
Many thanks.

App is crashing in release mode while click item. And its said
"TypeError: undefined is not a function (evaluating '_iteratortypeof Symbol === "function" ? Symbol.iterator : "@@iterator"') This error is located at: in VirtualizedList (at FlatList.js:644) in FlatList (at sectioned-multi-select.js:812)"
Evething is ok on debug mode. Probably about
newItems = [...selectedItems, item[uniqueKey]];
line but not sure.

I wish it already did, if I have time I may fork and implement this feature. But it maybe faster for the author to do it. Seems minor but looking at the codebase there is a lot there to digest.

I was digging on the style and color section, but I can't find the way of change the color of Confirm Button,
how Can I get it?

Hello,
With multiselect , if the text label is too long (or display several lines) the checkmark is hidden.

Thanks

If the data array is:
const items = [ { name: "Fruits", id: 0, children: [{ name: "Apple", id: 10, },{ name: "Strawberry", id: 17, },{ name: "Pineapple", id: 13, },{ name: "Banana", id: 14, },{ name: "Watermelon", id: 15, },{ name: "Kiwi fruit", id: 16, }] }, { name: "Gems", id: 1, children: [{ name: "Quartz", id: 1, },{ name: "Zircon", id: 21, },{ name: "Sapphire", id: 22, },{ name: "Topaz", id: 23, }] } ]

When we set the selectedItems array is [1] with readOnlyHeadings = true, it will check the Gems instead of Quartz. Please fix it. Thanks!

im trying to npm install module, but it stuck on loading. I tried other modules, so problem not in npm.

Hy!

I'd like to know if you're interested in this feature. If so, I could make a PR for it.

My plan is to add a new prop (eg.: findItem) as a callback function to be called instead of the built in find method.

_findItem = (id) => {
    const { items, findItem } = this.props
    return findItem ? findItem(id, items) : this.find(id, items)
}

The reason I need this, is because I need accent-insensitive search for county list.

Another styles work fine, but this dont work:

styles={{selectedItemText:{color:'red'}, another... }}

Help!

Hello,
Is it possible to define a maximum number of items that the user can pick from?

#feature

I like the styles for this component as shown in the gifs... but they aren't the default!
Awesome component -- performance and customization is great. 🥇

Hi @renrizzolo, great component and the infinite customization options.
I just want one more :) : a custom chips renderer, I want to render the chips to be uniform with my app: I use react-native-paper.

I also I want the chips to be above the "Select categories" element.

Thanks 👍

Hi,
Is there a way to add keywords if the given keyword can't be found from the item list.

For example when a user search specific item but no result found from the item list, there is a small add button to allow user to add and the modal will close.

After that the keyword will be added into the item list and a chip will be displayed for this keyword.

Hi, when using your package, I get the below errors:
npm ERR! peer dep missing: [email protected], required by [email protected]
npm ERR! peer dep missing: react-native@^0.44.0, required by [email protected]

Should I downgrade my version of react-native to be able to use your package? Is there a reason why you have a dependency on react and react native in your package.json?

Thank you

This is ones of the best packages I've seen. Is there anyway we can incorporate Ajax into it ?

Is there a way to trigger a function when the modal is open or close ?
I need to programmatically update the keyboardShouldPersistTaps state for my parent ScrollView. It's because in my ScrollView I've other input, if I set my ScrollView keyboardShouldPersistTaps to "always" we won't be able to dismiss the keyboard when we tap on the screen.

I think the behaviour with selectText is a bit strange / specific.
When one item is selected, the name of that item is shown, instead of the selectText and when multiple are selected, than it is a combination of selectText, the amount of selected and the names of the selected items.

I would like the option to always show just the selectText independent of what is selected.

When expanded there is always extra padding or too much height on the rowItem?

I'm getting an error when the cancel button is long pressed and sometimes it also throws this error on a short press as well. I've tried to find the source of the problem but can't seem to figure it out.

console.error: "Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRESS_IN`, which is not supported. This is most likely due to `Touchable.longPressDelayTimeout` not being cancelled."
console.error
    YellowBox.js:59:8
Object._handleLongDelay
    Touchable.js:647:14
<unknown>
    JSTimers.js:255:17
_callTimer
    JSTimers.js:151:6
Object.callTimers
    JSTimers.js:404:6
MessageQueue.__callFunction
    MessageQueue.js:344:41
<unknown>
    MessageQueue.js:107:11
MessageQueue.__guard
    MessageQueue.js:291:8
MessageQueue.callFunctionReturnFlushedQueue
    MessageQueue.js:106:9

Please guide me how to use onSelectedItemObjectsChange in sectioned multiselect for multiple item selection.

    <SectionedMultiSelect
          items={this.state.cat}
          uniqueKey='id'
          subKey='children'
          selectText='category'
          showDropDowns={true}
          selectChildren={true}
          readOnlyHeadings={true}
          onSelectedItemObjectsChange = {}
          selectedItems={this.state.category}
          removeAllText="Remove All"
          showRemoveAll={true}
      />

Hello,

There is a way to get the full item object instead of only the key (like native Picker do) ?

Thanks.

Can I open only the Modal without displaying the Select?

I'd like to change the style of the main component. i.e. the component that the user taps to open the multi select modal. Is this possible? If so, how?

Need add a customize of the text string "selected" in "(xxx selected)"

This is my select and styles object but it is not working...

 <SectionedMultiSelect
                      styles={{container: styles.container}}
                      colors={{primary: '#ef5350', text: '#ef5350', chipColor: '#ef5350'}}
                      items={items} 
                      uniqueKey='id'
                      subKey='children'
                      selectText='Type'
                      alwaysShowSelectText={true}
                      showDropDowns={true}
                      readOnlyHeadings={false}
                      selectChildren={true}
                      confirmText='Done'
                      onSelectedItemsChange={this.onSelectedItemsChange}
                      selectedItems={this.state.selectedItems}
                    />



const styles = StyleSheet.create({
  container: {
    backgroundColor: '#222', borderColor: '#CDCDCD', borderWidth: 1
  },
  chipContainer: {
    padding: 20,
    marginTop: 50
  }
});

I am new to react-native. Currently, i am working on react-native-sectioned-multi-select and i am having multiple sectioned-multi-select pickers. Now, what i want is on "onSelectedItemsChange" i am calling only one function called "onSelectedPublishersChange" for all multi-select pickers with respective "selectedItems" values. But, in all pickers values are almost same it means "A" is in first picker but "A" can be in third picker too and user can select from both the pickers.
But when we are saving values in "onSelectedPublishersChange" we need to check whether particular value is already there or not if it is not there then we will save it else we will continue with next value.
How can we do this?
My code snippet is below:

render()
{
  <SectionedMultiSelect
        items={this.state.selectedPublishers1}
        uniqueKey='id'
        subKey='children'
        selectText='Selected Publishers'
        showDropDowns={true}
        selectChildren={true}
        readOnlyHeadings={true}
        onSelectedItemsChange={this.onSelectedPublishersChange}
        selectedItems={this.state.selectedPublishers1}
        removeAllText="Remove All"
        showRemoveAll={true}
    />
    </View>
    <ScrollView keyboardShouldPersistTaps='always'>
        <View key={1} style={{width:320}}>
            <SectionedMultiSelect
                items={this.state.categories}
                uniqueKey='id'
                subKey='children'
                selectText='Publishers by category'
                showDropDowns={true}
                selectChildren={true}
                readOnlyHeadings={true}
                onSelectedItemsChange={this.onSelectedPublishersChange}
                selectedItems={this.state.publishersByCategory}
                removeAllText="Remove All"
                showRemoveAll={true}
            />
        </View>
        <View key={2}>
            <SectionedMultiSelect
                items={this.state.clients}
                uniqueKey='id'
                subKey='children'
                selectText='publishers by client'
                showDropDowns={true}
                readOnlyHeadings={true}
                onSelectedItemsChange={this.onSelectedPublishersChange}
                selectedItems={this.state.publishersByClient}
                removeAllText="Remove All"
                showRemoveAll={true}
            />
        </View>
        <View key={3}>
            <SectionedMultiSelect
                items={this.state.groups}
                uniqueKey='id'
                subKey='children'
                selectText='publishers by group'
                showDropDowns={true}
                readOnlyHeadings={true}
                onSelectedItemsChange={this.onSelectedPublishersChange}
                selectedItems={this.state.publishersByGroup}
                removeAllText="Remove All"
                showRemoveAll={true}
            />
          </View>
}
onSelectedPublishersChange = (selectedPublishersIds) => { 
    [HERE I NEED TO CHECK FOR UNIQUE VALUES]
    this.setState({selectedPublishers1});
}```

Hi there! First of all, thank you soooo much for this component, best modal dropdown so far!
Really glad that found it!

Would be cool if it would be possible to disable search as it's not always needed.

Thanks a lot!!

Missing selected value on iOS only. Working fine on android.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';

export default class App extends React.Component {

  constructor() {
    super();
    this.state = {
      selectedItems: [],
    }
  }

  onSelectedItemsChange = (selectedItems) => {
    this.setState({ selectedItems });
  }

  render() {
    const items = [
      {
        name: "Fruits",
        id: '0',
        children: [{
          name: "Apple",
          id: '10',
        }, {
          name: "Strawberry",
          id: '17',
        }, {
          name: "Pineapple",
          id: '13',
        }, {
          name: "Banana",
          id: '14',
        }, {
          name: "Watermelon",
          id: '15',
        }, {
          name: "Kiwi fruit",
          id: '16',
        }]
      }];

    return (
      <View style={styles.container}>
        <SectionedMultiSelect
            items={items}
            uniqueKey='id'
            subKey='children'
            showDropDowns={false}
            readOnlyHeadings={true}
            onSelectedItemsChange={this.onSelectedItemsChange}
            selectedItems={this.state.selectedItems}
            showChips={false}
            single={true}      
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Hi,

Thanks very much for the package. Very useful! I was wondering if there was any way to give the option to select all items in a given section? For long lists, selecting items one by one could be cumbersome.

I checked the current props and you could add an extra property (say selectSubItems) to use in combination with readOnlyHeadings=false. If selectSubItems is true in combination with readOnlyHeadings=false, then selecting the parent item should cause all sub items to be selected as well.

In combination with that enhancement, I think it would be nice not to list all sub items within a given category when selecting an entire category. Instead, the category should be listed as would happen currently if using readOnlyHeadings=false or "All of CategoryName" to make it explicit.

Please let me know your thoughts.

Thanks

currently if we search and select the item, we've to tap twice.
first tap to dismiss the keyboard,
second tap to select the items.

Possible to add this props so that users can search and select right away ?

I've try to add this props in <modal> and <ScrollView> inside the <modal> it worked well.

For example, in my case it would be the name of cities:
São Paulo === Sao Paulo

I've found bug with confirm button when showCancelButton === false. I did solve it with adding style={{ flex: 1 }} for Touchable - container for View around cancel and confirm buttons, but I don't want fork library, because you are continuing to develop this component :)

With my styles it should be flex-stretched to window width

Empty Arrays leads to infinity loading component. This needs to have some props to handle "No data available".