This project is inspired by react-native-tags.
A React Native component that allows you to input text and formats the text into a tag when a space or comma is entered. Tapping on the tag will remove it.
npm install --save react-native-input-tags yarn add react-native-input-tags import { Button, StyleSheet, Text, TextInput, View } from 'react-native'; import InputTag, { useInputTag } from 'react-native-input-tags'; export default function App() { const inputTag = useInputTag(); return ( <View style={styles.container}> <Text style={styles.title}>#Tags:</Text> <View style={styles.separator} /> <InputTag ref={inputTag} /> <Button title="Submit" onPress={() => { console.log(inputTag.current?.getTags()); }} /> </View> ); }Is ref object, useInputTag allows you to have access to inputTag values
const inputTag = useInputTag(); // get all tags inputed inputTag.current?.getTags();| values | Description |
|---|---|
| getTags | function return list of all tags inputed |
If you would like to add new functionality or modify the way that the tags are rendered then pass in a renderTag prop.
| PropName | Description |
|---|---|
| tag | the tag item { id:string , name:string } |
| onPress | callback when the chip or tag is cliked for deleting |
| onPress | callback when the chip or tag is cliked for pressing |
//custom render tag <InputTag ref={inputTag} renderTag={({ tag, onPress, onDelete }) => { return ( <Text style={{ margin: 10 }} onPress={onDelete}> {tag.name} </Text> ); }} />If you would like to add new functionality or modify the way that the Textinput are rendered then pass in a textInputComponent prop.
| PropName | Description |
|---|---|
| value | the tag string value input |
| onChangeText | Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. |
| onKeyPress | Callback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is 'Enter' or 'Backspace' for respective keys and the typed-in character otherwise including ' ' for space. |
Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. | | onSubmitEditing | Callback that is called when the text input's submit button is pressed. | | style | Text style |
import { TextInput } from 'react-native'; //custom text input <InputTag ref={inputTag} textInputComponent={props => { return <TextInput placeholder="Tag ici..." {...props} />; }} />;| PropName | Description | Default |
|---|---|---|
| initialValue | The input element's text | |
| initialTags | intial tags eg.[{id:"yuf", name:"reactjs"}] | [] |
| createTagOnString | Triggers new tag creation | [",", ".", " "] |
| handlerPressTag | function call when the tag is pressed function handlerPressTag(tag){} | undenfied |
| textInputComponent | render TextInput | |
| renderTag | Manage the rendering of your own Tag |