React Native TextInput wont allow typing/text change

Question

I have a component that has a TextInput and 2 buttons. 1 button increments and the other decrements. I have an onChange and value on the TextInput and when the buttons are clicked the value changes(the text in the input increases or decreases), however typing the value via the TextInput, it doesn't work. It isn't allowing anything to be typed. Backspace won't even work after the increment/decrement buttons are clicked. Thought I'd put my code here to see if anyone could point out what I am missing. I think it has something to do with the .toString() on the value because when I remove that, I am able to type in the TextInput, but I need that .toString() there in order to do numbers and have the initial value as null.

This is the parent component:

  measurementValue = (measurement) => {
    this.setState({ measurement });
  }

  updateMeasurement = () => {
    this.measurementValue(this.state.measurement);
  }

  decrement = () => {
    this.measurementValue(this.state.measurement - 1);
  }

  increment = () => {
    this.measurementValue(this.state.measurement + 1);
  }

  render() {
    return (
      <View>
        <MeasurementControl
          updateMeasurement={this.updateMeasurement}
          decrement={this.decrement}
          increment={this.increment}
          measurement={this.state.measurement}
        />
      </View>
    );
  }
}

This is the child component:

export class MeasurementControl extends Component {

  render() {
    const {
      updateMeasurement,
      decrement,
      increment,
      measurement,
    } = this.props;
    const styles = getStyles();

    const value = measurement === null
    ? ''
    : measurement;

    return (
      <View style={styles.container}>
        <View style={styles.input}>
          <TextInput
            style={styles.inputText}
            keyboardType='numeric'
            placeholder='Enter #'
            onChangeText={updateMeasurement}
            value={value.toString()}
          />
        </View>
        <View style={styles.buttonWrapper}>
          <Button
            buttonStyles={styles.decrementButton}
            textStyles={styles.decrementButtonText}
            onPress={decrement}
          >
            __
          </Button>
          <Button
            buttonStyles={styles.incrementButton}
            textStyles={styles.buttonText}
            onPress={increment}
          >
            +
          </Button>
        </View>
      </View>
    );
  }
}

Answer 1

your TextInput have property called onChangeText this event will be triggered each time you write to the input

checkout my code

<TextInput
    style={styles.inputText}
    keyboardType='numeric'
    placeholder='Enter #'
    onChangeText={(text) => {

        if(text === ""){
            updateMeasurement(null);
            return;
        }

        if(isNaN(text))    //this will allow only number
            return;
        updateMeasurement(parseInt(text))}
    }
    value={value.toString()}
/>

---

updateMeasurement = (value) => {
    this.measurementValue(value);
}

Answer 2

The part you are missing is to update the value on change

onChangeText={(text) => updateMeasurement(text)}


updateMeasurement = (text) => {
    this.measurementValue(text);
  }