raynor85/react-native-material-selectize

A React Native component inspired to Selectize which follows Material Design guidelines.

react-native-material-selectize's Issues

SyntaxError: Invalid regular expression: missing ) when type "\"

I try to replicate your example on this snack. Everything was going fine before I type "\", then suddenly error occurred.

SyntaxError: Invalid regular expression: missing ) when type \

Set items in textInputProps of Selectize

Can I add any items inside the textInputProps of Selectize?

I would like to pass few items as array.
I need to set the field with some values/tags/categories.

Any help will be appreciated.

dropdown items require double tab inside ScrollView

Is this the expected behavior on mobile? If I'm following the code correctly, it seems blur is preventing onPress and that timeout allows you 150ms to achieve the second press.

Slow data fetch and display

Hi,
I'm using this library for displaying a list of languages I have about 373 languages in a JSON file. the problem is that in my device (I'm using Samsung Galaxy s7) it takes too much to load about 5 to 6sec and if I select a language it will take around 6 to 7sec to display the chips every time. I was wondering if there is a way accelerate this process like limiting the data display for a certain a number and if the user decides to search a particular language only then it will fetch the data from the whole JSON.

Thank you

Request to add product in Start React

Hello,

I am Maheshwari from team GeekyAnts. On behalf of Start React, we add open source products which we find helpful to the community & also we provide credits to author itself.

Let me know if you are interested showcase your product in our open source website.

Looking forward to hear from you.

i'm not able to install the package

Hi, I want to use your library, but I can't download it via npm either yarn

• For yarn its stuck on Fetching packages...

• For npm its stuck on [email protected]

I also tried installing pervious versions of the package like 1.10.0 and 1.9.0 but no luck.
PS: It's not an internet problem, my internet is working fine.

Please help.

How to make list go over all other elements vs pushing them down?

Currently this is what happens when you trigger the list to show up. It will push everything down. I want the list to go over the other elements and not push the ui around. is this possible?

I was looking at your code and I'm thinking maybe you can add a prop for this and when it's true the map inside _renderItems can send the index to _getRow and after that you'd do something like: renderRow(id, () => this._selectItem(id), items.entities.item[id], listRowStyle, { position: "absolute", top: ROW_HEIGHT * (index + 1))

Here's how the interaction is at the moment:

Inside ScrollView

Thank you for your awesome library.
But what if I place this inside a ScrollView with many items that need scrolling?
Thank you.

Readme

How to load chips from database ?

Hi, I am working on the edit screen of my application. Is there any way to show chips from the array of strings that am getting from the database?

Label style

It's possible to change label style ?

Can selectedItems be repopulated by state variables after the component is mounted?

Feature Request: Simple onChange() callback prop

Hello!

I think it would be very convenient to add an onChange prop to <Selectize />.
Here is my desired used case:

<Selectize
    label={this.props.displayName}
    itemId="value"
    items={this.props.fields}
    selectedItems={this.state.selected}
    onChange={(selected) => this.setState({ selected )}
/>

It looks like this could be achieved by adding this line:
this.props.onChange(selectedItems.result.map(id => selectedItems.entities.item[id]));

to the _onChipClose and _selectItem functions.

`keyboardShouldPersistTaps` prop required of `ScrollView` parent

When Selectize is a child of a ScrollView, the ScrollView's keyboardShouldPersistTaps prop must be set to either handled or always for dropdown completion to work properly.

This is the case in the example project, but this detail is not listed anywhere in the documentation. It took me a couple of hours to discover that this was the culprit. Perhaps having this detail mentioned in the README or elsewhere would help others.

More chip style overrides

Correct me if I'm wrong, but currently it seems the text color and the icon color of the chip are both not overridable using chipIconStyle and chipStyle. Since the chip component has 5 different subcomponents could it be better to just pass a chipStyle object with each subcomponent as a key? Like so:

chipStyle = {
  root: {},
  container: {},
  text: {},
  iconWrapper: {},
  icon: {},
} 

Or do you feel like at this point you'd just be supplying your own component instead? If not, I can submit a PR.

Overlay text

react-native-material-selectize/src/react-native-selectize.js

Lines 316 to 320 in 6d43dad

	<Text
	style={hiddenTextStyle}
	onLayout={this._onLayout}>
	{text}
	</Text>

I've found that an overlay text is being added while writting the text of a new chip. Don't know if it's purpossed for Android or iOS, but by using react-native-web it looks a bit ugly. Could you be able to clarify the purposse of that, and if so if it could be removed (maybe by an optional flag)?

Pass selected Items on render

I'd like to pass in items that have already been selected on render. So for instance:

1. User selects emails and moves away from selectize component, and selected emails go into a state.
2. User decides to go back to selectize component to choose another email.
3. I'd like to make it so that the emails that have already been chosen from the previous session are passed through so that the chips can re-render and it looks like the first session.

Hope this makes sense. There is a way to pass in a list of emails to choose from, but there is no way- that I can see- to pass in a list of items that have been chosen already so that the chips will render right away.