React Native - add specific clearButton on input field when the keyboard is open

Question

I am trying to create a specific clear button to use on both ios and android devices. I have created a reusable component for the several fields I have. When I press the fields since the keyboard opens the X button shows in all fields not only the field I have pressed. In the code below emptyField is a value set in a parent component.

const [keyboardShow, setKeyboardShow] = useState<boolean>(false);
  useEffect(() => {
    const showKeyboard = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardShow(true);
    });
    const hideKeyboard = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardShow(false);
    });
    return () => {
      showKeyboard.remove();
      hideKeyboard.remove();
    };
  }, []);


<TouchableComponent>
<TextInput
            key={currencyTypeId}
            ref={forwardRef}
            style={styles.input}
            onChangeText={onChangeText}
            value={inputValue}
            editable={editable}
            autoCorrect={false}
            autoCompleteType='off'
            returnKeyType={returnKeyType}
            placeholder={placeholder}
            placeholderTextColor={placeholderColor}
            keyboardType={keyboardType}
          />
        </TouchableComponent>

  {inputValue.length > 0 && keyboardShow && (
        <View style={styles.customButton}>
          <TouchableOpacity onPress={emptyField}>
            <CloseIcon width={12} height={12}/>
          </TouchableOpacity>
        </View>
      )}

Answer 1

Seems 'keyboardDidShow' and 'keyboardDidHide' events triggered in each reusable component.

You can try another approach. Just use onBlur and onFocus events. It's isolated for each component:

<TouchableComponent>
        <TextInput
          onBlur={() => setIsFocused(false)}
          onFocus={() => setIsFocused(true)}
          key={currencyTypeId}
          ref={forwardRef}
          style={styles.input}
          onChangeText={onChangeText}
          value={inputValue}
          editable={editable}
          autoCorrect={false}
          autoCompleteType="off"
          returnKeyType={returnKeyType}
          placeholder={placeholder}
          placeholderTextColor={placeholderColor}
          keyboardType={keyboardType}
        />
      </TouchableComponent>


      {inputValue.length > 0 && isFocused && (
        <View style={styles.customButton}>
          <TouchableOpacity onPress={() => {}}>
            <CloseIcon width={12} height={12} />
          </TouchableOpacity>
        </View>
      )}