There seems to be no support for TypeScript due to missing ts declaration file

[eslint] componentWillReceiveProps is deprecated since React 16.3.0, use UNSAFE_componentWillReceiveProps instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops (react/no-deprecated)

Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'

Hi,
Will you be adding a new feature where the values are being pulled from an api? along with the auto suggestion ?

Thanks

WARN Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: TagInput
WARN Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: TagInput

hi there,

i'm getting value.map is not a function error when using
any comment will be appreciated!

There seems to be no license on this repository, could one be added. MIT license would be preferential if possible.

Nothing is drawn when I use TagInput. My code:

  export class TagsInput extends Component {

    constructor(props) {
      super(props);
      this.state = {
        text: "tags",
        tags: ["tags_1", "tags_2", "tags_3"],
        tag: ""
      }
    }

    render() {
      return (
        <TagInput
          value={this.state.tags}
          onChange={(tags) => this.setState({ tags })}
          labelExtractor={(tag) => tag}
          text={this.state.text}
          onChangeText={(text) => this.setState({ text })}
        />
      );
    }

  }
}

Are there any design requirements for TagInput? What are the requirement for the styles?

Hey, first of all thanks for the library.

I just finished installing it and I can't find a way to add any new tags from the input; pressing the return key on the keyboard does nothing and neither does using space or a comma or anything.

I think the ReadMe.md should indicate how this is supposed to work, mabye visually or written to make it easier to understand.

Apologies if this issue is repetitive.

I want to put a border to the Tag input , that one also should get changed when count of tags increas.

After entering so many tags, I started to clear them one by one. Even though I cleared all of them, the placeholder text "search" is located at the center and after pressing the clear button twice or thrice , it is coming to the start.

I would like to ask God, there is no content, press the blank space will produce empty Tags how to solve?

I am seeing that the render function is called infinite times when a value is added.

Hi,

Keyboard not showing on the latest iOS version. 10.3

I am trying to update the placeholder but it is not working. any solution please
"dependencies": { "@react-native-community/async-storage": "^1.6.1", "@react-native-community/netinfo": "^4.2.1", "axios": "^0.19.0", "jetifier": "^1.6.4", "jsonwebtoken": "^8.5.1", "jwt-decode": "^2.2.0", "native-base": "^2.13.8", "pubnub-react": "^1.3.2", "query-string": "^6.8.3", "react": "16.8.6", "react-native": "0.60.4", "react-native-calendars": "^1.212.0", "react-native-camera": "git+https://[email protected]/react-native-community/react-native-camera.git", "react-native-chart-kit": "^3.3.1", "react-native-check-box": "^2.1.7", "react-native-datepicker": "^1.7.2", "react-native-document-picker": "^3.2.4", "react-native-gesture-handler": "^1.4.1", "react-native-gifted-chat": "^0.11.3", "react-native-image-picker": "^1.1.0", "react-native-linear-gradient": "^2.5.6", "react-native-progress": "^3.6.0", "react-native-push-notification": "^3.1.9", "react-native-qrcode-svg": "^5.2.0", "react-native-select-multiple": "^2.1.0", "react-native-svg": "^9.9.3", "react-native-table-component": "^1.2.1", "react-native-tag-input": "0.0.21", "react-native-vector-icons": "^6.6.0", "react-native-video": "^5.0.2", "react-native-video-controls": "^2.2.3", "react-native-webview": "^7.0.5", "react-navigation": "^3.12.1", "react-redux": "^7.1.1", "redux": "^4.0.4", "redux-logger": "^3.0.6", "redux-promise": "^0.6.0", "redux-thunk": "^2.3.0", "socket.io-client": "^2.3.0", "uuid": "^3.3.3" },

Hi there!

Hoping you could help me out with figuring out the autofocus on this when opening inside a modal. I've tried adding both "autofocus: {true}" as a prop and also trying to give the actual control a ref and then using this.refs.emailInput.focus() but can't seem to get either to work. Any help would be appreciated.

Thanks!

I've set up a TagInput pretty similar to the way it's set up in the example. When I type a new tag, the previous tag gets removed.

I suspect it's because of this line:

What's the purpose of this line?

In version 0.0.17, I can't add new tag when click button "done" in keyboard ? This does not happen in version 0.0.16

As shown in above image, the tag created seems to be having height issue? I tried to change the props of maxHeight but doesnt seems to help?

<TagInput
                value={this.state.tags}
                onChange={this.onChangeTags}
                labelExtractor={this.labelExtractor}
                text={this.state.text}
                onChangeText={this.onChangeText}
                tagColor="blue"
                tagTextColor="white"
                inputProps={inputProps}
                maxHeight={300}
              />

const inputProps = {
  keyboardType: 'default',
  placeholder: 'email',
  autoFocus: true,
  style: {
    fontSize: 14,
    marginVertical: Platform.OS === 'ios' ? 10 : -2,
  },
};

When I try to update the values (with the onChange handler), I get this warning and no visual changes to the input component:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the component.

I do get an array with the new elements, though. The issue arises when I try to execute any setState operation inside the function called by onChange.

Also, I tried to see if the component really unmounted with the componentWillUnmount method, but it doesn't get executed at all. Any suggestions as to why I'm getting this warning?

<TagInput>

Tags positioned above
Cursor positioned in new line

<Input>
"Tags" in position Left
Cursor positioned on a single line

I WANT THIS

Do you think it could be possiblem for '100%' for component Height.
My expect is compoent's height is flexable with parent View.

    <TagInput

        // maxHeight={300}
        maxHeight={'100%'}
        value={tags}

      />

Hi trying to get this working but seem to be struggling, any help appreciated:

                        <TagInput
                            value={['one', 'two']}
                            onChange={(emails) => this.onEmailChange(emails)} 
                        
                        />

the onEmailChange just has a console.log:

 onEmailChange (emails){
        console.log(emails);
    }

I get the following rendered:

I have a few issues:

1. When I click one console log renders two
2. typing in the type somehting field where I have ssssas seems to have no impact whatssoever.

Any help appreciated

thanks

Does this plugin support auto complete of tags? If not, what would be the best approach to complement this plugin with that feature? Thank you.

I see the done button and then it goes and I can add another one, but I can't essentially escape the tag input unless I click on another field. Is this intended UI?

Great work on this tag input. Since it essentially extends a TextInput - any reason you don't allow us to pass in any property of a TextInput?

<TextInput
props={...props}

Specifically, I'm looking to change the selectionColor prop of the TextInput.

Thanks,
-Darren

Hi, thanks for this very awesome Component!

I was wondering, would it be possible to override the 'delete' option on tags, both graphically (i.e. render a custom character/<View>) and functionally (onTagPressed={ (tag) => { } })?

Wondering if this is due to the height I have set on the container? What would be the ideal styles to use so that this doesn't happen?

When I installed your library in my project the react native code highlighting becomes undefined.

The IDE I use is PhpStorm & WebStorm. This library makes the components from react native become undefined and have no highlighting or code completion in the IDE.

Works great on iOS, but on Android nothing happens.

I'm using react-native in its 0.42.3 version due to the specifity of my project.
I'm having trouble with this library. (ViewPropTypes.style is undefined)

I'd like to know from which version this component is fully supported.

Great job,
Thanks

React native v0.54: The error actually seems to stem from facebook/react-native#18374 . Didn't know whether to keep this issue open here.

I have a use case of this library that isn't quite compatible with the current version, so I've forked my own copy. I thought I'd propose merging that fork into this version in case people think it makes sense, but it's definitely worth a discussion, since it involves removing some logic and would complicate certain use cases.

In case anybody wants to use the forked version, you can find it here. It's missing a few updates from the latest version of this library, but I'll probably merge those in sometime soon.

Anyways, my use case is a typeahead. I want to determine this.state.text in a way that's different from this library's default, so I've "lifted" that state into a prop, and basically removed all the logic for determining this.state.text from TagInput. To complete the circle there is also a callback prop this.props.setText that gets called when the user changes the contents of the TextInput.

To be clear, parseTags, this.props.separators, this.props.regex, and this.props.parseOnBlur are all gone in my version.

@jwohlfert23 and @sibelius, let me know if you think there would be interest in making this change in the mainline version of this component. I think it makes the component far more flexible and able to support more use cases, but it does force people to implement the parseTags logic themselves.

If I have many tags selected, this component grows indefinitely

Would be good to provide a ScrollView to make it possible to select many items

the scroll should be customizable (horizontal or vertically),
number of lines should also be customizable

In my screenshot above, I think 2/3 lines would be a good number.

I made 2 pull requests to improve the code and code style

this one #11 add onChangeText prop support, as I would like to load some suggestions based on user typing

the second one: #12 add eslint react and react-native specific rules to improve code style

I will try to work on the ScrollView implementation and I'll send a pull request soon

I would like to render an image inside a tag, a custom tag renderer would be very useful

When i include this library in my project, Webstorm says Cannot resolve symbol 'React-Native-Component' where React-Native-Component = any react native component.

https://puu.sh/zjudZ/75c53262a0.png

Can't seem to override this with any styles either?

onChangeText seems to not work. TagInput component prop structure is like this

<TagInput
                        value={this.state.interestsArray}
                        onChangeText={(text) => {
                          console.log(text)
                          }
                        }
                        onChange={(changedArray) => {
                            this.setState({
                              interestsArray: changedArray
                            })
                          }
                        }
                      />

onChange seems to work, but onChangeText when I would like to log it. Should it behave the same way as in TextInput 's onChangeText?

undefined is not an object (evaluation '_reactNative.ViewPropTypes.style'

my code looks like this

     <TagInput
	maxHeight={'100%'}
	inputDefaultWidth={'75%'}
	style={{paddingLeft: 10, paddingBottom: 2 }}
	editable={false}
	value={this.state.to}
	onChange={(to) => this.setState({ to })}
	labelExtractor={(email) => email}
	style={{ paddingLeft: 10, paddingBottom: 2 }}
							/>

you can see the screen shot there's a editable={false} which I assume that there's no start typing placeholder,

In the example, tags are parse when the user types a preset number of special characters. Is it possible to parse the tag input on keyboard enter press? If so, how?

Is this feature already here? (I couldn't find it)

If not, is it possible that this feature could be added? Are there any limitations that's preventing this feature from being implemented on Android or IOS?

I am using my custom input box to enter keywords, and I don't want to show the cursor comes after tags. and when I do editable= false, I am not able to delete tags so is there any other way to hide the cursor and still able to delete tags.