TextInput Events

Typical Flow

Setup:

<TextInput
  style={styles.textInput}
  value={value}
  onChangeText={handleChangeText}
  editable={true}
  onPressIn={handlePressIn}
  onPressOut={handlePressOut}
  onFocus={handleFocus}
  onBlur={handleBlur}
  onChange={handleChange}
  onSubmitEditing={handleSubmitEditing}
  onKeyPress={handleKeyPress}
  onTextInput={handleTextInput}
  onSelectionChange={handleSelectionChange}
  onContentSizeChange={handleContentSizeChange}
/>

Steps:

1. Press on the text input
2. Type "Test" using on screen keyboard
3. Press "return" to close the keyboard

Output:

iOS:

LOG  Event: pressIn {"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928682.0450834, "touches": [[Circular]]}
LOG  Event: focus {"eventCount": 0, "target": 75, "text": ""}
LOG  Event: pressOut {"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928744.7620833, "touches": []}

LOG  Event: keyPress {"eventCount": 0, "key": "T", "target": 75}
LOG  Event: textInput {"eventCount": 0, "previousText": "", "range": {"end": 0, "start": 0}, "target": 75, "text": "T"}
LOG  Event: change {"eventCount": 1, "target": 75, "text": "T"}
LOG  Event: changeText T
LOG  Event: selectionChange {"selection": {"end": 1, "start": 1}, "target": 75}
LOG  Event: contentSizeChange {"contentSize": {"height": 21.666666666666668, "width": 11}, "target": 75}

LOG  Event: keyPress {"eventCount": 1, "key": "e", "target": 75}
LOG  Event: textInput {"eventCount": 1, "previousText": "T", "range": {"end": 1, "start": 1}, "target": 75, "text": "e"}
LOG  Event: change {"eventCount": 2, "target": 75, "text": "Te"}
LOG  Event: changeText Te
LOG  Event: selectionChange {"selection": {"end": 2, "start": 2}, "target": 75}
LOG  Event: contentSizeChange {"contentSize": {"height": 21.666666666666668, "width": 19}, "target": 75}

LOG  Event: keyPress {"eventCount": 2, "key": "s", "target": 75}
LOG  Event: textInput {"eventCount": 2, "previousText": "Te", "range": {"end": 2, "start": 2}, "target": 75, "text": "s"}
LOG  Event: change {"eventCount": 3, "target": 75, "text": "Tes"}
LOG  Event: changeText Tes
LOG  Event: selectionChange {"selection": {"end": 3, "start": 3}, "target": 75}
LOG  Event: contentSizeChange {"contentSize": {"height": 21.666666666666668, "width": 28}, "target": 75}

LOG  Event: keyPress {"eventCount": 3, "key": "t", "target": 75}
LOG  Event: textInput {"eventCount": 3, "previousText": "Tes", "range": {"end": 3, "start": 3}, "target": 75, "text": "t"}
LOG  Event: change {"eventCount": 4, "target": 75, "text": "Test"}
LOG  Event: changeText Test
LOG  Event: selectionChange {"selection": {"end": 4, "start": 4}, "target": 75}
LOG  Event: contentSizeChange {"contentSize": {"height": 21.666666666666668, "width": 34}, "target": 75}

LOG  Event: submitEditing {"eventCount": 4, "target": 75, "text": "Test"}
LOG  Event: blur {"eventCount": 4, "target": 75, "text": "Test"}

Android: TODO

Impact of editable={false} prop

Setup:

<TextInput
  style={styles.textInput}
  value={value}
  onChangeText={handleChangeText}
  editable={false}
  onPressIn={handlePressIn}
  onPressOut={handlePressOut}
  onFocus={handleFocus}
  onBlur={handleBlur}
  onChange={handleChange}
/>

Steps:

1. Press TextInput

Output:

iOS:

LOG  Event: pressIn {"changedTouches": [[Circular]], "identifier": 1, "locationX": 57.33332824707031, "locationY": 35, "pageX": 77.33332824707031, "pageY": 146, "target": 117, "timestamp": 707054389.9047917, "touches": [[Circular]]}
LOG  Event: pressOut {"changedTouches": [[Circular]], "identifier": 1, "locationX": 57.33332824707031, "locationY": 35, "pageX": 77.33332824707031, "pageY": 146, "target": 117, "timestamp": 707054477.4037917, "touches": []}

Android:

(No events logged)