The state variable
const [emailState, setEmailState] = useState({
items: [],
value: '',
reset: false,
});
The text input looks like this
<TextInput
autoCapitalize="none"
multiline={true}
style={getInputStyle(colors)}
value={emailState.value}
placeholder={criteriaPlaceholder}
placeholderTextColor={colors.rgbPlaceholderColor}
onKeyPress={handleKeyPress}
onChangeText= {handleOnChange}
/>
These are the helpers
const handleOnChange = (evt)=>{
setEmailState(prevState => ({...prevState, value: evt}));
if (emailState.items.includes(evt)) {
setErrorEmailValues(prevState => ({
...prevState,
errorBoolean: true,
message: criteriaEmailError,
}));
} else {
setErrorEmailValues(prevState => ({
...prevState,
errorBoolean: false,
message: '',
}));
}
}
const handleKeyPress = ({ nativeEvent: { key: keyValue } }) =>{
if (
['Enter', 'Space', 'Tab', ' ', 'Return'].includes(
keyValue
)
){
var value = emailState.value.trim();
let error = '';
const isValid = email => {
const isInList = email => {
return emailState.items.includes(email);
};
if (isInList(email)) {
error = criteriaEmailError;
}
if (error) {
return false;
}
return true;
};
if (value && isValid(value)) {
setEmailState(prevState => ({
...prevState,
items: [...emailState.items, value],
value: '',
}));
};
}
}
The items are getting added only when the user press Enter or space twice. The problem is only for android. On ios and iPad it's working fine. I was trying to create a emailChips like thing.