react-native-input-tags v0.1.5

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

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.

//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.

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