I have a react native text input with onChange and onKeypress events. But the handle Key press is happening only when the user press Enter twice

Viewed 22

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.

0 Answers
Related