jwohlfert23 / react-native-tag-input Goto Github PK
View Code? Open in Web Editor NEWA simple React Native component that creates an input for tags, emails, etc.
License: MIT License
A simple React Native component that creates an input for tags, emails, etc.
License: MIT License
https://puu.sh/zjudZ/75c53262a0.png
Can't seem to override this with any styles either?
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) => { } }
)?
hi there,
i'm getting value.map is not a function error when using
any comment will be appreciated!
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 want to put a border to the Tag input , that one also should get changed when count of tags increas.
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,
Hi,
Keyboard not showing on the latest iOS version. 10.3
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.
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
I would like to ask God, there is no content, press the blank space will produce empty Tags how to solve?
undefined is not an object (evaluation '_reactNative.ViewPropTypes.style'
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?
[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)
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.
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}
/>
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?
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
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?
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:
react-native-tag-input/index.js
Line 219 in 90e8a50
What's the purpose of this line?
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?
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.
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" },
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
Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'
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?
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.
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?
There seems to be no support for TypeScript due to missing ts declaration file
There seems to be no license on this repository, could one be added. MIT license would be preferential if possible.
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 would like to render an image inside a tag, a custom tag renderer would be very useful
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,
},
};
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 am seeing that the render function is called infinite times when a value is added.
Hi,
Will you be adding a new feature where the values are being pulled from an api
? along with the auto suggestion ?
Thanks
Works great on iOS, but on Android nothing happens.
WARN Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
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.
npx react-codemod rename-unsafe-lifecycles
in your project source folder.Please update the following components: TagInput
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:
one
console log renders two
ssssas
seems to have no impact whatssoever.Any help appreciated
thanks
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.