Обработка текстового ввода курсора, размещение реагирующих окон

Question

История:

Я пытаюсь создать текстовое поле для ввода кредитной карты. Цель состоит в том, чтобы включить пробелы после каждого 4-го, 8-го и 12-го символа.

Ожидаемый результат:

Курсор должен оставаться в конце textInput после добавления пробелов

Фактический результат:

На платформе Windows курсор не продолжается в конце textInput, а находится за пробелом и набранным последним числом.

PS.

Чтобы сделать это более понятным, у меня есть небольшой репозиторий, воспроизводящий проблему, который можно найти здесь https://github.com/meddyrainzo/maskedTextInput/tree/master

Соответствующие блоки кода из репо

импорт подержанный (кроме обычного материала от реагировать и реагировать-нативный)

import valid from 'card-validator';

Метод рендеринга

render() {
  const { creditCardNumber } = this.state;
  const { container } = styles;
  return (
    <View style={container}>
      <TextInput
        placeholder='Enter text' 
        value={creditCardNumber}
        onChangeText={inputValue => this.onChangeTextHandler(inputValue)}
      />
    </View>
  );
}

Метод onChangeTextHandler

onChangeTextHandler = (textInput) => {
  const card = valid.number(textInput).card || fallbackCard;    
  const maxCardLength = card.lengths[card.lengths.length -1];

  const onlyNumericValues = this.removeNonNumber(textInput);
  const cardNumberWithoutGaps = onlyNumericValues.substr(0, maxCardLength);
  const creditCardNumber = this.addGaps(cardNumberWithoutGaps);
  this.setState({creditCardNumber});
}

Метод removeNonNumber

removeNonNumber = (string = '') => string.replace(/[^\d]/g, '');

Наконец, метод addGaps, в котором добавляются пробелы

addGaps = (str) => {
  const gaps = [0, 4, 8, 12];
  const offsets = (gaps).concat([str.length]);

  return offsets.map((end, index) => {
    if (index === 0) return '';
    const start = offsets[index - 1];
    return str.substr(start, end - start);
  }).filter(part => part !== '').join(' ');
};

Все приведенные выше кодовые блоки находятся в файле App.js по ссылке репо. Я все еще рекомендую клонировать репозиторий, чтобы вы могли вручную протестировать и посмотреть, как результаты отличаются в iOS и Android от Windows (для тех, кто заинтересован).

Поэтому мой главный вопрос: кто-нибудь знает, как переместить курсор в конец textInput в Windows? Я знаю, что реагирующий-нативный язык добавил в textInput реквизит, называемый "выделение", который можно использовать для управления начальным и конечным положением курсоров, но, проверяя код реагирующего-натива для окон, пока еще не существует реализации для выделения-указателя.,

Используемые версии:

реактивный: 0.49.3