Description:
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:
