react-native-input-tags

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.

Installation

npm install --save react-native-input-tags

yarn add react-native-input-tags

Usage

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>
  );
}

useInputTag

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

Render Props

renderTag

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>
    );
  }}
/>

textInputComponent

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} />;
  }}
/>;

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