Segmented Text Input Component For React Native

A wickedly customizable text input component for React Native. Useful for tags, spellchecking, and much more.

Install & Import:

# NPM
$ npm i react-native-segmented-text-input --save

import SegmentedTextInput from "react-native-segmented-text-input";

Basic Usage:

export default () => {
  const [value, onChange] = useState(['', []]);
  return (
    <SegmentedTextInput
      value={value}
      onChange={onChange}
    />
  );
};

Default Props.

value: ['', []],
onChange: Promise.resolve,
patterns: {
  /* a twitter @mention */
  [PATTERN_MENTION]: ({style, onRequestDelete, children, ...extraProps}) => (
    <TouchableOpacity
      onPress={onRequestDelete}
    >
      <Text
        {...extraProps}
        style={[style, { fontWeight: "bold" }]}
        children={`${children} `}
      />
    </TouchableOpacity>
  ),
},
placeholder: "Add some @mentions...",
disabled: false,
textStyle: {
  fontSize: 28,
},
textInputStyle: {
  minWidth: 100,
},
invalidTextStyle: {
  color: "red",
},
segmentContainerStyle: {},
/* don't mark the first character as an invalid animation */
shouldRenderInvalid: str => !str.startsWith("@"),
max: 3,
onSuggest: text => Promise.resolve([]),
minSuggestionLength: 2,
debounce: 250,

Preview:

Download Details:

Author: cawfree

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/cawfree/react-native-segmented-text-input

License: MIT